var noDescText = "No description available";



var shOSM = L.tileLayer('https://mbtiler.nyaaa.net/styles/basic-preview/512/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <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('./dataActual.json')
  .then(response => response.json())
  .then(data => {
    // Define waypoint markers
    function createMarker(waypoint) {
      
      return L.marker([waypoint.latlng.split(",")[0], waypoint.latlng.split(",")[1]], {
        radius: 5,
        color: '#337aff',
        fillColor: '#337aff'
      }).bindPopup(waypoint.title ?? 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);