Altes Köln

Widget:LeafletSMWMap: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(4 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<div id="smwmap" style="width:100%; height:500px;"></div>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<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 src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
Zeile 6: Zeile 4:
<script>
<script>
(async function () {
(async function () {
   // Pflichtparameter
   const el = document.getElementById('smwmap');
   const jsonUrl = '{{{json}}}';
  if (!el) {
   const posProp  = '{{{position|Position}}}';
    console.log('LeafletSMWMap: #smwmap nicht gefunden');
   const typeProp = '{{{type|Schultyp}}}';
    return;
  }
 
  const ask = el.dataset.query;
   const jsonUrl = '/api.php?action=ask&format=json&query=' + encodeURIComponent(ask);
 
   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';


   // Optionale Parameter
   console.log('jsonUrl=', jsonUrl);
  const iconSpec = '{{{iconMap|}}}';                // "Gymnasium=Marker 13 rot.png;Grundschule=Marker 11 rot.png"
  const defIcon  = '{{{defaultIcon|Marker 11 rot.png}}}';


   // Icon-Mapping "Typ=Dateiname;Typ2=Dateiname2"
   // Icon-Mapping "Typ=Dateiname;Typ2=Dateiname2"
   const iconMap = {};
   const iconMap = {};
   if (iconSpec && iconSpec.trim().length) {
   if (iconSpec.trim().length) {
     iconSpec.split(';').forEach(pair => {
     iconSpec.split(';').forEach(pair => {
       const parts = pair.split('=');
       const parts = pair.split('=');
       if (parts.length >= 2) {
       if (parts.length >= 2) {
         const k = parts[0].trim();
         const k = parts[0].trim();
         const v = parts.slice(1).join('=').trim(); // falls Dateiname '=' enthält
         const v = parts.slice(1).join('=').trim();
         if (k && v) {
         if (k && v) {
           iconMap[k] = '/wiki/Spezial:Dateipfad/' + encodeURIComponent(v);
           iconMap[k] = '/wiki/Spezial:Dateipfad/' + encodeURIComponent(v);
Zeile 31: Zeile 36:
   const defaultIcon = '/wiki/Spezial:Dateipfad/' + encodeURIComponent(defIcon);
   const defaultIcon = '/wiki/Spezial:Dateipfad/' + encodeURIComponent(defIcon);


   // JSON laden (defensiv: erst text, dann parse für bessere Diagnose)
   // JSON laden
   const resp = await fetch(jsonUrl, { credentials: 'same-origin' });
   const resp = await fetch(jsonUrl, { credentials: 'same-origin' });
   if (!resp.ok) {
   if (!resp.ok) throw new Error('SMW JSON nicht erreichbar: ' + resp.status + ' ' + resp.statusText);
    throw new Error('SMW JSON nicht erreichbar: ' + resp.status + ' ' + resp.statusText);
   const data = await resp.json();
  }
 
   const text = await resp.text();
// debug
  let data;
 
  try {
console.log('SMW JSON keys:', Object.keys(data || {}));
    data = JSON.parse(text);
console.log('SMW meta:', data?.query?.meta);
  } catch (e) {
console.log('Results count:', data?.query?.meta?.count, 'Result keys sample:', Object.keys(data?.query?.results || {}).slice(0, 5));
    console.log('JSON-URL:', jsonUrl);
 
    console.log('RAW RESPONSE (erste 500 Zeichen):', text.slice(0, 500));
// Ende debug
    throw e;
  }


  // Leaflet initialisieren
// Leaflet initialisieren (el ist bereits die Map-DIV)
   const map = L.map('smwmap');
   const map = L.map(el);
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 19,
     maxZoom: 19,
Zeile 53: Zeile 56:
   }).addTo(map);
   }).addTo(map);


  const bounds = [];
const bounds = [];
const results = data?.query?.results || {};


   // Ergebnisse (SMW ask API)
for (const key in results) {
   const results = data && data.query && data.query.results ? data.query.results : {};
   const r = results[key];              // r wird hier definiert
   const po = r.printouts || {};         // erst danach benutzen


   for (const key in results) {
   // OPTIONAL: Debug ohne r-vorher-Fehler
    const r = results[key];
  // console.log('Printouts keys:', Object.keys(po));
    const po = r.printouts || {};


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


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


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


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


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


    L.marker([pos.lat, pos.lon], { icon })
  bounds.push([pos.lat, pos.lon]);
      .addTo(map)
}
      .bindPopup(
        `<a href="${url}">${title}</a><br><b>${typeProp}:</b> ${type || '-'}`
      );


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


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

Aktuelle Version vom 17. Dezember 2025, 20:32 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 () {

 const el = document.getElementById('smwmap');
 if (!el) {
   console.log('LeafletSMWMap: #smwmap nicht gefunden');
   return;
 }
 const ask = el.dataset.query;
 const jsonUrl = '/api.php?action=ask&format=json&query=' + encodeURIComponent(ask);
 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 || {};

for (const key in results) {

 const r = results[key];              // r wird hier definiert
 const po = r.printouts || {};         // erst danach benutzen
 // OPTIONAL: Debug ohne r-vorher-Fehler
 // console.log('Printouts keys:', Object.keys(po));
 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.