Widget:Leaflet: Unterschied zwischen den Versionen

Version vom 8. Dezember 2025, 00:16 Uhr

leafmap {

   width: 100%;
   height: 500px;

} </style>

   if (!c) return null;
   let parts = c.split(",");
   if (parts.length !== 2) return null;
   return {
       lat: parseFloat(parts[0].trim()),
       lng: parseFloat(parts[1].trim())
   };

}

function loadSMWData() {

   let el = document.getElementById("smw-data");
   if (!el) {
       console.warn("⚠ Kein smw-data Element gefunden.");
       return [];
   }
   try {
       return JSON.parse(el.textContent);
   } catch (e) {
       console.error("JSON-Fehler:", e);
       return [];
   }

}

// Initialisierung Leaflet const map = L.map('leafmap').setView([50.94, 6.95], 12); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

   attribution: '© OSM'

}).addTo(map);

let data = loadSMWData();

data.forEach(entry => {

   const pos = parseCoordinates(entry.coords);
   if (pos) {
       L.marker([pos.lat, pos.lng])
           .addTo(map)
           .bindPopup(entry.name || "(keine Bezeichnung)");
   }

}); </script> </widget>

@@ Zeile 1: / Zeile 1: @@
-<map id="map" style="width:100%; height:600px;"></map>
+<widget>
-<div id="log" style="display:none;"></div>
+<!-- CSS für Karte -->
+<style>
+#leafmap {
+    width: 100%;
+    height: 500px;
+}
+</style>
+<div id="leafmap"></div>
+<!-- Leaflet laden -->
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 <script>
-(function(){
+// Helpers
+function parseCoordinates(c) {
-     function debug(msg) {
+     if (!c) return null;
-        var dbg=document.getElementById("debug");
+    let parts = c.split(",");
-        if(dbg) dbg.textContent += "\n" + msg;
+    if (parts.length !== 2) return null;
-     }
+     return {
+        lat: parseFloat(parts[0].trim()),
+        lng: parseFloat(parts[1].trim())
+    };
+}
-     var rawEl = document.getElementById("smw-data");
+function loadSMWData() {
-     if (!rawEl) {
+     let el = document.getElementById("smw-data");
-         debug("FEHLER: smw-data nicht gefunden!");
+     if (!el) {
-         return;
+         console.warn("⚠ Kein smw-data Element gefunden.");
+         return [];
      }
-    var raw = rawEl.textContent.trim();
-    debug("ROHDATEN:\n" + raw);
-    var schools=[];
      try {
-         schools = JSON.parse(raw);
+         return JSON.parse(el.textContent);
-        debug("JSON erfolgreich geparst ("+schools.length+" Einträge)");
+     } catch (e) {
-     } catch(e) {
+         console.error("JSON-Fehler:", e);
-         debug("JSON PARSE FEHLER: "+e);
+         return [];
-         return;
      }
+}
-    var map = L.map("map").setView([50.94, 6.97], 12);
+// Initialisierung Leaflet
-    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+const map = L.map('leafmap').setView([50.94, 6.95], 12);
-        maxZoom:19
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    }).addTo(map);
+    attribution: '&copy; OSM'
+}).addTo(map);
-    var markerGroup = L.markerClusterGroup();
+let data = loadSMWData();
-    schools.forEach(function(s){
+data.forEach(entry => {
-        if(!s.coords) return;
+    const pos = parseCoordinates(entry.coords);
-        var parts=s.coords.split(",");
+    if (pos) {
-        if(parts.length !== 2) return;
+         L.marker([pos.lat, pos.lng])
+            .addTo(map)
-        var lat=parseFloat(parts[0]);
+             .bindPopup(entry.name || "(keine Bezeichnung)");
-        var lon=parseFloat(parts[1]);
+     }
-        if(isNaN(lat)||isNaN(lon)) return;
+});
-         var marker=L.marker([lat,lon]).bindPopup(
-             "<b>"+(s.name||"Unbekannt")+"</b><br>"+
-            (s.type||"")
-        );
-        markerGroup.addLayer(marker);
-     });
-    map.addLayer(markerGroup);
-})();
 </script>
+</widget>

Altes Köln

Widget:Leaflet: Unterschied zwischen den Versionen

Version vom 8. Dezember 2025, 00:16 Uhr