Widget:Schulkarte - Versionsgeschichte

HorstR: Die Seite wurde neu angelegt: „ Dies ist ein Widget für die Schulkarte.

2025-12-06T17:11:55Z

Die Seite wurde neu angelegt: „<noinclude> Dies ist ein Widget für die Schulkarte. </noinclude> <div id="map" style="height: 600px;"></div> <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" /> <li…“

Neue Seite
<noinclude>
Dies ist ein Widget für die Schulkarte.
</noinclude>

<div id="map" style="height: 600px;"></div>

<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: '<div style="background:'+color+';color:white;border-radius:20px;padding:5px 10px;">' +
cluster.getChildCount() + '</div>'
});
}
});
}

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:
{{#ask:
[[Kategorie:Schule]]
|?Koordinaten
|?Schultyp
|?Has page=link
|format=array
|name=schoolData
}}

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('<strong>' + school.link + '</strong><br>' + 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 += "<b>Schultypen</b><br>";
div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png' width='18'> Grundschule<br>";
div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png' width='18'> Gymnasium<br>";
div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png' width='18'> Gesamtschule<br>";
div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-violet.png' width='18'> Berufskolleg<br>";
div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png' width='18'> Förderschule<br>";

return div;
};
legend.addTo(map);

</script>