Widget:SchulkarteLeaflet

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

 // 1) JSON-Quelle – OHNE mw.*
 const jsonUrl = '/wiki/index.php?title=Schulen/GeoJSON&action=raw';

 // 2) Icon-Zuordnung nach Schultyp
 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"
 };
 const defaultIconUrl = "https://altes-koeln.de/images/0/0c/Marker_11_rot.png";

 // 3) JSON laden
 const resp = await fetch(jsonUrl);
 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) Marker setzen (defensiv!)
 for (const key in data.results) {
   const r = data.results[key];
   const pos = r.printouts.Position?.[0];
   if (!pos || typeof pos.lat !== 'number' || typeof pos.lon !== 'number') {
     continue; // kaputte Datensätze überspringen
   }

   const typ = r.printouts.Schultyp?.[0] || ;
   const iconUrl = iconForType[typ] || defaultIconUrl;

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

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

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

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

})(); </script>

Altes Köln

Widget:SchulkarteLeaflet