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 el = document.getElementById('smwmap');
 if (!el) {
   console.log('LeafletSMWMap: #smwmap nicht gefunden');
   return;
 }
 const jsonUrl  = el.dataset.json;
 const posProp  = el.dataset.position || 'Position';
 const typeProp = el.dataset.type || 'Schultyp';
 const iconSpec = el.dataset.iconmap || ;
 const defIcon  = el.dataset.defaulticon || 'Marker 11 rot.png';
 console.log('jsonUrl=', jsonUrl);
 // Icon-Mapping "Typ=Dateiname;Typ2=Dateiname2"
 const iconMap = {};
 if (iconSpec.trim().length) {
   iconSpec.split(';').forEach(pair => {
     const parts = pair.split('=');
     if (parts.length >= 2) {
       const k = parts[0].trim();
       const v = parts.slice(1).join('=').trim();
       if (k && v) {
         iconMap[k] = '/wiki/Spezial:Dateipfad/' + encodeURIComponent(v);
       }
     }
   });
 }
 const defaultIcon = '/wiki/Spezial:Dateipfad/' + encodeURIComponent(defIcon);
 // JSON laden
 const resp = await fetch(jsonUrl, { credentials: 'same-origin' });
 if (!resp.ok) throw new Error('SMW JSON nicht erreichbar: ' + resp.status + ' ' + resp.statusText);
 const data = await resp.json();

//debug console.log('SMW JSON keys:', Object.keys(data || {})); console.log('SMW meta:', data?.query?.meta); console.log('Results count:', data?.query?.meta?.count, 'Result keys sample:', Object.keys(data?.query?.results || {}).slice(0, 5)); //Ende debug



 // Leaflet initialisieren (el ist bereits die Map-DIV)
 const map = L.map(el);
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   maxZoom: 19,
   attribution: '© OpenStreetMap'
 }).addTo(map);
 const bounds = [];
 const results = data?.query?.results || {};

//debug const firstKey = Object.keys(results)[0]; console.log('First result key:', firstKey); console.log('First result printouts keys:', firstKey ? Object.keys(results[firstKey].printouts || {}) : 'n/a'); //Ende debug


 for (const key in results) {

//Debug console.log('Row:', r.fulltext, 'posProp=', posProp, 'posArr=', (po[posProp] || null)); //Ende Debug


   const r = results[key];
   const po = r.printouts || {};
   const posArr = po[posProp] || [];
   if (!Array.isArray(posArr) || !posArr.length) continue;
   const pos = posArr[0];
   if (!pos || typeof pos.lat !== 'number' || typeof pos.lon !== 'number') continue;
   const typeArr = po[typeProp] || [];
   const typ = (Array.isArray(typeArr) && typeArr.length) ? String(typeArr[0]) : ;
   const iconUrl = iconMap[typ] || 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>
${typeProp}: ${typ || '-'}`);
   bounds.push([pos.lat, pos.lon]);
 }
 if (bounds.length) map.fitBounds(bounds, { padding: [20, 20] });
 else 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.