Altes Köln

Widget:Leaflet: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<!-- Widget:Leaflet (keine #ask im Widget) -->
<map id="map" style="width:100%; height:600px;"></map>
<div id="map" style="width:100%; height:600px;"></div>
<div id="log" style="display:none;"></div>


<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
<script>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
(function(){


<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css"/>
    function debug(msg) {
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css"/>
        var dbg=document.getElementById("debug");
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
        if(dbg) dbg.textContent += "\n" + msg;
    }


<script>
     var rawEl = document.getElementById("smw-data");
(function(){
    // raw JSON aus dem Seiten-Skriptblock holen
     var rawEl = document.getElementById('smw-data');
     if (!rawEl) {
     if (!rawEl) {
         console.error("Kein Element mit id='smw-data' gefunden. Bitte #ask auf der Seite einbinden.");
         debug("FEHLER: smw-data nicht gefunden!");
         return;
         return;
     }
     }
    var raw = rawEl.textContent.replace(/<\/?p>/g,'').trim(); // p-Tags entfernen, falls vorhanden
    // optional: debug in Konsole
    console.log("raw SMW output:", raw);


     var schoolData;
     var raw = rawEl.textContent.trim();
    debug("ROHDATEN:\n" + raw);
 
    var schools=[];
     try {
     try {
         schoolData = JSON.parse(raw);
         schools = JSON.parse(raw);
     } catch (e) {
        debug("JSON erfolgreich geparst ("+schools.length+" Einträge)");
         console.error("Fehler beim Parsen der SMW-Daten:", e);
     } catch(e) {
         debug("JSON PARSE FEHLER: "+e);
         return;
         return;
     }
     }


     var map = L.map('map').setView([50.94, 6.96], 11);
     var map = L.map("map").setView([50.94, 6.97], 12);
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom:18, attribution:'© OSM' }).addTo(map);
     L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        maxZoom:19
    }).addTo(map);
 
    var markerGroup = L.markerClusterGroup();
 
    schools.forEach(function(s){
        if(!s.coords) return;
        var parts=s.coords.split(",");
        if(parts.length !== 2) return;


    var clusters = {
        var lat=parseFloat(parts[0]);
        Grundschule: L.markerClusterGroup(),
         var lon=parseFloat(parts[1]);
         Gymnasium: L.markerClusterGroup(),
         if(isNaN(lat)||isNaN(lon)) return;
         Gesamtschule: L.markerClusterGroup(),
        Berufskolleg: L.markerClusterGroup(),
        Förderschule: L.markerClusterGroup(),
        Unbekannt: L.markerClusterGroup()
    };


    var bounds = [];
         var marker=L.marker([lat,lon]).bindPopup(
    schoolData.forEach(function(s){
            "<b>"+(s.name||"Unbekannt")+"</b><br>"+
        if (!s.coords) return;
            (s.type||"")
        var parts = s.coords.split(',');
        );
        if (parts.length !== 2) return;
         markerGroup.addLayer(marker);
        var lat = parseFloat(parts[0]), lon = parseFloat(parts[1]);
        if (isNaN(lat) || isNaN(lon)) return;
        var type = s.type || "Unbekannt";
         var marker = L.marker([lat, lon]).bindPopup('<strong>' + (s.name||'') + '</strong><br>' + type);
        (clusters[type] || clusters.Unbekannt).addLayer(marker);
         bounds.push([lat, lon]);
     });
     });


     Object.values(clusters).forEach(function(g){ map.addLayer(g); });
     map.addLayer(markerGroup);
 
    L.control.layers(null, {
        "Grundschulen": clusters.Grundschule,
        "Gymnasien": clusters.Gymnasium,
        "Gesamtschulen": clusters.Gesamtschule,
        "Berufskollegs": clusters.Berufskolleg,
        "Förderschulen": clusters.Förderschule,
        "Sonstige": clusters.Unbekannt
    }, {collapsed:false}).addTo(map);


    if (bounds.length) map.fitBounds(bounds);
})();
})();
</script>
</script>

Version vom 7. Dezember 2025, 23:11 Uhr

<map id="map" style="width:100%; height:600px;"></map>

<script> (function(){

   function debug(msg) {
       var dbg=document.getElementById("debug");
       if(dbg) dbg.textContent += "\n" + msg;
   }
   var rawEl = document.getElementById("smw-data");
   if (!rawEl) {
       debug("FEHLER: smw-data nicht gefunden!");
       return;
   }
   var raw = rawEl.textContent.trim();
   debug("ROHDATEN:\n" + raw);
   var schools=[];
   try {
       schools = JSON.parse(raw);
       debug("JSON erfolgreich geparst ("+schools.length+" Einträge)");
   } catch(e) {
       debug("JSON PARSE FEHLER: "+e);
       return;
   }
   var map = L.map("map").setView([50.94, 6.97], 12);
   L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
       maxZoom:19
   }).addTo(map);
   var markerGroup = L.markerClusterGroup();
   schools.forEach(function(s){
       if(!s.coords) return;
       var parts=s.coords.split(",");
       if(parts.length !== 2) return;
       var lat=parseFloat(parts[0]);
       var lon=parseFloat(parts[1]);
       if(isNaN(lat)||isNaN(lon)) return;
       var marker=L.marker([lat,lon]).bindPopup(
           ""+(s.name||"Unbekannt")+"
"+ (s.type||"") ); markerGroup.addLayer(marker); });
   map.addLayer(markerGroup);

})(); </script>

Cookies helfen uns bei der Bereitstellung von Altes Köln. Durch die Nutzung von Altes Köln erklärst du dich damit einverstanden, dass wir Cookies speichern.