Widget:Leaflet: Unterschied zwischen den Versionen

Aktuelle Version vom 10. Dezember 2025, 00:07 Uhr

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

@@ Zeile 1: / Zeile 1: @@
-<widget>
+<div id="map" style="width: 100%; height: 600px;"></div>
-<!-- CSS für Karte -->
-<style>
-#leafmap {
-    width: 100%;
-    height: 500px;
-}
-</style>
-<div id="leafmap"></div>
+<!-- SMW Datenabfrage -->
+<script id="smw-data" type="application/json">
+{{#ask:
+ [[Kategorie:Schule]]
+ |?Position=coords
+ |?Schultyp=type
+ |?Name=name
+ |format=json
+ |plain=yes
+}}
+</script>
-<!-- Leaflet laden -->
+<!-- Leaflet Ressourcen -->
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/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.4/dist/leaflet.js"></script>
+<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>
-// Helpers
+(function() {
-function parseCoordinates(c) {
+    // Daten aus SMW holen
-     if (!c) return null;
+    var raw = document.getElementById('smw-data').textContent.trim();
-     let parts = c.split(",");
+     if (!raw) return;
-     if (parts.length !== 2) return null;
-     return {
+     var json = JSON.parse(raw);
-         lat: parseFloat(parts[0].trim()),
+    var data = [];
-         lng: parseFloat(parts[1].trim())
+    // 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()
      };
-}
-function loadSMWData() {
+    var bounds = [];
-    let el = document.getElementById("smw-data");
-    if (!el) {
+    // Marker erzeugen
-         console.warn("⚠ Kein smw-data Element gefunden.");
+    data.forEach(function(s) {
-         return [];
+        if (!s.coords) return;
-    }
+        var parts = s.coords.split(',');
-    try {
+        if (parts.length !== 2) return;
-         return JSON.parse(el.textContent);
-    } catch (e) {
+         var lat = parseFloat(parts[0]);
-         console.error("JSON-Fehler:", e);
+         var lon = parseFloat(parts[1]);
-         return [];
+        if (isNaN(lat) || isNaN(lon)) return;
-     }
-}
+         var marker = L.marker([lat, lon])
+            .bindPopup('<strong>' + s.name + '</strong><br>' + s.type);
+         var layer = clusters[s.type] || clusters.Unbekannt;
+        layer.addLayer(marker);
+         bounds.push([lat, lon]);
+     });
-// Initialisierung Leaflet
+    // Markergruppen aktivieren
-const map = L.map('leafmap').setView([50.94, 6.95], 12);
+    Object.values(clusters).forEach(function(group) {
-L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        map.addLayer(group);
-     attribution: '&copy; OSM'
+     });
-}).addTo(map);
-let data = loadSMWData();
+    // 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);
-data.forEach(entry => {
+     // Karte auf Marker zoomen
-     const pos = parseCoordinates(entry.coords);
+     if (bounds.length) {
-     if (pos) {
+         map.fitBounds(bounds);
-         L.marker([pos.lat, pos.lng])
-            .addTo(map)
-            .bindPopup(entry.name || "(keine Bezeichnung)");
      }
-});
+})();
 </script>
-</widget>

Altes Köln

Widget:Leaflet: Unterschied zwischen den Versionen

Aktuelle Version vom 10. Dezember 2025, 00:07 Uhr