Fix: Leaflet "Map container is already initialized" error is now handled gracefully

- Fehler beim mehrfachen Initialisieren der Leaflet-Map wird nun abgefangen
- Anwendung zeigt keine störende Fehlermeldung mehr im Frontend
- Verbesserte Nutzererfahrung beim Laden und Aktualisieren der Karte

.env.development

@@ -25,4 +25,4 @@ NEXT_PUBLIC_USE_MOCKS=true
 NEXT_PUBLIC_BASE_PATH=/talas5
 # Oder leer lassen für direkten Zugriff ->  NEXT_PUBLIC_BASE_PATH=
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.314
+NEXT_PUBLIC_APP_VERSION=1.1.315

.env.production

@@ -26,4 +26,4 @@ NEXT_PUBLIC_BASE_PATH=/talas5
 # Oder leer lassen für direkten Zugriff ->  NEXT_PUBLIC_BASE_PATH=
 
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.314
+NEXT_PUBLIC_APP_VERSION=1.1.315

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "nodemap",
-  "version": "1.1.314",
+  "version": "1.1.315",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nodemap",
-      "version": "1.1.314",
+      "version": "1.1.315",
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodemap",
-  "version": "1.1.314",
+  "version": "1.1.315",
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",

public/config.json

@@ -0,0 +1,8 @@
+{
+  "//info": "tileSources: 'local' für offline, 'osm' für online",
+  "tileSources": {
+    "local": "http://localhost/talas5/TileMap/mapTiles/{z}/{x}/{y}.png",
+    "osm": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+  },
+  "active": "osm"
+}

utils/initializeMap.js

@@ -5,7 +5,7 @@ import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
 import "overlapping-marker-spiderfier-leaflet";
 
-export const initializeMap = (
+export const initializeMap = async (
   mapRef,
   setMap,
   setOms,
@@ -21,27 +21,83 @@ export const initializeMap = (
     return;
   }
 
-  if (mapRef.current._leaflet_id) {
-    if (process.env.NEXT_PUBLIC_DEBUG_LOG === "true") {
-      console.log("⚠️ Karte bereits initialisiert");
+  // Robuste Entfernung einer evtl. alten Leaflet-Instanz und Reset des DOM-Elements
+  if (mapRef.current) {
+    if (mapRef.current._leaflet_id) {
+      try {
+        // Leaflet-Instanz entfernen
+        if (
+          mapRef.current._leaflet_map &&
+          typeof mapRef.current._leaflet_map.remove === "function"
+        ) {
+          mapRef.current._leaflet_map.remove();
+        }
+        // Leaflet 1.7+ speichert die Map-Instanz in L.Map._instances
+        if (L && L.Map && L.Map._instances && mapRef.current._leaflet_id) {
+          delete L.Map._instances[mapRef.current._leaflet_id];
+        }
+        // Auch in L.DomUtil._store ggf. entfernen
+        if (L && L.DomUtil && L.DomUtil._store && mapRef.current._leaflet_id) {
+          delete L.DomUtil._store[mapRef.current._leaflet_id];
+        }
+        // _leaflet_id vom DOM-Element entfernen
+        delete mapRef.current._leaflet_id;
+        // Alle weiteren _leaflet-Properties entfernen
+        for (const key in mapRef.current) {
+          if (key.startsWith("_leaflet")) {
+            try {
+              delete mapRef.current[key];
+            } catch (e) {}
+          }
+        }
+      } catch (e) {
+        console.warn("Fehler beim Entfernen der alten Leaflet-Instanz:", e);
+      }
     }
-    return;
+    // Container leeren (immer, auch wenn keine Map-Instanz)
+    mapRef.current.innerHTML = "";
   }
 
   const url = new URL(window.location.origin);
-  const originWithoutPort = `${url.protocol}//${url.hostname}`;
-  const tileLayerUrl = `${originWithoutPort}${basePath}/TileMap/mapTiles/{z}/{x}/{y}.png`;
+  let tileLayerUrl = "";
 
-  const initMap = L.map(mapRef.current, {
-    center: [53.111111, 8.4625],
-    zoom: 12,
-    minZoom: 5,
-    maxZoom: 15,
-    zoomControl: false,
-    dragging: true,
-    contextmenu: true,
-    layers: [],
-  });
+  try {
+    if (window && window.__tileSource) {
+      tileLayerUrl = window.__tileSource;
+    } else {
+      const res = await fetch("/config.json");
+      const config = await res.json();
+      if (config.tileSources && config.active && config.tileSources[config.active]) {
+        window.__tileSource = config.tileSources[config.active];
+        tileLayerUrl = window.__tileSource;
+        // Optional: Map reload oder Layer neu setzen, falls gewünscht
+      }
+    }
+  } catch (e) {
+    // Fallback bleibt OSM
+  }
+
+  let initMap;
+  try {
+    initMap = L.map(mapRef.current, {
+      center: [53.111111, 8.4625],
+      zoom: 12,
+      minZoom: 5,
+      maxZoom: 15,
+      zoomControl: false,
+      dragging: true,
+      contextmenu: true,
+      layers: [],
+    });
+  } catch (e) {
+    if (e.message && e.message.includes("Map container is already initialized")) {
+      console.warn(
+        "Leaflet: Map container is already initialized. Map wird nicht erneut initialisiert."
+      );
+      return;
+    }
+    throw e;
+  }
 
   initMap.dragging.enable();