Widget:Leaflet: Unterschied zwischen den Versionen

Version vom 6. Dezember 2025, 23:11 Uhr

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

// Karte var map = L.map('map').setView([50.94, 6.96], 11);

// OSM Layer L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

   maxZoom: 18

}).addTo(map);

// SMW-Daten werden ersetzt:

// Marker erzeugen schoolData.forEach(function(school){

   if(!school.Koordinaten) return;

   var coords = school.Koordinaten.split(',');
   var lat = parseFloat(coords[0]);
   var lon = parseFloat(coords[1]);

   var marker = L.marker([lat, lon])
               .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;
       default:
           layerGrund.addLayer(marker);
   }

});

// Standard-Layer zur Karte hinzufügen layerGrund.addTo(map); layerGym.addTo(map);

// Layer-Kontrolle (Legende) var overlays = {

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

};

L.control.layers(null, overlays, {collapsed:false}).addTo(map);

</script>

@@ Zeile 1: / Zeile 1: @@
-<div id="mapid" style="width: 100%; height: 500px;"></div>
+<!-- Kartencontainer -->
+<div id="map" style="height: 600px; width: 100%;"></div>
+<!-- Leaflet + MarkerCluster CSS -->
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
+<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"/>
+<!-- Leaflet + MarkerCluster JS -->
 <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>
 <script>
-  var map = L.map('mapid').setView([50.94, 6.96], 12);
-  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    maxZoom: 19,
-    attribution: '© OpenStreetMap contributors'
-  }).addTo(map);
-// === SMW ASK Platzhalter (MediaWiki füllt das automatisch) ===
+// Layer-Container
+var layerGrund = L.markerClusterGroup();
+var layerGym = L.markerClusterGroup();
+var layerGes = L.markerClusterGroup();
+var layerBeruf = L.markerClusterGroup();
+var layerFoerder = L.markerClusterGroup();
+// Karte
+var map = L.map('map').setView([50.94, 6.96], 11);
+// OSM Layer
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 18
+}).addTo(map);
+// SMW-Daten werden ersetzt:
 {{#ask:
   [[Kategorie:Schule]]
@@ Zeile 21: / Zeile 38: @@
 }}
+// Marker erzeugen
-// Marker setzen
 schoolData.forEach(function(school){
      if(!school.Koordinaten) return;
@@ Zeile 31: / Zeile 47: @@
      var marker = L.marker([lat, lon])
-        .bindPopup('<strong>' + school.link + '</strong><br>' + school.Schultyp);
+                .bindPopup('<strong>' + school.link + '</strong><br>' + school.Schultyp);
      switch(school.Schultyp){
-         case "Grundschule":      layerGrund.addLayer(marker); break;
+         case "Grundschule":
-         case "Gymnasium":        layerGym.addLayer(marker); break;
+            layerGrund.addLayer(marker);
-         case "Gesamtschule":     layerGes.addLayer(marker); break;
+            break;
-         case "Berufskolleg":     layerBeruf.addLayer(marker); break;
+         case "Gymnasium":
-         case "Förderschule":     layerFoerder.addLayer(marker); break;
+            layerGym.addLayer(marker);
-         default:                 layerGrund.addLayer(marker);
+            break;
+         case "Gesamtschule":
+            layerGes.addLayer(marker);
+            break;
+         case "Berufskolleg":
+            layerBeruf.addLayer(marker);
+            break;
+         case "Förderschule":
+            layerFoerder.addLayer(marker);
+            break;
+         default:
+            layerGrund.addLayer(marker);
      }
 });
-// Default Layer anzeigen
+// Standard-Layer zur Karte hinzufügen
 layerGrund.addTo(map);
 layerGym.addTo(map);
-// Layer Control (Legende)
+// Layer-Kontrolle (Legende)
 var overlays = {
      "Grundschulen": layerGrund,

Altes Köln

Widget:Leaflet: Unterschied zwischen den Versionen

Version vom 6. Dezember 2025, 23:11 Uhr