Spaces:
Running
Running
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title></title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> | |
| <link rel="stylesheet" href="https://opengeo.tech/maps/leaflet-search/src/leaflet-search.css" /> | |
| <link rel="stylesheet" href="./style.css" /> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| </head> | |
| <body> | |
| <h1>Some 2022 Papers</h4> | |
| <div id="post-it"> | |
| <b>Search values:</b><br /> | |
| aquamarine, black, blue, cyan, darkblue, darkred, darkgray, dodgerblue, gray, green, red, skyblue, yellow, white ... | |
| </div> | |
| <div id="map"></div> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | |
| <script src="https://opengeo.tech/maps/leaflet-search/src/leaflet-search.js"></script> | |
| <script> | |
| //sample data values for populate map | |
| var data = [ | |
| {"loc":[41.575330,13.102411], "title":"aquamarine"}, | |
| {"loc":[41.575730,13.002411], "title":"black"}, | |
| {"loc":[41.807149,13.162994], "title":"blue"}, | |
| {"loc":[41.507149,13.172994], "title":"chocolate"}, | |
| {"loc":[41.847149,14.132994], "title":"coral"}, | |
| {"loc":[41.219190,13.062145], "title":"cyan"}, | |
| {"loc":[41.344190,13.242145], "title":"darkblue"}, | |
| {"loc":[41.679190,13.122145], "title":"Darkred"}, | |
| {"loc":[41.329190,13.192145], "title":"Darkgray"}, | |
| {"loc":[41.379290,13.122545], "title":"dodgerblue"}, | |
| {"loc":[41.409190,13.362145], "title":"gray"}, | |
| {"loc":[41.794008,12.583884], "title":"green"}, | |
| {"loc":[41.805008,12.982884], "title":"greenyellow"}, | |
| {"loc":[41.536175,13.273590], "title":"red"}, | |
| {"loc":[41.516175,13.373590], "title":"rosybrown"}, | |
| {"loc":[41.506175,13.273590], "title":"royalblue"}, | |
| {"loc":[41.836175,13.673590], "title":"salmon"}, | |
| {"loc":[41.796175,13.570590], "title":"seagreen"}, | |
| {"loc":[41.436175,13.573590], "title":"seashell"}, | |
| {"loc":[41.336175,13.973590], "title":"silver"}, | |
| {"loc":[41.236175,13.273590], "title":"skyblue"}, | |
| {"loc":[41.546175,13.473590], "title":"yellow"}, | |
| {"loc":[41.239190,13.032145], "title":"white"} | |
| ]; | |
| var map = new L.Map('map', {zoom: 9, center: new L.latLng(data[0].loc) }); //set center from first location | |
| // map.addLayer(new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer | |
| var markersLayer = new L.LayerGroup(); //layer contain searched elements | |
| map.addLayer(markersLayer); | |
| var controlSearch = new L.Control.Search({ | |
| position:'topright', | |
| layer: markersLayer, | |
| initial: false, | |
| zoom: 12, | |
| marker: false | |
| }); | |
| map.addControl( controlSearch ); | |
| ////////////populate map with markers from sample data | |
| for(i in data) { | |
| var title = data[i].title, //value searched | |
| loc = data[i].loc, //position found | |
| abstract = 'This is an abstract', | |
| track = 'NLP Applications', | |
| url = 'https://' | |
| trackLabel = track.replace(' ', '-') | |
| // circleMarker, Marker | |
| marker = new L.circleMarker(new L.latLng(loc), {title: title, radius: 5, className: 'label-' + trackLabel} );//se property searched | |
| marker.bindPopup('<b><a href="'+ url + '">' + title + '</a></b> (' + track + '):<br />' + abstract ); | |
| markersLayer.addLayer(marker); | |
| } | |
| </script> | |
| </body> | |
| </html> | |