Widget:LeafletSMWMap: Unterschied zwischen den Versionen
Aus Altes Köln
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| (4 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
<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 () { | ||
const el = document.getElementById('smwmap'); | |||
const jsonUrl | if (!el) { | ||
const posProp = | console.log('LeafletSMWMap: #smwmap nicht gefunden'); | ||
const typeProp = | 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" | // Icon-Mapping "Typ=Dateiname;Typ2=Dateiname2" | ||
const iconMap = {}; | const iconMap = {}; | ||
if ( | 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(); | 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 | // 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); | ||
const data = await resp.json(); | |||
const | // 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( | 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 results = data?.query?.results || {}; | |||
// | for (const key in results) { | ||
const | 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><br><b>${typeProp}:</b> ${typ || '-'}`); | |||
bounds.push([pos.lat, pos.lon]); | |||
} | |||
if (bounds.length) map.fitBounds(bounds, { padding: [20, 20] }); | |||
if (bounds.length) | else 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>
