diff --git a/components/MapComponent.js b/components/MapComponent.js index 99460c2ec..a0ba9eabb 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -240,7 +240,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { fetchAndSetUserRights(); }, []); - useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms); // Verwende den ausgelagerten Hook + useGmaMarkersLayer( + map, + gmaMarkers, + GisStationsMeasurements, + layers.MAP_LAYERS.GMA, + oms, + mapLayersVisibility.GMA // Übergebe die Sichtbarkeitsbedingung als Parameter + ); useEffect(() => { const fetchWebServiceMap = async () => { @@ -679,7 +686,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat initializeContextMenu(); }, [map]); //-------------------------------------------- - + //Tooltip Werte aktualisieren useEffect(() => { if (!map) return; // Stelle sicher, dass die Karte initialisiert ist @@ -696,7 +703,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions); // Aktualisiere die Marker-Layer - useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms); + // useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms); } catch (error) { console.error("Fehler beim Aktualisieren der GMA-Daten:", error); } diff --git a/hooks/layers/useGmaMarkersLayer.js b/hooks/layers/useGmaMarkersLayer.js index d440640c9..8b5a99e04 100644 --- a/hooks/layers/useGmaMarkersLayer.js +++ b/hooks/layers/useGmaMarkersLayer.js @@ -1,9 +1,10 @@ -import { useEffect } from "react"; +//hooks/layers/useGmaMarkersLayer.js +import { useEffect } from "react"; import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker"; -const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms) => { +const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => { useEffect(() => { - if (!map) return; + if (!map || !isVisible) return; // Bedingung hier prüfen // Entferne alte Marker GMA.clearLayers(); @@ -28,7 +29,6 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms) => { const rlf = measurements["RLF"] || "---"; console.log(`Station oder Bereich ${area_name} - LT: ${lt}, FBT: ${fbt}, GT: ${gt}, RLF: ${rlf}`); - console.log(`Station idLD: ${idLD} `); // Tooltip für den Marker binden marker.bindTooltip( @@ -75,7 +75,12 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms) => { }); map.addLayer(GMA); - }, [map, markers, GisStationsMeasurements, GMA, oms]); + + return () => { + GMA.clearLayers(); + map.removeLayer(GMA); // Entferne die Layer, wenn der Hook gereinigt wird + }; + }, [map, markers, GisStationsMeasurements, GMA, oms, isVisible]); }; export default useMarkersLayer;