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> &mdash; Map data &copy; <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();