Altes Köln

Widget:Schulkarte2: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
(Die Seite wurde neu angelegt: „<?php →‎* * Widget: Schulkarte * * Zeigt eine Leaflet Karte mit Marker basierend auf SMW-Daten *: ?> <!-- MAP CONTAINER --> <div id="map" style="height: 450px; border:1px solid #ccc;"></div> <div id="map-debug" style="font-size:12px; background:#eee; padding:5px; margin-top:5px;"></div> <!-- Leaflet laden --> <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…“)
 
Keine Bearbeitungszusammenfassung
 
(5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<?php
<?php
/**
/**
  * Widget: Schulkarte
  * Widget: Schulkarte2
*
* Zeigt eine Leaflet Karte mit Marker basierend auf SMW-Daten
  *
  *
* Zeigt alle Schulen aus SMW auf einer Leaflet-Karte
  */
  */
?>
?>


<!-- MAP CONTAINER -->
<!-- MAP CONTAINER -->
<div id="map" style="height: 450px; border:1px solid #ccc;"></div>
<div id="map" style="height:500px; border:1px solid #ccc;">
<div id="map-debug" style="font-size:12px; background:#eee; padding:5px; margin-top:5px;"></div>
{"name":"Genoveva-Gymnasium","type":"Gymnasium","coords":"50.93,6.96"},
{"name":"Maria-Montessori-Grundschule","type":"Grundschule","coords":"50.94,6.95"}
</div>


<!-- Leaflet laden -->
<!-- Leaflet CSS/JS -->
<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>
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.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>
<script>
// Debug-Ausgabe
document.addEventListener("DOMContentLoaded", function () {
function debug(msg) {
     // SMW JSON lesen
     var box = document.getElementById('map-debug');
    box.innerHTML += msg + "<br>";
}
 
// JSON aus <div id="smw-data"> lesen
function getSMWData() {
     var el = document.getElementById('smw-data');
     var el = document.getElementById('smw-data');
     if (!el) {
     if (!el) {
         debug("❌ Kein smw-data Element gefunden! Stelle sicher, dass #ask JSON erzeugt.");
         console.error("❌ Kein smw-data Element gefunden!");
         return null;
         return;
     }
     }


     var raw = el.textContent.trim();
     var raw = el.textContent.trim();
     debug("📌 Rohdaten gefunden: " + raw.substring(0, 60) + "...");
     if (!raw) {
        console.error("❌ smw-data leer!");
        return;
    }


    var smw;
     try {
     try {
         return JSON.parse(raw);
         smw = JSON.parse(raw);
     } catch (e) {
     } catch(e) {
         debug("❌ JSON Parse Fehler: " + e);
         console.error("❌ JSON Parse Fehler:", e, raw);
         return null;
         return;
     }
     }
}
document.addEventListener("DOMContentLoaded", function () {
    var smw = getSMWData();


     if (!smw || !smw.results) {
     if (!smw.results) {
         debug("⚠️ Keine gültigen SMW Werte erhalten.");
         console.error("⚠️ Keine Ergebnisse in JSON");
         return;
         return;
     }
     }
    debug("✔️ JSON geparst, starte Leaflet...");


     // Karte anlegen
     // Karte anlegen
     var map = L.map('map').setView([50.94, 6.95], 11);
     var map = L.map('map').setView([50.94, 6.95], 11);
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 18
         maxZoom: 18,
        attribution: '© OpenStreetMap contributors'
     }).addTo(map);
     }).addTo(map);
    // Marker-Cluster
    var markers = L.markerClusterGroup();


     // Marker setzen
     // Marker setzen
     Object.keys(smw.results).forEach(function (page) {
     Object.keys(smw.results).forEach(function(title) {
         var d = smw.results[page].printouts;
         var d = smw.results[title].printouts;


         if (!d.Koordinaten || !d.Schule) return;
         if (!d.Koordinaten || !d.Schule) return;


         var coordStr = d.Koordinaten[0];  // "50.93, 6.96"
         var coords = d.Koordinaten[0].split(',');
        var parts = coordStr.split(',');
         if (coords.length !== 2) return;
 
         if (parts.length !== 2) {
            debug("⚠️ Koordinaten Formatproblem: " + coordStr);
            return;
        }


         var lat = parseFloat(parts[0]);
         var lat = parseFloat(coords[0]);
         var lon = parseFloat(parts[1]);
         var lon = parseFloat(coords[1]);
         var name = d.Schule[0];
         var name = d.Schule[0];
        var typ = (d.Schultyp && d.Schultyp[0]) ? d.Schultyp[0] : "Unbekannt";


         debug("➡ Marker: " + name + " (" + lat + ", " + lon + ")");
         var marker = L.marker([lat, lon]).bindPopup("<strong>" + name + "</strong><br/>" + typ);
        markers.addLayer(marker);
    });


        L.marker([lat, lon]).addTo(map).bindPopup(name);
    map.addLayer(markers);
    });


     debug("✔️ Kartenaufbau abgeschlossen.");
     // Auto-Zoom auf alle Marker
    if (markers.getLayers().length > 0) {
        map.fitBounds(markers.getBounds().pad(0.2));
    }
});
});
</script>
</script>

Aktuelle Version vom 8. Dezember 2025, 11:35 Uhr

<?php /** 

* Widget: Schulkarte2
*
* Zeigt alle Schulen aus SMW auf einer Leaflet-Karte
*/

?> 

{"name":"Genoveva-Gymnasium","type":"Gymnasium","coords":"50.93,6.96"},
{"name":"Maria-Montessori-Grundschule","type":"Grundschule","coords":"50.94,6.95"}

<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.markercluster@1.5.3/dist/leaflet.markercluster.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> document.addEventListener("DOMContentLoaded", function () { 

   // SMW JSON lesen
   var el = document.getElementById('smw-data');
   if (!el) {
       console.error("❌ Kein smw-data Element gefunden!");
       return;
   }

   var raw = el.textContent.trim();
   if (!raw) {
       console.error("❌ smw-data leer!");
       return;
   }

   var smw;
   try {
       smw = JSON.parse(raw);
   } catch(e) {
       console.error("❌ JSON Parse Fehler:", e, raw);
       return;
   }

   if (!smw.results) {
       console.error("⚠️ Keine Ergebnisse in JSON");
       return;
   }

   // Karte anlegen
   var map = L.map('map').setView([50.94, 6.95], 11);

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

   // Marker-Cluster
   var markers = L.markerClusterGroup();

   // Marker setzen
   Object.keys(smw.results).forEach(function(title) {
       var d = smw.results[title].printouts;

       if (!d.Koordinaten || !d.Schule) return;

       var coords = d.Koordinaten[0].split(',');
       if (coords.length !== 2) return;

       var lat = parseFloat(coords[0]);
       var lon = parseFloat(coords[1]);
       var name = d.Schule[0];
       var typ = (d.Schultyp && d.Schultyp[0]) ? d.Schultyp[0] : "Unbekannt";

       var marker = L.marker([lat, lon]).bindPopup("" + name + "
" + typ);
       markers.addLayer(marker);
   });

   map.addLayer(markers);

   // Auto-Zoom auf alle Marker
   if (markers.getLayers().length > 0) {
       map.fitBounds(markers.getBounds().pad(0.2));
   }

}); </script>

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