Altes Köln

Widget:SchulkarteLeaflet: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
(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}}";…“)
 
(Neu ohne mw. Komponenten)
Zeile 1: Zeile 1:
<div id="schulkarte" style="width:100%; height:500px;"></div>
<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>
<script>
(async function () {
(async function () {
   // 1) Konfiguration: JSON-Quelle und Icon-Mapping
 
   const jsonUrl = mw.util.wikiScript('index') + '?title=Schulen/GeoJSON&action=raw';
   // 1) JSON-Quelle – OHNE mw.*
   const jsonUrl = '/wiki/index.php?title=Schulen/GeoJSON&action=raw';
 
  // 2) Icon-Zuordnung nach Schultyp
   const iconForType = {
   const iconForType = {
     "Gymnasium": "{{filepath:Marker 13 rot.png}}",
     "Gymnasium": "{{filepath:Marker 13 rot.png}}",
     "Grundschule": "{{filepath:Marker 11 rot.png}}"
     "Grundschule": "{{filepath:Marker 11 rot.png}}"
    // weitere Typen hier ergänzen
   };
   };
   const defaultIconUrl = "{{filepath:Marker 11 rot.png}}";
   const defaultIconUrl = "{{filepath:Marker 11 rot.png}}";
  // 2) Leaflet sicher laden (MediaWiki ResourceLoader)
  await mw.loader.using(['ext.leaflet']);


   // 3) JSON laden
   // 3) JSON laden
   const resp = await fetch(jsonUrl, { credentials: 'same-origin' });
   const resp = await fetch(jsonUrl);
   const data = await resp.json();
   const data = await resp.json();


Zeile 28: Zeile 33:
   const bounds = [];
   const bounds = [];


   // 5) Ergebnisse durchlaufen
   // 5) Marker setzen (defensiv!)
  const results = data && data.results ? data.results : {};
   for (const key in data.results) {
   for (const key in results) {
     const r = data.results[key];
     const r = results[key];
     const pos = r.printouts.Position?.[0];
     const po = r.printouts || {};
     if (!pos || typeof pos.lat !== 'number' || typeof pos.lon !== 'number') {
    const posArr = po.Position || [];
       continue; // kaputte Datensätze überspringen
    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 typ = r.printouts.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({
     const icon = L.icon({
       iconUrl,
       iconUrl,
Zeile 52: Zeile 50:
     });
     });


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


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


   // 6) View setzen
   // 6) Zoom setzen
   if (bounds.length) {
   if (bounds.length) {
     map.fitBounds(bounds, { padding: [20, 20] });
     map.fitBounds(bounds, { padding: [20, 20] });
   } else {
   } else {
     map.setView([50.94, 6.96], 12); // Fallback (Köln grob)
     map.setView([50.94, 6.96], 12);
   }
   }
})();
})();
</script>
</script>

Version vom 17. Dezember 2025, 17:28 Uhr

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

Abgerufen von „https://altes-koeln.de/index.php?title=Widget:SchulkarteLeaflet&oldid=90178“
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.