46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
|
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();
|