Vorlage:Schulkarte

<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: '

' + cluster.getChildCount() + '

'

           });
       }
   });

}

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>