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:
<!-- Debug-Ausgabe (temporär) -->
<!-- Widget:Leaflet (keine #ask im Widget) -->
<pre id="debug" style="white-space: pre-wrap; max-height:200px; overflow:auto; border:1px solid #ccc; padding:6px;"></pre>
 
<div id="map" style="width:100%; height:600px;"></div>
<div id="map" style="width:100%; height:600px;"></div>


<!-- SMW-Daten als JSON array -->
<script id="smw-data" type="application/json">
{{#ask:
[[Kategorie:Schule]]
|?Koordinaten.Latitude=lat
|?Koordinaten.Longitude=lon
|?Name=name
|?Schultyp=type
|format=json
|plain=yes
|api=yes
}}
</script>
<!-- Leaflet & Cluster Libs -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
Zeile 29: Zeile 11:
<script>
<script>
(function(){
(function(){
    // raw JSON aus dem Seiten-Skriptblock holen
    var rawEl = document.getElementById('smw-data');
    if (!rawEl) {
        console.error("Kein Element mit id='smw-data' gefunden. Bitte #ask auf der Seite einbinden.");
        return;
    }
    var raw = rawEl.textContent.replace(/<\/?p>/g,'').trim(); // p-Tags entfernen, falls vorhanden
    // optional: debug in Konsole
    console.log("raw SMW output:", raw);


    // JSON aus Scriptblock holen
     var schoolData;
    var raw = document.getElementById('smw-data').textContent.trim();
 
    // Debug: zeige den rohen SMW-Output auf der Seite
    document.getElementById('debug').textContent = raw;
 
 
    // JSON sicher parsen
     var schoolData = [];
     try {
     try {
         schoolData = JSON.parse(raw);
         schoolData = JSON.parse(raw);
     } catch(e) {
     } catch (e) {
         console.error("JSON-Fehler:", e, raw);
         console.error("Fehler beim Parsen der SMW-Daten:", e);
         return;
         return;
     }
     }


    // Karte erstellen
     var map = L.map('map').setView([50.94, 6.96], 11);
     var map = L.map('map').setView([50.94, 6.96], 11);
    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: 18,
        attribution:'© OpenStreetMap contributors'
    }).addTo(map);
    // Cluster Gruppen
     var clusters = {
     var clusters = {
         Grundschule:   L.markerClusterGroup(),
         Grundschule: L.markerClusterGroup(),
         Gymnasium:     L.markerClusterGroup(),
         Gymnasium: L.markerClusterGroup(),
         Gesamtschule: L.markerClusterGroup(),
         Gesamtschule: L.markerClusterGroup(),
         Berufskolleg: L.markerClusterGroup(),
         Berufskolleg: L.markerClusterGroup(),
         Förderschule: L.markerClusterGroup(),
         Förderschule: L.markerClusterGroup(),
         Unbekannt:     L.markerClusterGroup()
         Unbekannt: L.markerClusterGroup()
     };
     };


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


    // Alle Cluster zur Karte hinzufügen
     Object.values(clusters).forEach(function(g){ map.addLayer(g); });
     Object.values(clusters).forEach(function(g){
        map.addLayer(g);
    });


    // Layer-Steuerung
     L.control.layers(null, {
     L.control.layers(null, {
         "Grundschulen": clusters.Grundschule,
         "Grundschulen": clusters.Grundschule,
         "Gymnasien":     clusters.Gymnasium,
         "Gymnasien": clusters.Gymnasium,
         "Gesamtschulen": clusters.Gesamtschule,
         "Gesamtschulen": clusters.Gesamtschule,
         "Berufskollegs": clusters.Berufskolleg,
         "Berufskollegs": clusters.Berufskolleg,
         "Förderschulen": clusters.Förderschule,
         "Förderschulen": clusters.Förderschule,
         "Sonstige":     clusters.Unbekannt
         "Sonstige": clusters.Unbekannt
     }, {collapsed:false}).addTo(map);
     }, {collapsed:false}).addTo(map);


    // Kartenausschnitt automatisch anpassen
     if (bounds.length) map.fitBounds(bounds);
     if (bounds.length) {
        map.fitBounds(bounds);
    }
 
})();
})();
</script>
</script>

Version vom 7. Dezember 2025, 19:55 Uhr

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

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

<script> (function(){ 

   // raw JSON aus dem Seiten-Skriptblock holen
   var rawEl = document.getElementById('smw-data');
   if (!rawEl) {
       console.error("Kein Element mit id='smw-data' gefunden. Bitte #ask auf der Seite einbinden.");
       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;
   try {
       schoolData = JSON.parse(raw);
   } catch (e) {
       console.error("Fehler beim Parsen der SMW-Daten:", e);
       return;
   }

   var map = L.map('map').setView([50.94, 6.96], 11);
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom:18, attribution:'© OSM' }).addTo(map);

   var clusters = {
       Grundschule: L.markerClusterGroup(),
       Gymnasium: L.markerClusterGroup(),
       Gesamtschule: L.markerClusterGroup(),
       Berufskolleg: L.markerClusterGroup(),
       Förderschule: L.markerClusterGroup(),
       Unbekannt: L.markerClusterGroup()
   };

   var bounds = [];
   schoolData.forEach(function(s){
       if (!s.coords) return;
       var parts = s.coords.split(',');
       if (parts.length !== 2) return;
       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('' + (s.name||) + '
' + type);
       (clusters[type] || clusters.Unbekannt).addLayer(marker);
       bounds.push([lat, lon]);
   });

   Object.values(clusters).forEach(function(g){ map.addLayer(g); });

   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>

Abgerufen von „https://altes-koeln.de/index.php?title=Widget:Leaflet&oldid=89563“
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.