Widget:LeafletSMWMap

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

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

console.log('jsonUrl=', jsonUrl); //Debug

 const posProp  = 'Position';
 const typeProp = 'Schultyp';

 // Optionale Parameter
 const iconSpec = ;                 // "Gymnasium=Marker 13 rot.png;Grundschule=Marker 11 rot.png"
 const defIcon  = 'Marker 11 rot.png';

 // Icon-Mapping "Typ=Dateiname;Typ2=Dateiname2"
 const iconMap = {};
 if (iconSpec && 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(); // falls Dateiname '=' enthält
       if (k && v) {
         iconMap[k] = '/wiki/Spezial:Dateipfad/' + encodeURIComponent(v);
       }
     }
   });
 }
 const defaultIcon = '/wiki/Spezial:Dateipfad/' + encodeURIComponent(defIcon);

 // JSON laden (defensiv: erst text, dann parse für bessere Diagnose)
 const resp = await fetch(jsonUrl, { credentials: 'same-origin' });
 if (!resp.ok) {
   throw new Error('SMW JSON nicht erreichbar: ' + resp.status + ' ' + resp.statusText);
 }
 const text = await resp.text();
 let data;
 try {
   data = JSON.parse(text);
 } catch (e) {
   console.log('JSON-URL:', jsonUrl);
   console.log('RAW RESPONSE (erste 500 Zeichen):', text.slice(0, 500));
   throw e;
 }

 // Leaflet initialisieren
 const map = L.map('smwmap');
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   maxZoom: 19,
   attribution: '© OpenStreetMap'
 }).addTo(map);

 const bounds = [];

 // Ergebnisse (SMW ask API)
 const results = data && data.query && data.query.results ? data.query.results : {};

 for (const key in results) {
   const r = results[key];
   const po = r.printouts || {};

   // Position holen (Array mit {lat, lon})
   if (!Array.isArray(po[posProp]) || !po[posProp].length) continue;

   const pos = po[posProp][0];
   if (!pos || typeof pos.lat !== 'number' || typeof pos.lon !== 'number') continue;

   // Typ holen
   const type =
     Array.isArray(po[typeProp]) && po[typeProp].length
       ? String(po[typeProp][0])
       : ;

   // Icon wählen
   const iconUrl = iconMap[type] || defaultIcon;
   const icon = L.icon({
     iconUrl: iconUrl,
     iconSize: [24, 24],
     iconAnchor: [12, 24]
   });

   // Popup
   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>
${typeProp}: ${type || '-'}`
     );

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

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

})(); </script>