Widget:Schulkarte
Dies ist ein Widget für die Schulkarte.
<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/dist/leaflet.markercluster.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
<script>
// === ICONSETS =======================================
var iconGrund = new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34]
});
var iconGym = new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34]
});
var iconGes = new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34]
});
var iconBeruf = new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-violet.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34]
});
var iconFoerder = new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34]
});
// === CLUSTER COLORS =================================
function clusterColor(color){
return new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
return new L.DivIcon({
html: '
'
});
}
});
}
var clusterGrund = clusterColor('#32CD32'); var clusterGym = clusterColor('#1E90FF'); var clusterGes = clusterColor('#FF8C00'); var clusterBeruf = clusterColor('#9400D3'); var clusterFoerder = clusterColor('#DC143C');
// === 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
}).addTo(map);
// === SMW COORD PARSER ===============================
function extractCoords(coordValue) {
if (!coordValue) return null;
if (typeof coordValue === "string") {
let parts = coordValue.split(',');
if (parts.length === 2) {
return [parseFloat(parts[0]), parseFloat(parts[1])];
}
}
if (typeof coordValue === "object" && coordValue.lat && coordValue.lon) {
return [parseFloat(coordValue.lat), parseFloat(coordValue.lon)];
}
return null;
}
// === Marker Import via SMW ==========================
// Wird durch SMW ersetzt:
var bounds = [];
schoolData.forEach(function(school){
var coords = extractCoords(school.Koordinaten); if(!coords) return;
// choose icon
var icon = iconGrund;
switch(school.Schultyp){
case "Grundschule": icon = iconGrund; break;
case "Gymnasium": icon = iconGym; break;
case "Gesamtschule": icon = iconGes; break;
case "Berufskolleg": icon = iconBeruf; break;
case "Förderschule": icon = iconFoerder; break;
}
var marker = L.marker(coords, {icon: icon})
.bindPopup('' + school.link + '
' + school.Schultyp);
switch(school.Schultyp){
case "Grundschule": clusterGrund.addLayer(marker); break;
case "Gymnasium": clusterGym.addLayer(marker); break;
case "Gesamtschule": clusterGes.addLayer(marker); break;
case "Berufskolleg": clusterBeruf.addLayer(marker); break;
case "Förderschule": clusterFoerder.addLayer(marker); break;
default: clusterGrund.addLayer(marker);
}
bounds.push(coords);
});
// Standard sichtbar: clusterGrund.addTo(map); clusterGym.addTo(map);
// Layer Control L.control.layers(null, {
"Grundschulen": clusterGrund, "Gymnasien": clusterGym, "Gesamtschulen": clusterGes, "Berufskollegs": clusterBeruf, "Förderschulen": clusterFoerder
}, {collapsed:false}).addTo(map);
// === AUTO FIT ======================================= if(bounds.length > 0){
map.fitBounds(bounds);
}
// === LEGENDE ========================================
var legend = L.control({ position: 'bottomright' });
legend.onAdd = function () {
var div = L.DomUtil.create('div', 'info legend');
div.style.background = 'white';
div.style.padding = '10px';
div.style.borderRadius = '6px';
div.style.boxShadow = '0 0 6px rgba(0,0,0,0.3)';
div.style.fontSize = "13px";
div.innerHTML += "Schultypen
"; div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png' width='18'> Grundschule
"; div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png' width='18'> Gymnasium
"; div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png' width='18'> Gesamtschule
"; div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-violet.png' width='18'> Berufskolleg
"; div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png' width='18'> Förderschule
";
return div;
}; legend.addTo(map);
</script>