Widget:Leaflet
Aus Altes Köln
<script id="smw-data" type="application/json">
[
{
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
, {
"name": "", "type": "Unbekannt", "coords": ""
}
]
</script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/> <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<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.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
<script> (function(){
// JSON aus Scriptblock holen
var raw = document.getElementById('smw-data').textContent.trim();
// Debug: zeige den rohen SMW-Output auf der Seite
document.getElementById('debug').textContent = raw;
// JSON sicher parsen
var schoolData = [];
try {
schoolData = JSON.parse(raw);
} catch(e) {
console.error("Fehler beim Parsen der SMW Daten:", e, raw);
return;
}
// Karte erstellen
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 clusters = {
Grundschule: L.markerClusterGroup(),
Gymnasium: L.markerClusterGroup(),
Gesamtschule: L.markerClusterGroup(),
Berufskolleg: L.markerClusterGroup(),
Förderschule: L.markerClusterGroup(),
Unbekannt: L.markerClusterGroup()
};
var bounds = [];
// Marker erzeugen
schoolData.forEach(function(s){
if (!s.coords) return;
var parts = s.coords.split(',');
if (parts.length !== 2) return;
var lat = parseFloat(parts[0]);
var lon = parseFloat(parts[1]);
if (isNaN(lat) || isNaN(lon)) return;
var type = s.type || "Unbekannt";
var marker = L.marker([lat, lon])
.bindPopup('' + s.name + '
' + type);
var group = clusters[type] || clusters.Unbekannt;
group.addLayer(marker);
bounds.push([lat, lon]); });
// Alle Cluster zur Karte hinzufügen
Object.values(clusters).forEach(function(g){
map.addLayer(g);
});
// Layer-Steuerung
L.control.layers(null, {
"Grundschulen": clusters.Grundschule,
"Gymnasien": clusters.Gymnasium,
"Gesamtschulen": clusters.Gesamtschule,
"Berufskollegs": clusters.Berufskolleg,
"Förderschulen": clusters.Förderschule,
"Sonstige": clusters.Unbekannt
}, {collapsed:false}).addTo(map);
// Kartenausschnitt automatisch anpassen
if (bounds.length) {
map.fitBounds(bounds);
}
})(); </script>