diff --git a/components/MapComponent.js b/components/MapComponent.js index d0cede54d..4daf1021f 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -180,7 +180,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { setUserId(params.get("u")); }, [setMapId, setUserId]); - useEffect(() => { + /* useEffect(() => { if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) { //console.log("Überprüfung der Berechtigung vor addItemsToMapContextMenu: ", hasRights); addItemsToMapContextMenu(hasRights); @@ -192,7 +192,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { menuItemAdded, // Hinzufügen zu den Abhängigkeiten, um den Effekt korrekt zu steuern hasRights, // Sicherstellen, dass hasRights berücksichtigt wird isRightsLoaded, // Überprüfung, ob die Rechte geladen sind - ]); + ]); */ useEffect(() => { const fetchAndSetUserRights = async () => { @@ -270,8 +270,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }, []); //-------------------------------------------------------- - useDrawLines(setLinePositions); + useDrawLines(setLinePositions); // Linien auf die Karte zeichnen //-------------------------------------------- + // POIs Popup Informationen anzeigen useEffect(() => { const fetchPoiTypData = async () => { try { @@ -284,7 +285,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { console.error("Fehler beim Abrufen der poiTyp-Daten-1:", error); } }; - //-------------------------------------------- const fetchPoiData = async () => { try { const response = await fetch("/api/talas_v5_DB/pois/poi-icons"); @@ -296,13 +296,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { console.error("Fehler beim Abrufen der poiData-2:", error); } }; - //-------------------------------------------- fetchPoiTypData(); fetchPoiData(); }, []); + //-------------------------------------------- - useEffect(() => { + /* useEffect(() => { if (map) { const dbLayer = new L.LayerGroup().addTo(map); // Define dbLayer here @@ -310,8 +310,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { dbLayer.remove(); }; } - }, [map]); - + }, [map]); */ + //-------------------------------------------- + // POIs auf die Karte zeichnen useEffect(() => { if (map && !poiLayerRef.current) { poiLayerRef.current = new L.LayerGroup().addTo(map); @@ -328,6 +329,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }, [map, locations, poiReadTrigger]); //-------------------------------------------- + // POIs auf die Karte zeichnen useEffect(() => { if (poiData.length === 0) return; @@ -400,22 +402,30 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { ]; const editMode = localStorage.getItem("editMode") === "true"; // EditMode prüfen + const mapLayersVisibility = JSON.parse(localStorage.getItem("mapLayersVisibility")) || {}; - if (editMode) { - // Alle Marker entfernen, wenn EditMode aktiv ist - allMarkers.forEach((marker) => { + allMarkers.forEach((marker) => { + // Prüfe, ob der Marker einer sichtbaren Layer-Gruppe zugeordnet ist + const layerKey = marker.options?.layerKey; // Layer-Key aus den Optionen des Markers + const isVisible = mapLayersVisibility[layerKey]; + + if (!layerKey || isVisible === undefined) { + console.warn(`Marker ohne gültigen layerKey oder keine Sichtbarkeitsdaten: ${marker}`); + return; + } + + if (editMode || !isVisible) { + // Entferne Marker, wenn EditMode aktiv ist oder Layer unsichtbar if (map.hasLayer(marker)) { map.removeLayer(marker); } - }); - } else { - // Marker wieder hinzufügen, falls EditMode deaktiviert ist - allMarkers.forEach((marker) => { + } else { + // Füge Marker hinzu, wenn EditMode deaktiviert ist und Layer sichtbar if (!map.hasLayer(marker)) { marker.addTo(map); } - }); - } + } + }); // Überprüfe überlappende Marker und füge das "Plus"-Icon hinzu checkOverlappingMarkers(map, allMarkers, plusRoundIcon);