Altes Köln

Widget:LeafletSMWMap

Aus Altes Köln
Wechseln zu:Navigation, Suche

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

 // const jsonUrl   = '{{{json}}}';

const ask = ' Die folgende Koordinate wurde nicht erkannt: +.|?Position|?Schultyp|limit=50';//nur testweise const jsonUrl = '/api.php?action=ask&format=json&query=' + encodeURIComponent(ask);//nur testweise


 const posProp   = '{{{position}}}';
 const typeProp  = '{{{type}}}';
 const iconSpec  = '{{{iconMap}}}';
 const defIcon   = '{{{defaultIcon}}}';
 // Icon-Mapping "Typ=Datei.png;Typ2=Datei2.png"
 const iconMap = {};
 iconSpec.split(';').forEach(pair => {
   const [k,v] = pair.split('=');
   if (k && v) {
     iconMap[k.trim()] =
       '/wiki/Spezial:Dateipfad/' + encodeURIComponent(v.trim());
   }
 });
 const defaultIcon =
   '/wiki/Spezial:Dateipfad/' + encodeURIComponent(defIcon);


//temporäres Debugging einschl. const data const resp = await fetch(jsonUrl, { credentials: 'same-origin' }); const text = await resp.text();

console.log('JSON-URL:', jsonUrl); console.log('RAW JSON (erste 500 Zeichen):', text.slice(0, 500));

const data = JSON.parse(text); console.log('PARSED DATA:', data); //Ende temporäres Debugging





 const map = L.map('smwmap');
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
   { maxZoom: 19, attribution: '© OpenStreetMap' }
 ).addTo(map);
 const bounds = [];
 const results = data.query?.results || {};
 for (const key in results) {
   const r   = results[key];
   const pos = r.printouts?.[posProp]?.[0];
   if (!pos || typeof pos.lat !== 'number') continue;
   const type = r.printouts?.[typeProp]?.[0] || ;
   const iconUrl = iconMap[type] || defaultIcon;
   const icon = L.icon({
     iconUrl, iconSize:[24,24], iconAnchor:[12,24]
   });
   L.marker([pos.lat, pos.lon], { icon })
     .addTo(map)
     .bindPopup(
       `<a href="${r.fullurl}">${r.fulltext}</a>
${type}` );
   bounds.push([pos.lat, pos.lon]);
 }
 bounds.length ? map.fitBounds(bounds,{padding:[20,20]})
               : map.setView([50.94,6.96],12);

})(); </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.