Schulkarte-Test
Aus Altes Köln
JSON-Test:
{{#ask:
[[Kategorie:Schule]]
|?Schule
|?Schultyp
|?Position
}}
<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": ""
}
]
</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> <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.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> (function(){
var raw = document.getElementById('smw-data').textContent.trim();
if (!raw) { console.error('Keine Daten gefunden'); return; }
var schoolData;
try {
schoolData = JSON.parse(raw);
} catch(e) {
console.error('JSON Parse Fehler:', e);
return;
}
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);
var clusters = {
"Gymnasium": L.markerClusterGroup(),
"Volksschule": L.markerClusterGroup(),
"Förderschule": L.markerClusterGroup(),
"Gesamtschule": L.markerClusterGroup()
};
var icons = {
"Gymnasium": "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png",
"Volksschule": "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png",
"Förderschule": "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png",
"Gesamtschule": "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-orange.png"
};
var bounds = [];
schoolData.forEach(function(s){
if (!s.coords) return;
var parts = s.coords.split(',');
if (parts.length !== 2) return;
var lat = parseFloat(parts[0]), lon = parseFloat(parts[1]);
if (isNaN(lat) || isNaN(lon)) return;
var iconUrl = icons[s.type] || icons["Gymnasium"];
var markerIcon = new L.Icon({
iconUrl: iconUrl,
shadowUrl: 'https://unpkg.com/leaflet@1.9.3/dist/images/marker-shadow.png',
iconSize: [25,41],
iconAnchor: [12,41],
popupAnchor: [1,-34],
shadowSize: [41,41]
});
var marker = L.marker([lat, lon], {icon: markerIcon})
.bindPopup('' + s.name + '
' + s.type);
var layer = clusters[s.type] || clusters["Gymnasium"];
layer.addLayer(marker);
bounds.push([lat, lon]); });
for (var key in clusters) {
clusters[key].addTo(map);
}
L.control.layers(null, {
"Gymnasien": clusters["Gymnasium"],
"Volksschulen": clusters["Volksschule"],
"Förderschulen": clusters["Förderschule"],
"Gesamtschulen": clusters["Gesamtschule"]
}, {collapsed:false}).addTo(map);
if (bounds.length) map.fitBounds(bounds);
})(); </script>