Widget:Leaflet
Aus Altes Köln
<script id="smw-data" type="application/json"> JSON </script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css"/> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css"/>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
<script> (function(){
// Prüfen, ob Map-DIV vorhanden
if (!document.getElementById('map')) return;
// SMW-JSON einlesen und parsen
var smwRaw = document.getElementById('smw-data').textContent.trim();
var schoolData = [];
try {
// SMW gibt ein JSON-Objekt mit "results" — wir wandeln in ein Array um
var smw = JSON.parse(smwRaw || '{}');
// depending on SMW version, 'results' may hold items as properties
if (smw.results) {
for (var k in smw.results) {
if (!smw.results.hasOwnProperty(k)) continue;
var item = smw.results[k];
// Extrahiere gewünschte Felder (falls MediaWiki/SMW unterschiedliche Struktur hat, anpassen)
schoolData.push({
link: item.fulltext || item.name || k,
Schultyp: (item.printouts && item.printouts.Schultyp) ? item.printouts.Schultyp[0] : (item.Schultyp || ),
Koordinaten: (item.printouts && item.printouts.Koordinaten) ? item.printouts.Koordinaten[0] : (item.Koordinaten || )
});
}
} else if (Array.isArray(smw)) {
// Falls SMW direkt ein Array liefert
schoolData = smw;
}
} catch (e) {
console.error('SMW JSON parse error', e);
}
// Leaflet map
var map = L.map('map').setView([50.94, 6.96], 11);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Cluster-Gruppen var layerGrund = L.markerClusterGroup(); var layerGym = L.markerClusterGroup(); var layerGes = L.markerClusterGroup(); var layerBeruf = L.markerClusterGroup(); var layerFoerder = L.markerClusterGroup();
var bounds = [];
// Helfer: Koordinaten extrahieren (String "lat,lon" oder Objekt)
function extractCoords(coordValue){
if (!coordValue) return null;
if (typeof coordValue === 'string' && coordValue.indexOf(',') !== -1){
var p = coordValue.split(',');
var lat = parseFloat(p[0]), lon = parseFloat(p[1]);
if (!isNaN(lat) && !isNaN(lon)) return [lat, lon];
}
if (typeof coordValue === 'object' && coordValue.lat && coordValue.lon){
var la = parseFloat(coordValue.lat), lo = parseFloat(coordValue.lon);
if (!isNaN(la) && !isNaN(lo)) return [la, lo];
}
return null;
}
// Marker erzeugen
schoolData.forEach(function(school){
if (!school) return;
var coords = extractCoords(school.Koordinaten);
if (!coords) return;
var marker = L.marker(coords)
.bindPopup('' + (school.link || '—') + '
' + (school.Schultyp || ));
switch ((school.Schultyp || ).toString()){
case "Grundschule": layerGrund.addLayer(marker); break;
case "Gymnasium": layerGym.addLayer(marker); break;
case "Gesamtschule": layerGes.addLayer(marker); break;
case "Berufskolleg": layerBeruf.addLayer(marker); break;
case "Förderschule": layerFoerder.addLayer(marker); break;
default: layerGrund.addLayer(marker);
}
bounds.push(coords);
});
// Default-Layer anzeigen layerGrund.addTo(map); layerGym.addTo(map);
// Layer-Control (Legende)
var overlays = {
"Grundschulen": layerGrund,
"Gymnasien": layerGym,
"Gesamtschulen": layerGes,
"Berufskollegs": layerBeruf,
"Förderschulen": layerFoerder
};
L.control.layers(null, overlays, {collapsed:false}).addTo(map);
// Auto-fit bounds if (bounds.length) map.fitBounds(bounds);
})(); </script>
