Widget:Leaflet

<script id="smw-data" type="application/json"> JSON </script>

<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() {

   // Daten aus SMW holen
   var raw = document.getElementById('smw-data').textContent.trim();
   if (!raw) return;

   var json = JSON.parse(raw);
   var data = [];

   // JSON in vernünftige Objekte überführen
   if (json.results) {
       for (var key in json.results) {
           if (!json.results.hasOwnProperty(key)) continue;
           var rec = json.results[key];
           var po  = rec.printouts || {};

           var coords = po.coords && po.coords[0] ? po.coords[0] : null;
           var typ    = po.type && po.type[0] ? po.type[0] : 'Unbekannt';
           var name   = po.name && po.name[0] ? po.name[0] : rec.fulltext;

           data.push({
               name: name,
               type: typ,
               coords: coords
           });
       }
   }

   // Leaflet Karte erzeugen
   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: '© OpenStreetMap contributors'
   }).addTo(map);

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

   var bounds = [];

   // Marker erzeugen
   data.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 + '
' + s.type);

       var layer = clusters[s.type] || clusters.Unbekannt;
       layer.addLayer(marker);

       bounds.push([lat, lon]);
   });

   // Markergruppen aktivieren
   Object.values(clusters).forEach(function(group) {
       map.addLayer(group);
   });

   // Layersteuerung
   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);

   // Karte auf Marker zoomen
   if (bounds.length) {
       map.fitBounds(bounds);
   }

})(); </script>