feat: Marker-Layer-Logik in useDynamicMarkerLayers Hook ausgelagert

- Logik zur Initialisierung und Aktualisierung von Marker-Layern aus MapComponent.js ausgelagert.
- Neuer Hook: useDynamicMarkerLayers im hooks-Verzeichnis hinzugefügt.
- Modularisierung und Wiederverwendbarkeit verbessert.

components/MapComponent.js

@@ -47,6 +47,7 @@ import { usePolylineTooltipLayer } from "../hooks/usePolylineTooltipLayer";
 import { useFetchLineStatusData } from "../hooks/useFetchLineStatusData";
 import { useFetchPriorityConfig } from "../hooks/useFetchPriorityConfig";
 import { useUpdateGmaData } from "../hooks/useUpdateGmaData";
+import { useDynamicMarkerLayers } from "../hooks/useDynamicMarkerLayers";
 //--------------------------------------------
 import { currentPoiState } from "../redux/slices/currentPoiSlice.js";
 import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice";
@@ -584,97 +585,30 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   );
 
   //---------------------------------
-
+useDynamicMarkerLayers(
-  const gmaLayerRef = useRef(null);
+    map,
-  const talasLayerRef = useRef(null);
+    gisSystemStaticLoaded,
-  const eciMarkersLayerRef = useRef(null);
+    GisSystemStatic,
-  const gsmModemMarkersLayerRef = useRef(null);
+    priorityConfig,
-  const ciscoRouterMarkersLayerRef = useRef(null);
+    {
-  const wagoMarkersLayerRef = useRef(null);
+      setGmaMarkers,
-  const siemensMarkersLayerRef = useRef(null);
+      setTalasMarkers,
-  const otdrMarkersLayerRef = useRef(null);
+      setEciMarkers,
-  const wdmMarkersLayerRef = useRef(null);
+      setGsmModemMarkers,
-  const messstellenMarkersLayerRef = useRef(null);
+      setCiscoRouterMarkers,
-  const talasiclMarkersLayerRef = useRef(null);
+      setWagoMarkers,
-  const dauzMarkersLayerRef = useRef(null);
+      setSiemensMarkers,
-  const smsfunkmodemMarkersLayerRef = useRef(null);
+      setOtdrMarkers,
-  const ulafMarkersLayerRef = useRef(null);
+      setWdmMarkers,
-  const sonstigeMarkersLayerRef = useRef(null);
+      setMessstellenMarkers,
-  const tkComponentsMarkersRef = useRef(null);
+      setTalasiclMarkers,
-  useEffect(() => {
+      setDauzMarkers,
-    if (!gisSystemStaticLoaded || !map) return; // Sicherstellen, dass die Karte und Daten geladen sind
+      setSmsfunkmodemMarkers,
-
+      setUlafMarkers,
-    const layerGroups = [
+      setSonstigeMarkers,
-      { ref: gmaLayerRef, id: 11, setState: setGmaMarkers },
+      setTkComponentsMarkers,
-      { ref: talasLayerRef, id: 1, setState: setTalasMarkers },
+    }
-      { ref: eciMarkersLayerRef, id: 2, setState: setEciMarkers },
+  );
-      { ref: gsmModemMarkersLayerRef, id: 5, setState: setGsmModemMarkers },
-      { ref: ciscoRouterMarkersLayerRef, id: 6, setState: setCiscoRouterMarkers },
-      { ref: wagoMarkersLayerRef, id: 7, setState: setWagoMarkers },
-      { ref: siemensMarkersLayerRef, id: 8, setState: setSiemensMarkers },
-      { ref: otdrMarkersLayerRef, id: 9, setState: setOtdrMarkers },
-      { ref: wdmMarkersLayerRef, id: 10, setState: setWdmMarkers },
-      { ref: messstellenMarkersLayerRef, id: 13, setState: setMessstellenMarkers },
-      { ref: talasiclMarkersLayerRef, id: 100, setState: setTalasiclMarkers },
-      { ref: dauzMarkersLayerRef, id: 110, setState: setDauzMarkers },
-      { ref: smsfunkmodemMarkersLayerRef, id: 111, setState: setSmsfunkmodemMarkers },
-      { ref: ulafMarkersLayerRef, id: 0, setState: setUlafMarkers },
-      { ref: sonstigeMarkersLayerRef, id: 200, setState: setSonstigeMarkers },
-      { ref: tkComponentsMarkersRef, id: 30, setState: setTkComponentsMarkers },
-    ];
-
-    // Initialisiere LayerGroups nur einmal
-    layerGroups.forEach(({ ref }) => {
-      if (!ref.current) {
-        ref.current = new L.LayerGroup().addTo(map);
-      }
-    });
-
-    const updateMarkers = ({ ref, id, setState }) => {
-      if (ref.current) {
-        ref.current.clearLayers(); // Entferne alte Marker
-      }
-
-      // Erstelle und füge neue Marker hinzu
-      createAndSetDevices(
-        id,
-        (newMarkers) => {
-          setState(newMarkers); // Zustand aktualisieren
-          newMarkers.forEach((marker) => ref.current.addLayer(marker)); // Marker zur LayerGroup hinzufügen
-
-          // Überprüfe auf überlappende Marker und füge das Plus-Icon hinzu
-          checkOverlappingMarkers(map, newMarkers, plusRoundIcon);
-        },
-        GisSystemStatic,
-        priorityConfig
-      );
-    };
-
-    // Aktualisiere alle Marker-Gruppen
-    const updateAllMarkers = () => {
-      layerGroups.forEach(updateMarkers);
-    };
-
-    // Initiales Update
-    updateAllMarkers();
-
-    // Setze ein Intervall für regelmäßige Updates
-    /*     const intervalId = setInterval(() => {
-      updateAllMarkers();
-    }, 60000); // 20 Sekunden
-
-    // Aufräumen bei Komponentenentladung
-    return () => {
-      clearInterval(intervalId); // Entferne Intervall
-
-      // LayerGroups leeren
-      layerGroups.forEach(({ ref }) => {
-        if (ref.current) {
-          ref.current.clearLayers();
-        }
-      });
-    }; */
-  }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
 
   //---------------------------------------
   // Initialisiere Leaflet-Karte

hooks/useDynamicMarkerLayers.js

@@ -0,0 +1,80 @@
+import { useEffect, useRef } from "react";
+import L from "leaflet";
+import { createAndSetDevices } from "../utils/createAndSetDevices.js";
+import { checkOverlappingMarkers } from "../utils/markerUtils";
+import { plusRoundIcon } from "../components/PlusRoundIcon.js";
+
+export const useDynamicMarkerLayers = (
+  map,
+  gisSystemStaticLoaded,
+  GisSystemStatic,
+  priorityConfig,
+  setMarkerStates
+) => {
+  const layerRefs = {
+    gmaLayerRef: useRef(null),
+    talasLayerRef: useRef(null),
+    eciMarkersLayerRef: useRef(null),
+    gsmModemMarkersLayerRef: useRef(null),
+    ciscoRouterMarkersLayerRef: useRef(null),
+    wagoMarkersLayerRef: useRef(null),
+    siemensMarkersLayerRef: useRef(null),
+    otdrMarkersLayerRef: useRef(null),
+    wdmMarkersLayerRef: useRef(null),
+    messstellenMarkersLayerRef: useRef(null),
+    talasiclMarkersLayerRef: useRef(null),
+    dauzMarkersLayerRef: useRef(null),
+    smsfunkmodemMarkersLayerRef: useRef(null),
+    ulafMarkersLayerRef: useRef(null),
+    sonstigeMarkersLayerRef: useRef(null),
+    tkComponentsMarkersRef: useRef(null),
+  };
+
+  useEffect(() => {
+    if (!gisSystemStaticLoaded || !map) return;
+
+    const layerGroups = [
+      { ref: layerRefs.gmaLayerRef, id: 11, setState: setMarkerStates.setGmaMarkers },
+      { ref: layerRefs.talasLayerRef, id: 1, setState: setMarkerStates.setTalasMarkers },
+      { ref: layerRefs.eciMarkersLayerRef, id: 2, setState: setMarkerStates.setEciMarkers },
+      { ref: layerRefs.gsmModemMarkersLayerRef, id: 5, setState: setMarkerStates.setGsmModemMarkers },
+      { ref: layerRefs.ciscoRouterMarkersLayerRef, id: 6, setState: setMarkerStates.setCiscoRouterMarkers },
+      { ref: layerRefs.wagoMarkersLayerRef, id: 7, setState: setMarkerStates.setWagoMarkers },
+      { ref: layerRefs.siemensMarkersLayerRef, id: 8, setState: setMarkerStates.setSiemensMarkers },
+      { ref: layerRefs.otdrMarkersLayerRef, id: 9, setState: setMarkerStates.setOtdrMarkers },
+      { ref: layerRefs.wdmMarkersLayerRef, id: 10, setState: setMarkerStates.setWdmMarkers },
+      { ref: layerRefs.messstellenMarkersLayerRef, id: 13, setState: setMarkerStates.setMessstellenMarkers },
+      { ref: layerRefs.talasiclMarkersLayerRef, id: 100, setState: setMarkerStates.setTalasiclMarkers },
+      { ref: layerRefs.dauzMarkersLayerRef, id: 110, setState: setMarkerStates.setDauzMarkers },
+      { ref: layerRefs.smsfunkmodemMarkersLayerRef, id: 111, setState: setMarkerStates.setSmsfunkmodemMarkers },
+      { ref: layerRefs.ulafMarkersLayerRef, id: 0, setState: setMarkerStates.setUlafMarkers },
+      { ref: layerRefs.sonstigeMarkersLayerRef, id: 200, setState: setMarkerStates.setSonstigeMarkers },
+      { ref: layerRefs.tkComponentsMarkersRef, id: 30, setState: setMarkerStates.setTkComponentsMarkers },
+    ];
+
+    layerGroups.forEach(({ ref }) => {
+      if (!ref.current) {
+        ref.current = new L.LayerGroup().addTo(map);
+      }
+    });
+
+    const updateMarkers = ({ ref, id, setState }) => {
+      if (ref.current) {
+        ref.current.clearLayers();
+      }
+
+      createAndSetDevices(id, (newMarkers) => {
+        setState(newMarkers);
+        newMarkers.forEach((marker) => ref.current.addLayer(marker));
+        checkOverlappingMarkers(map, newMarkers, plusRoundIcon);
+      }, GisSystemStatic, priorityConfig);
+    };
+
+    const updateAllMarkers = () => {
+      layerGroups.forEach(updateMarkers);
+    };
+
+    updateAllMarkers();
+
+  }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
+};