Widget:Leaflet

<widget> <style>

1. leafmap {

   width: 100%;
   height: 500px;

} </style>

<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> // Helpers function parseCoordinates(c) {

   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>