74 lines
1.8 KiB
JavaScript
74 lines
1.8 KiB
JavaScript
|
|
var noDescText = "No description available";
|
|
|
|
|
|
|
|
var shOSM = L.tileLayer('https://mbtiler.nyaaa.net/styles/basic-preview/512/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
});
|
|
|
|
var osmHOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'});
|
|
|
|
var map = L.map('map', {
|
|
layers: [shOSM,osmHOT],
|
|
zoom: 10,
|
|
center: [59.170448010556015, 18.17052930229775]
|
|
|
|
});
|
|
|
|
var baseMaps = {
|
|
"OpenStreetMap": osmHOT,
|
|
"OpenStreetMap Selfhosted": shOSM
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//var home = L.marker([59.171400616127954, 18.170324708303983]).addTo(map);
|
|
var popup = L.popup();
|
|
function onMapClick(e) {
|
|
popup
|
|
.setLatLng(e.latlng)
|
|
.setContent('<p>You clicked on the Map at: <br />' + e.latlng.toString() + ' </p>' )
|
|
.openOn(map);
|
|
}
|
|
|
|
map.on('click', onMapClick);
|
|
|
|
var markers = L.markerClusterGroup();
|
|
|
|
|
|
fetch('./data.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Define waypoint markers
|
|
function createMarker(waypoint) {
|
|
|
|
return L.marker([waypoint.lat, waypoint.lng], {
|
|
radius: 5,
|
|
color: '#337aff',
|
|
fillColor: '#337aff'
|
|
}).bindPopup(waypoint.desc ?? noDescText);
|
|
};
|
|
|
|
// Create waypoints from server data and add them to the map
|
|
//var markers = [];
|
|
for (var i=0; i<data.length; i++) {
|
|
var marker = createMarker(data[i]);
|
|
//marker.addTo(map); // Add the marker to the existing map object
|
|
markers.addLayer(marker);
|
|
}
|
|
})
|
|
.catch(error => console.error('Error:', error));
|
|
|
|
map.addLayer(markers);
|
|
var overlayMaps = {
|
|
"Shelters": markers
|
|
}
|
|
|
|
var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map); |