Widget:Leaflet: Unterschied zwischen den Versionen
Aus Altes Köln
HorstR (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
HorstR (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
<div id="map" style="width:100%; height:600px;"></div> | <div id="map" style="width:100%; height:600px;"></div> | ||
<script id="smw-data" type="application/json"> | <script id="smw-data" type="application/json"> | ||
{{#ask: | {{#ask: | ||
| Zeile 8: | Zeile 6: | ||
|?Koordinaten | |?Koordinaten | ||
|?Schultyp | |?Schultyp | ||
|format=json | |format=json | ||
}} | }} | ||
</script> | </script> | ||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/> | <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.css"/> | ||
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css"/> | <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css"/> | ||
<script> | <script> | ||
(function(){ | (function(){ | ||
var raw = document.getElementById('smw-data').textContent.trim(); | |||
if (! | 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); | var map = L.map('map').setView([50.94, 6.96], 11); | ||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | ||
| Zeile 62: | Zeile 44: | ||
}).addTo(map); | }).addTo(map); | ||
var clusters = { | |||
var | Grundschule: L.markerClusterGroup(), | ||
Gymnasium: L.markerClusterGroup(), | |||
Gesamtschule: L.markerClusterGroup(), | |||
Berufskolleg: L.markerClusterGroup(), | |||
Förderschule: L.markerClusterGroup() | |||
}; | |||
var bounds = []; | var bounds = []; | ||
schoolData.forEach(function(s){ | |||
if (!s.Koordinaten) return; | |||
if (! | 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('<strong>' + s.link + '</strong><br>' + s.Schultyp); | |||
var | |||
var | var layer = clusters[s.Schultyp] || clusters.Grundschule; | ||
layer.addLayer(marker); | |||
bounds.push([lat, lon]); | |||
bounds.push( | |||
}); | }); | ||
// | // add default layers | ||
clusters.Grundschule.addTo(map); | |||
clusters.Gymnasium.addTo(map); | |||
// | // layer control | ||
L.control.layers(null, { | |||
"Grundschulen": | "Grundschulen": clusters.Grundschule, | ||
"Gymnasien": | "Gymnasien": clusters.Gymnasium, | ||
"Gesamtschulen": | "Gesamtschulen": clusters.Gesamtschule, | ||
"Berufskollegs": | "Berufskollegs": clusters.Berufskolleg, | ||
"Förderschulen": | "Förderschulen": clusters.Förderschule | ||
} | }, {collapsed:false}).addTo(map); | ||
if (bounds.length) { | |||
if (bounds.length) map.fitBounds(bounds); | map.fitBounds(bounds); | ||
} | |||
})(); | })(); | ||
</script> | </script> | ||
Version vom 6. Dezember 2025, 23:23 Uhr
<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>
