Widgets/Schulkarte.widget.php

<?php /**

* Widget: Schulkarte
*
* Zeigt eine Leaflet Karte mit Marker basierend auf SMW-Daten
*
*/

?>

<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> // Debug-Ausgabe function debug(msg) {

   var box = document.getElementById('map-debug');
   box.innerHTML += msg + "
";

}

// JSON aus

lesen

function getSMWData() {

   var el = document.getElementById('smw-data');
   if (!el) {
       debug("❌ Kein smw-data Element gefunden! Stelle sicher, dass #ask JSON erzeugt.");
       return null;
   }

   var raw = el.textContent.trim();
   debug("📌 Rohdaten gefunden: " + raw.substring(0, 60) + "...");

   try {
       return JSON.parse(raw);
   } catch (e) {
       debug("❌ JSON Parse Fehler: " + e);
       return null;
   }

}

document.addEventListener("DOMContentLoaded", function () {

   var smw = getSMWData();

   if (!smw || !smw.results) {
       debug("⚠️ Keine gültigen SMW Werte erhalten.");
       return;
   }

   debug("✔️ JSON geparst, starte Leaflet...");

   // 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
   }).addTo(map);

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

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

       var coordStr = d.Koordinaten[0];  // "50.93, 6.96"
       var parts = coordStr.split(',');

       if (parts.length !== 2) {
           debug("⚠️ Koordinaten Formatproblem: " + coordStr);
           return;
       }

       var lat = parseFloat(parts[0]);
       var lon = parseFloat(parts[1]);
       var name = d.Schule[0];

       debug("➡ Marker: " + name + " (" + lat + ", " + lon + ")");

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

   debug("✔️ Kartenaufbau abgeschlossen.");

}); </script>