Widget:LeafletWasWarWo

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script> (function() {

   var map = L.map('map').setView([50.95, 6.95], 12);

   L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
       maxZoom: 19,
       attribution: '© OpenStreetMap'
   }).addTo(map);

   fetch('/alteskoeln/Was_War_Wo.geojson')  // ggf. Pfad anpassen!
     .then(response => response.json())
     .then(data => {
       L.geoJSON(data, {

           style: function (feature) {
               switch (feature.properties.Nutzung) {
                   case 'Militär': return {color: "blue", weight: 1};
                   case 'Fabrik': return {color: "#ff0000", weight: 1};
                   case 'Bahn': return {color: "black", weight: 1};
                   case 'Freizeit': return {color: "green", weight: 1};
                   default: return {color: "#888888", weight: 1};
               }
           },

           onEachFeature: function (feature, layer) {

               for (let key in feature.properties) {
                   if (feature.properties[key] === null) {
                       feature.properties[key] = "";
                   }
               }

               var popupContent =
                   "Name: " + feature.properties.Name + "
" +
                   "Nutzung: " + feature.properties.Nutzung + "
" +
                   "von: " + feature.properties.von + "
" +
                   "bis: " + feature.properties.bis + "
" +
                   "Info: " + feature.properties.Info + "
" +
                   '<a href="' + feature.properties.Bild + '" target="_blank"><img src="' + feature.properties.Bild + '" width="150px" /></a>
' +
                   '<a href="' + feature.properties.Link + '" target="_blank">Mehr Infos</a>';

               layer.bindPopup(popupContent);
           }

       }).addTo(map);
     });

})(); </script>