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

 const jsonUrl   = '{{{json}}}';
 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);

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

 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>