Altes Köln

Widget:SchulkarteLeaflet: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
(Neu ohne mw. Komponenten)
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<div id="schulkarte" style="width:100%; height:500px;"></div>
<div id="schulkarte" style="width:100%; height:500px;"></div>


<link
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  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 src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>


Zeile 10: Zeile 7:
(async function () {
(async function () {


   // 1) JSON-Quelle – OHNE mw.*
   // SMW-API (bei Ihnen ohne /wiki/)
   const jsonUrl = '/wiki/index.php?title=Schulen/GeoJSON&action=raw';
  const ask = '[[Kategorie:Schule]] [[Position::+]]|?Position|?Schultyp|limit=5000';
   const jsonUrl = '/api.php?action=ask&format=json&query=' + encodeURIComponent(ask);


   // 2) Icon-Zuordnung nach Schultyp
   // Icons 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 ergänzen
   };
   };
   const defaultIconUrl = "{{filepath:Marker 11 rot.png}}";
   const defaultIconUrl = "{{filepath:Marker 11 rot.png}}";


   // 3) JSON laden
   // JSON laden
   const resp = await fetch(jsonUrl);
   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();
   const data = await resp.json();


   // 4) Karte initialisieren
   // Leaflet Karte
   const map = L.map('schulkarte');
   const map = L.map('schulkarte');
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
Zeile 33: Zeile 33:
   const bounds = [];
   const bounds = [];


   // 5) Marker setzen (defensiv!)
   // Ergebnisse
   for (const key in data.results) {
   const results = (data && data.query && data.query.results) ? data.query.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] || '';
  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 iconUrl = iconForType[typ] || defaultIconUrl;


Zeile 50: Zeile 53:
     });
     });


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


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


   // 6) Zoom setzen
   // Zoom/Extent
   if (bounds.length) {
   if (bounds.length) {
     map.fitBounds(bounds, { padding: [20, 20] });
     map.fitBounds(bounds, { padding: [20, 20] });

Version vom 17. Dezember 2025, 18:34 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 () { 

 // 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 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 ergänzen
 };
 const defaultIconUrl = "https://altes-koeln.de/images/0/0c/Marker_11_rot.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>

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