diff --git a/components/MapComponent.js b/components/MapComponent.js
index 1a08f2e87..954ba0561 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -782,12 +782,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
// Rufe useBereicheMarkersLayer direkt auf
const bereicheMarkers = useBereicheMarkersLayer(map, oms, "/api/talas_v5_DB/bereich/readBereich?m=12");
- useEffect(() => {
+ /* useEffect(() => {
if (map && oms) {
// Wenn zusätzliche Initialisierung nötig ist, führe sie hier aus.
console.log("Bereiche-Markierungen geladen:", bereicheMarkers);
}
- }, [map, oms, bereicheMarkers]);
+ }, [map, oms, bereicheMarkers]); */
//----------------------------------
useEffect(() => {
diff --git a/hooks/layers/useBereicheMarkersLayer.js b/hooks/layers/useBereicheMarkersLayer.js
index 867911c8f..f06195605 100644
--- a/hooks/layers/useBereicheMarkersLayer.js
+++ b/hooks/layers/useBereicheMarkersLayer.js
@@ -1,19 +1,46 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
// Definiere ein Standard-Icon
const customIcon = new L.Icon({
- iconUrl: "/img/marker-icon.png", // Beispielpfad: Passe dies auf dein Symbol an
- iconSize: [25, 41], // Größe des Icons
- iconAnchor: [12, 41], // Position des Icons
+ iconUrl: "/img/marker-icon.png",
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
popupAnchor: [1, -34],
- shadowUrl: "/img/marker-shadow.png", // Optionaler Schatten
+ shadowUrl: "/img/marker-shadow.png",
shadowSize: [41, 41],
});
const useBereicheMarkersLayer = (map, oms, apiUrl) => {
const [bereicheMarkers, setBereicheMarkers] = useState([]);
+ const prevVisibility = useRef(null); // Referenz, um vorherige Sichtbarkeitsdaten zu speichern
+
+ const updateMarkersVisibility = () => {
+ if (!map || bereicheMarkers.length === 0) return;
+
+ // Hole die Sichtbarkeitsdaten aus localStorage
+ const mapLayersVisibility = JSON.parse(localStorage.getItem("mapLayersVisibility")) || {};
+
+ // Überprüfen, ob alle Layer unsichtbar sind
+ const areAllLayersInvisible = Object.values(mapLayersVisibility).every((visibility) => !visibility);
+
+ // Wenn die Sichtbarkeit gleich bleibt, breche die Ausführung ab
+ if (areAllLayersInvisible === prevVisibility.current) return;
+
+ // Speichere den neuen Sichtbarkeitsstatus
+ prevVisibility.current = areAllLayersInvisible;
+
+ // Füge Marker hinzu oder entferne sie basierend auf der Bedingung
+ bereicheMarkers.forEach((marker) => {
+ if (areAllLayersInvisible) {
+ marker.addTo(map);
+ if (oms) oms.addMarker(marker); // Overlapping Marker Spiderfier
+ } else {
+ map.removeLayer(marker); // Entferne Marker, wenn die Bedingung nicht erfüllt ist
+ }
+ });
+ };
useEffect(() => {
// Hole die Daten aus der API
@@ -23,12 +50,10 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
const data = await response.json();
const markers = data.map((item) => {
- // Erstelle Marker für jedes Datenbank-Item
const marker = L.marker([item.x, item.y], { icon: customIcon }).bindPopup(`
ID Location: ${item.idLocation}
ID Map: ${item.idMaps}
`);
-
return marker;
});
@@ -42,22 +67,28 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
}, [apiUrl]);
useEffect(() => {
- if (map && bereicheMarkers.length) {
- // Füge alle Marker zur Karte hinzu
- bereicheMarkers.forEach((marker) => {
- marker.addTo(map);
- if (oms) oms.addMarker(marker); // Overlapping Marker Spiderfier
- });
- }
- }, [map, bereicheMarkers, oms]);
- useEffect(() => {
- if (!map) return; // Sicherheitsprüfung
- if (bereicheMarkers.length > 0) {
- bereicheMarkers.forEach((marker) => {
- marker.addTo(map);
- if (oms) oms.addMarker(marker);
- });
- }
+ // Initialisiere die Sichtbarkeit beim ersten Laden
+ updateMarkersVisibility();
+
+ // Listener für Änderungen in localStorage hinzufügen
+ const handleStorageChange = (event) => {
+ if (event.key === "mapLayersVisibility") {
+ updateMarkersVisibility();
+ }
+ };
+
+ window.addEventListener("storage", handleStorageChange);
+
+ // Fallback: Überwachung durch Intervall
+ const intervalId = setInterval(() => {
+ updateMarkersVisibility();
+ }, 500); // Alle 500ms prüfen
+
+ return () => {
+ // Entferne den Listener und das Intervall
+ window.removeEventListener("storage", handleStorageChange);
+ clearInterval(intervalId);
+ };
}, [map, bereicheMarkers, oms]);
return bereicheMarkers;