Altes Köln

Widget:SchulkarteLeaflet

Aus Altes Köln
Version vom 17. Dezember 2025, 17:18 Uhr von Christopher (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „<div id="schulkarte" style="width:100%; height:500px;"></div> <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}}";…“)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu:Navigation, Suche

<script> (async function () {

 // 1) Konfiguration: JSON-Quelle und Icon-Mapping
 const jsonUrl = mw.util.wikiScript('index') + '?title=Schulen/GeoJSON&action=raw';
 const iconForType = {
   "Gymnasium": "https://altes-koeln.de/images/6/65/Marker_13_rot.png",
   "Grundschule": "https://altes-koeln.de/images/0/0c/Marker_11_rot.png"
   // weitere Typen hier ergänzen
 };
 const defaultIconUrl = "https://altes-koeln.de/images/0/0c/Marker_11_rot.png";
 // 2) Leaflet sicher laden (MediaWiki ResourceLoader)
 await mw.loader.using(['ext.leaflet']);
 // 3) JSON laden
 const resp = await fetch(jsonUrl, { credentials: 'same-origin' });
 const data = await resp.json();
 // 4) Karte initialisieren
 const map = L.map('schulkarte');
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   maxZoom: 19,
   attribution: '© OpenStreetMap'
 }).addTo(map);
 const bounds = [];
 // 5) Ergebnisse durchlaufen
 const results = data && data.results ? data.results : {};
 for (const key in results) {
   const r = results[key];
   const po = r.printouts || {};
   const posArr = po.Position || [];
   const typeArr = po.Schultyp || [];
   // defensiv: ungültige/fehlende Position überspringen
   if (!posArr.length || typeof posArr[0].lat !== 'number' || typeof posArr[0].lon !== 'number') {
     continue;
   }
   const lat = posArr[0].lat;
   const lon = posArr[0].lon;
   const typ = (typeArr && typeArr.length) ? String(typeArr[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([lat, lon], { icon })
     .addTo(map)
     .bindPopup(`<a href="${url}">${title}</a>
Schultyp: ${typ || '-'}`);
   bounds.push([lat, lon]);
 }
 // 6) View setzen
 if (bounds.length) {
   map.fitBounds(bounds, { padding: [20, 20] });
 } else {
   map.setView([50.94, 6.96], 12); // Fallback (Köln grob)
 }

})(); </script>

Cookies helfen uns bei der Bereitstellung von Altes Köln. Durch die Nutzung von Altes Köln erklärst du dich damit einverstanden, dass wir Cookies speichern.