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"/> <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) return;
var data = JSON.parse(raw);
var schoolData = [];
if (data.results) {
for (var key in data.results) {
if (!data.results.hasOwnProperty(key)) continue;
var rec = data.results[key];
var po = rec.printouts || {};
var coords = (po.Koordinaten && po.Koordinaten[0]) ? po.Koordinaten[0] : null;
var typ = (po.Schultyp && po.Schultyp[0]) ? po.Schultyp[0] : ;
schoolData.push({
link: rec.fulltext || key,
Schultyp: typ,
Koordinaten: coords
});
}
}
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 = {
Grundschule: L.markerClusterGroup(),
Gymnasium: L.markerClusterGroup(),
Gesamtschule: L.markerClusterGroup(),
Berufskolleg: L.markerClusterGroup(),
Förderschule: L.markerClusterGroup()
};
var bounds = [];
schoolData.forEach(function(s){
if (!s.Koordinaten) return;
var parts = s.Koordinaten.split(',');
if (parts.length !== 2) return;
var lat = parseFloat(parts[0]), lon = parseFloat(parts[1]);
if (isNaN(lat) || isNaN(lon)) return;
var marker = L.marker([lat, lon])
.bindPopup('' + s.link + '
' + s.Schultyp);
var layer = clusters[s.Schultyp] || clusters.Grundschule; layer.addLayer(marker);
bounds.push([lat, lon]); });
// add default layers clusters.Grundschule.addTo(map); clusters.Gymnasium.addTo(map);
// layer control
L.control.layers(null, {
"Grundschulen": clusters.Grundschule,
"Gymnasien": clusters.Gymnasium,
"Gesamtschulen": clusters.Gesamtschule,
"Berufskollegs": clusters.Berufskolleg,
"Förderschulen": clusters.Förderschule
}, {collapsed:false}).addTo(map);
if (bounds.length) {
map.fitBounds(bounds);
}
})(); </script>
