fix: Sichtbarkeitsprobleme von Markern und Plus-Icons behoben

- Initiales Laden der Marker entsprechend der lokalen Speicherwerte (localStorage) korrigiert.
- Plus-Icons wird nun dynamisch aktualisiert, wenn Checkboxen geändert werden.
- Event-Listener für Sichtbarkeitsänderungen hinzugefügt, um Marker und Plus-Icons ohne Neuladen zu aktualisieren.
- Allgemeine Konsistenz zwischen `mapLayersVisibility` und tatsächlicher Sichtbarkeit der Layer verbessert.
This commit is contained in:
ISA
2024-12-19 10:17:02 +01:00
parent ecaf21917e
commit f7defe8bec
2 changed files with 43 additions and 32 deletions

View File

@@ -96,6 +96,12 @@ function DataSheet() {
localStorage.setItem("mapLayersVisibility", JSON.stringify(newState));
return newState;
});
// Manuell die Überprüfung der Marker aktualisieren
setTimeout(() => {
const event = new Event("visibilityChanged");
window.dispatchEvent(event);
}, 0);
};
const handlePoiCheckboxChange = (event) => {

View File

@@ -378,52 +378,44 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}
}, [map, zoomTrigger]);
//--------------------------------------------
const allMarkers = [
...talasMarkers,
...eciMarkers,
...gsmModemMarkers,
...ciscoRouterMarkers,
...wagoMarkers,
...siemensMarkers,
...otdrMarkers,
...wdmMarkers,
...gmaMarkers,
...messstellenMarkers,
...talasiclMarkers,
...dauzMarkers,
...smsfunkmodemMarkers,
...sonstigeMarkers,
...tkComponentsMarkers,
...ulafMarkers,
];
useEffect(() => {
if (map) {
// Sammle alle Marker in einer einzigen Liste
const allMarkers = [
...talasMarkers,
...eciMarkers,
...gsmModemMarkers,
...ciscoRouterMarkers,
...wagoMarkers,
...siemensMarkers,
...otdrMarkers,
...wdmMarkers,
...gmaMarkers,
...messstellenMarkers,
...talasiclMarkers,
...dauzMarkers,
...smsfunkmodemMarkers,
...sonstigeMarkers,
...tkComponentsMarkers,
...ulafMarkers,
];
const editMode = localStorage.getItem("editMode") === "true"; // EditMode prüfen
const mapLayersVisibility = JSON.parse(localStorage.getItem("mapLayersVisibility")) || {};
const visibility = mapLayersVisibility || {}; // Sichtbarkeitsstatus aus Recoil
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];
const layerKey = marker.options?.layerKey; // Layer-Key aus den Marker-Optionen
const isVisible = visibility[layerKey]; // Sichtbarkeitsstatus prüfen
if (!layerKey || isVisible === undefined) {
console.warn(`Marker ohne gültigen layerKey oder keine Sichtbarkeitsdaten: ${marker}`);
return;
}
if (!layerKey || isVisible === undefined) return;
if (editMode || !isVisible) {
// Entferne Marker, wenn EditMode aktiv ist oder Layer unsichtbar
if (map.hasLayer(marker)) {
map.removeLayer(marker);
}
if (map.hasLayer(marker)) map.removeLayer(marker);
} else {
// Füge Marker hinzu, wenn EditMode deaktiviert ist und Layer sichtbar
if (!map.hasLayer(marker)) {
marker.addTo(map);
}
if (!map.hasLayer(marker)) marker.addTo(map);
}
});
@@ -448,6 +440,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
sonstigeMarkers,
tkComponentsMarkers,
ulafMarkers,
mapLayersVisibility, // Neu: Abhängigkeit für Sichtbarkeitsstatus
]);
//--------------------------------------------
@@ -797,6 +790,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}, [map, oms, bereicheMarkers]);
//----------------------------------
useEffect(() => {
const handleVisibilityChange = () => {
// Erneut die Marker-Überprüfung auslösen
checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
};
window.addEventListener("visibilityChanged", handleVisibilityChange);
return () => {
window.removeEventListener("visibilityChanged", handleVisibilityChange);
};
}, [map, allMarkers]);
//---------------------------------------