index.html

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="leaflet/leaflet.css" />
  <script src="leaflet/leaflet.js"></script>
  <script src="jquery-3.3.1.min.js"></script>
  <style>
    #map {
      height: 500px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    // create a map of NL
    var map = L.map('map').setView([52.1460121, 5.9052025], 7);
			
    // add an OpenStreetMap tile layer
    L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', { 
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // popup function
    function onEachFeature(feature, layer) {
      // does this feature have a property named popupContent?
      if (feature.properties && feature.properties.popupContent) {
        layer.bindPopup(feature.properties.popupContent);
      }	else if (feature.properties.name) {
        var html = '<b>'+feature.properties.name+'</b><br/>'+
                   feature.properties.address+'<br/>'+
                   "<a href='"+feature.properties.url+"' target='_blank' >website</a><br/>"+
                   feature.properties.description;
        layer.bindPopup(html);
      } else{
	console.log("oneachfeature");
      };
    }

    // styling funtion
    function pointToLayer(feature, latlon) {
      var icon = feature.properties['marker-symbol'];
      var iconurl = 'img/'+icon+'.png';
      return new L.Marker(latlon, {
        icon: new L.icon({
	iconUrl: iconurl,
	iconSize: [30, 70],
	iconAnchor: [15, 35],
	popupAnchor: [0, -25]
	})
      });
    }

    var geojsonURL = 'data/all.geojson';
    $.ajax({
      type: "GET",
      url: geojsonURL,
      dataType: 'json',
      success: function (response) {
        geojsonLayer = L.geoJson(response, {
          onEachFeature: onEachFeature,
          pointToLayer: pointToLayer
        }).addTo(map);
      }
    });
</script>
</body>
</html>