Widget:Leaflet

<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);
 }

})();

// SMW Marker Loader var schoolData = [];

// Marker-Layer var layerGrund = L.markerClusterGroup(); var layerGym = L.markerClusterGroup(); var layerGes = L.markerClusterGroup(); var layerBeruf = L.markerClusterGroup(); var layerFoerder = L.markerClusterGroup();

schoolData.forEach(function(school){

   if(!school.Koordinaten) return;

   var coords = school.Koordinaten.split(',');
   var marker = L.marker([parseFloat(coords[0]), parseFloat(coords[1])])
       .bindPopup('' + school.link + '
' + school.Schultyp);

   switch(school.Schultyp){
       case "Grundschule":
           layerGrund.addLayer(marker);
           break;
       case "Gymnasium":
           layerGym.addLayer(marker);
           break;
       case "Gesamtschule":
           layerGes.addLayer(marker);
           break;
       case "Berufskolleg":
           layerBeruf.addLayer(marker);
           break;
       case "Förderschule":
           layerFoerder.addLayer(marker);
           break;
   }

});

// Layer hinzufügen layerGrund.addTo(map); layerGym.addTo(map); layerGes.addTo(map); layerBeruf.addTo(map); layerFoerder.addTo(map);

// Layer Control L.control.layers(null, {

   "Grundschulen": layerGrund,
   "Gymnasien": layerGym,
   "Gesamtschulen": layerGes,
   "Berufskollegs": layerBeruf,
   "Förderschulen": layerFoerder

}, {collapsed:false}).addTo(map);

</script>