From 418651a2afe9768cf557cf1c21b92ec5e8ee1cfb Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 19 Aug 2025 14:34:50 +0200 Subject: [PATCH] Fix: Leaflet "Map container is already initialized" error is now handled gracefully MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 | 2 +- .env.production | 2 +- package-lock.json | 4 +- package.json | 2 +- public/config.json | 8 ++++ utils/initializeMap.js | 90 ++++++++++++++++++++++++++++++++++-------- 6 files changed, 86 insertions(+), 22 deletions(-) create mode 100644 public/config.json diff --git a/.env.development b/.env.development index d454e34a6..c8d104722 100644 --- a/.env.development +++ b/.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 diff --git a/.env.production b/.env.production index c3b7b9f7c..b33d0bf1f 100644 --- a/.env.production +++ b/.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 diff --git a/package-lock.json b/package-lock.json index 74e26d293..e5ee47d84 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 0e8f2644a..2ce67ca77 100644 --- a/package.json +++ b/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", diff --git a/public/config.json b/public/config.json new file mode 100644 index 000000000..8f4b28924 --- /dev/null +++ b/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" +} diff --git a/utils/initializeMap.js b/utils/initializeMap.js index aecdbec2c..3c13584a4 100644 --- a/utils/initializeMap.js +++ b/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();