|
|
@@ -0,0 +1,45 @@
|
|
|
+var map = L.map('map').setView([44.5000, 11.3447], 13);
|
|
|
+
|
|
|
+L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}.{ext}', {
|
|
|
+ attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
|
|
+ subdomains: 'abcd',
|
|
|
+ maxZoom: 15,
|
|
|
+ minZoom: 12,
|
|
|
+ ext: 'png'
|
|
|
+}).addTo(map);;
|
|
|
+
|
|
|
+var geojsonMarkerOptions = {
|
|
|
+ radius: 8,
|
|
|
+ fillColor: "#fb1f4f",
|
|
|
+ color: "#000",
|
|
|
+ weight: 1,
|
|
|
+ opacity: 1,
|
|
|
+ fillOpacity: 0.94
|
|
|
+};
|
|
|
+
|
|
|
+var request = new XMLHttpRequest();
|
|
|
+
|
|
|
+request.open('GET', './map.geojson', true);
|
|
|
+
|
|
|
+request.onload = function() {
|
|
|
+ if (request.status >= 200 && request.status < 400) {
|
|
|
+ L.geoJSON(JSON.parse(request.responseText), {
|
|
|
+ pointToLayer: function (feature, latlng) {
|
|
|
+ return L.circleMarker(latlng, geojsonMarkerOptions);
|
|
|
+ },
|
|
|
+ onEachFeature: (feature, layer) => {
|
|
|
+ if (feature.properties && feature.properties.name) {
|
|
|
+ layer.bindPopup("<h1>"+feature.properties.name+"</h1>"+feature.properties.description.replace("\n","<br><br>"));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).addTo(map);
|
|
|
+ } else {
|
|
|
+ console.log("error: "+request)
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+request.onerror = function() {
|
|
|
+ console.log("error: "+request)
|
|
|
+};
|
|
|
+
|
|
|
+request.send();
|
