Widget:SchulkarteLeaflet: Unterschied zwischen den Versionen

Aktuelle Version vom 17. Dezember 2025, 18:44 Uhr

 // SMW-API (bei Ihnen ohne /wiki/)
 const ask = ' Die folgende Koordinate wurde nicht erkannt: +.|?Position|?Schultyp|limit=5000';
 const jsonUrl = '/api.php?action=ask&format=json&query=' + encodeURIComponent(ask);

 // Icons nach Schultyp

const filePath = (name) => '/wiki/Spezial:Dateipfad/' + encodeURIComponent(name); const iconForType = {

 "Gymnasium": filePath('MarkerRot.png'),
 "Volksschule": filePath('MarkerBlau.png')

}; const defaultIconUrl = filePath('MarkerBlau.png');

 // JSON laden
 const resp = await fetch(jsonUrl, { credentials: 'same-origin' });
 if (!resp.ok) throw new Error('SMW JSON nicht erreichbar: ' + resp.status);
 const data = await resp.json();

 // Leaflet Karte
 const map = L.map('schulkarte');
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   maxZoom: 19,
   attribution: '© OpenStreetMap'
 }).addTo(map);

 const bounds = [];

 // Ergebnisse
 const results = (data && data.query && data.query.results) ? data.query.results : {};

 for (const key in results) {
   const r = results[key];
   const po = r.printouts || {};
   const pos = (po.Position && po.Position[0]) ? po.Position[0] : null;

   // defensiv: ungültige Position überspringen
   if (!pos || typeof pos.lat !== 'number' || typeof pos.lon !== 'number') continue;

   const typ = (po.Schultyp && po.Schultyp[0]) ? String(po.Schultyp[0]) : ;
   const iconUrl = iconForType[typ] || defaultIconUrl;

   const icon = L.icon({
     iconUrl,
     iconSize: [24, 24],
     iconAnchor: [12, 24]
   });

   const title = r.fulltext || key;
   const url = r.fullurl || ('/wiki/' + encodeURIComponent(title));

   L.marker([pos.lat, pos.lon], { icon })
     .addTo(map)
     .bindPopup(`<a href="${url}">${title}</a>
Schultyp: ${typ || '-'}`);

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

 // Zoom/Extent
 if (bounds.length) {
   map.fitBounds(bounds, { padding: [20, 20] });
 } else {
   map.setView([50.94, 6.96], 12);
 }

})(); </script>

@@ Zeile 1: / Zeile 1: @@
 <div id="schulkarte" style="width:100%; height:500px;"></div>
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 <script>
 (async function () {
-  // 1) Konfiguration: JSON-Quelle und Icon-Mapping
-  const jsonUrl = mw.util.wikiScript('index') + '?title=Schulen/GeoJSON&action=raw';
-  const iconForType = {
-    "Gymnasium": "{{filepath:Marker 13 rot.png}}",
-    "Grundschule": "{{filepath:Marker 11 rot.png}}"
-    // weitere Typen hier ergänzen
-  };
-  const defaultIconUrl = "{{filepath:Marker 11 rot.png}}";
-   // 2) Leaflet sicher laden (MediaWiki ResourceLoader)
+   // SMW-API (bei Ihnen ohne /wiki/)
-   await mw.loader.using(['ext.leaflet']);
+  const ask = '[[Kategorie:Schule]] [[Position::+]]|?Position|?Schultyp|limit=5000';
+  const jsonUrl = '/api.php?action=ask&format=json&query=' + encodeURIComponent(ask);
+  // Icons nach Schultyp
+const filePath = (name) => '/wiki/Spezial:Dateipfad/' + encodeURIComponent(name);
+const iconForType = {
+   "Gymnasium": filePath('MarkerRot.png'),
+  "Volksschule": filePath('MarkerBlau.png')
+};
+const defaultIconUrl = filePath('MarkerBlau.png');
-   // 3) JSON laden
+   // JSON laden
    const resp = await fetch(jsonUrl, { credentials: 'same-origin' });
+  if (!resp.ok) throw new Error('SMW JSON nicht erreichbar: ' + resp.status);
    const data = await resp.json();
-   // 4) Karte initialisieren
+   // Leaflet Karte
    const map = L.map('schulkarte');
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ Zeile 28: / Zeile 34: @@
    const bounds = [];
-   // 5) Ergebnisse durchlaufen
+   // Ergebnisse
-   const results = data && data.results ? data.results : {};
+   const results = (data && data.query && data.query.results) ? data.query.results : {};
    for (const key in results) {
      const r = results[key];
      const po = r.printouts || {};
-     const posArr = po.Position || [];
+     const pos = (po.Position && po.Position[0]) ? po.Position[0] : null;
-    const typeArr = po.Schultyp || [];
-     // defensiv: ungültige/fehlende Position überspringen
+     // defensiv: ungültige Position überspringen
-     if (!posArr.length || typeof posArr[0].lat !== 'number' || typeof posArr[0].lon !== 'number') {
+     if (!pos || typeof pos.lat !== 'number' || typeof pos.lon !== 'number') continue;
-      continue;
-    }
-    const lat = posArr[0].lat;
+     const typ = (po.Schultyp && po.Schultyp[0]) ? String(po.Schultyp[0]) : '';
-    const lon = posArr[0].lon;
+    const iconUrl = iconForType[typ] || defaultIconUrl;
-     const typ = (typeArr && typeArr.length) ? String(typeArr[0]) : '';
-    const iconUrl = iconForType[typ] || defaultIconUrl;
      const icon = L.icon({
        iconUrl,
@@ Zeile 55: / Zeile 57: @@
      const url = r.fullurl || ('/wiki/' + encodeURIComponent(title));
-     L.marker([lat, lon], { icon })
+     L.marker([pos.lat, pos.lon], { icon })
        .addTo(map)
        .bindPopup(`<a href="${url}">${title}</a><br><b>Schultyp:</b> ${typ || '-'}`);
-     bounds.push([lat, lon]);
+     bounds.push([pos.lat, pos.lon]);
    }
-   // 6) View setzen
+   // Zoom/Extent
    if (bounds.length) {
      map.fitBounds(bounds, { padding: [20, 20] });
    } else {
-     map.setView([50.94, 6.96], 12); // Fallback (Köln grob)
+     map.setView([50.94, 6.96], 12);
    }
 })();
 </script>

Altes Köln

Widget:SchulkarteLeaflet: Unterschied zwischen den Versionen

Aktuelle Version vom 17. Dezember 2025, 18:44 Uhr