Widget:SchulkarteLeaflet
Aus Altes Köln
<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>
