Widget:Schulkarte2

<?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>