fix: Gerätemarker-Sichtbarkeit an Redux-Layerzustand gekoppelt

- Hardcodiertes Zeichnen der Gerätemarker beim Initialisieren entfernt
- Sichtbarkeitssteuerung vollständig über mapLayersVisibility aus Redux umgesetzt
- Dynamische Layererzeugung aus GisSystemStatic integriert
- Marker werden nur angezeigt, wenn zugehöriger Layer aktiv ist

components/mainComponent/MapComponent.js

@@ -41,13 +41,25 @@ import { selectGisLines } from "../../redux/slices/database/polylines/gisLinesSl
 import { selectGisLinesStatus } from "../../redux/slices/webservice/gisLinesStatusSlice";
 import { selectPoiTypData, selectPoiTypStatus } from "../../redux/slices/database/pois/poiTypSlice";
 import { selectPriorityConfig } from "../../redux/slices/database/priorityConfigSlice.js";
-import { selectPoiIconsData, selectPoiIconsStatus } from "../../redux/slices/database/pois/poiIconsDataSlice";
+import {
+  selectPoiIconsData,
+  selectPoiIconsStatus,
+} from "../../redux/slices/database/pois/poiIconsDataSlice";
 import { selectGisLinesStatusFromWebservice } from "../../redux/slices/webservice/gisLinesStatusSlice";
 import { selectGisUserRightsFromWebservice } from "../../redux/slices/webservice/userRightsSlice";
-import { updateCountdown, closePolylineContextMenu } from "../../redux/slices/database/polylines/polylineContextMenuSlice.js";
+import {
-import { selectPolylineVisible, setPolylineVisible } from "../../redux/slices/database/polylines/polylineLayerVisibleSlice.js";
+  updateCountdown,
+  closePolylineContextMenu,
+} from "../../redux/slices/database/polylines/polylineContextMenuSlice.js";
+import {
+  selectPolylineVisible,
+  setPolylineVisible,
+} from "../../redux/slices/database/polylines/polylineLayerVisibleSlice.js";
 import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice.js";
-import { selectGisSystemStatic, setGisSystemStatic } from "../../redux/slices/webservice/gisSystemStaticSlice.js";
+import {
+  selectGisSystemStatic,
+  setGisSystemStatic,
+} from "../../redux/slices/webservice/gisSystemStaticSlice.js";
 //-----------Redux-Thunks-------------------
 import { fetchGisStationsMeasurementsThunk } from "../../redux/thunks/webservice/fetchGisStationsMeasurementsThunk";
 import { fetchGisSystemStaticThunk } from "../../redux/thunks/webservice/fetchGisSystemStaticThunk";
@@ -63,38 +75,43 @@ import { fetchPoiTypThunk } from "../../redux/thunks/database/pois/fetchPoiTypTh
 import { updateAreaThunk } from "../../redux/thunks/database/area/updateAreaThunk";
 
 import useDynamicDeviceLayers from "../../hooks/layers/useDynamicDeviceLayers";
+
+import useDataUpdater from "@/hooks/useDataUpdater";
 //-----------------------------------------------------------------------------------------------------
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //-------------------------------
   const dispatch = useDispatch();
+  useDataUpdater();
 
-  const countdown = useSelector((state) => state.polylineContextMenu.countdown);
+  const countdown = useSelector(state => state.polylineContextMenu.countdown);
-  const countdownActive = useSelector((state) => state.polylineContextMenu.countdownActive);
+  const countdownActive = useSelector(state => state.polylineContextMenu.countdownActive);
-  const isPolylineContextMenuOpen = useSelector((state) => state.polylineContextMenu.isOpen);
+  const isPolylineContextMenuOpen = useSelector(state => state.polylineContextMenu.isOpen);
   const polylineVisible = useSelector(selectPolylineVisible);
 
-  const isPoiTypLoaded = useSelector((state) => state.poiTypes.status === "succeeded");
+  const isPoiTypLoaded = useSelector(state => state.poiTypes.status === "succeeded");
-  const statusMeasurements = useSelector((state) => state.gisStationsMeasurements.status);
+  const statusMeasurements = useSelector(state => state.gisStationsMeasurements.status);
-  const statusSystem = useSelector((state) => state.gisSystemStatic.status);
+  const statusSystem = useSelector(state => state.gisSystemStatic.status);
-  const statusStaticDistrict = useSelector((state) => state.gisStationsStaticDistrict.status);
+  const statusStaticDistrict = useSelector(state => state.gisStationsStaticDistrict.status);
-  const statusStatusDistrict = useSelector((state) => state.gisStationsStatusDistrict.status);
+  const statusStatusDistrict = useSelector(state => state.gisStationsStatusDistrict.status);
   const priorityConfig = useSelector(selectPriorityConfig);
-  const poiLayerVisible = useSelector((state) => state.poiLayerVisible.visible);
+  const poiLayerVisible = useSelector(state => state.poiLayerVisible.visible);
-  const zoomTrigger = useSelector((state) => state.zoomTrigger.trigger);
+  const zoomTrigger = useSelector(state => state.zoomTrigger.trigger);
-  const poiReadTrigger = useSelector((state) => state.poiReadFromDbTrigger.trigger);
+  const poiReadTrigger = useSelector(state => state.poiReadFromDbTrigger.trigger);
   const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict);
   const GisSystemStatic = useSelector(selectGisSystemStatic);
-  const gisSystemStaticStatus = useSelector((state) => state.gisSystemStatic.status);
+  const gisSystemStaticStatus = useSelector(state => state.gisSystemStatic.status);
-  const polylineEventsDisabled = useSelector((state) => state.polylineEventsDisabled.disabled);
+  const polylineEventsDisabled = useSelector(state => state.polylineEventsDisabled.disabled);
   const mapLayersVisibility = useSelector(selectMapLayersState) || {};
-  const selectedArea = useSelector((state) => state.selectedArea.area);
+  const selectedArea = useSelector(state => state.selectedArea.area);
-  const linesData = useSelector((state) => state.gisLinesFromDatabase.data);
+  const linesData = useSelector(state => state.gisLinesFromDatabase.data);
-  const gisLinesStatus = useSelector((state) => state.gisLinesStatusFromWebservice.status);
+  const gisLinesStatus = useSelector(state => state.gisLinesStatusFromWebservice.status);
-  const { data: gisLinesStatusData, status: statusGisLinesStatus } = useSelector(selectGisLinesStatusFromWebservice);
+  const { data: gisLinesStatusData, status: statusGisLinesStatus } = useSelector(
+    selectGisLinesStatusFromWebservice
+  );
   const poiIconsData = useSelector(selectPoiIconsData);
   const poiIconsStatus = useSelector(selectPoiIconsStatus);
   const poiTypData = useSelector(selectPoiTypData);
-  const poiTypStatus = useSelector((state) => state.poiTypes.status);
+  const poiTypStatus = useSelector(state => state.poiTypes.status);
   //const poiTypStatus = useSelector(selectPoiTypStatus);
 
   //-------------------------------
@@ -115,11 +132,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [oms, setOms] = useState(null); // State für OMS-Instanz
 
   //-----userRights----------------
-  const isRightsLoaded = useSelector((state) => state.gisUserRightsFromWebservice.status === "succeeded");
+  const isRightsLoaded = useSelector(
+    state => state.gisUserRightsFromWebservice.status === "succeeded"
+  );
   const userRights = useSelector(selectGisUserRightsFromWebservice);
   const hasRights = userRights.includes(56);
   //-----------------------------
-  const openPopupWithCoordinates = (e) => {
+  const openPopupWithCoordinates = e => {
     const coordinates = `${e.latlng.lat.toFixed(5)}, ${e.latlng.lng.toFixed(5)}`;
     setCurrentCoordinates(coordinates);
     setIsPopupOpen(true);
@@ -166,20 +185,29 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   //--------------------------------------------
 
-  const handleCoordinatesSubmit = (coords) => {
+  const handleCoordinatesSubmit = coords => {
     const [lat, lng] = coords.split(",").map(Number);
     if (map && lat && lng) {
       map.flyTo([lat, lng], 12); // Zentriere die Karte auf die Koordinaten
     }
   };
   //-----------------------------Map Initialisierung----------------
-  useInitializeMap(map, mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, (value) => dispatch(setDisabled(value)));
+  useInitializeMap(
+    map,
+    mapRef,
+    setMap,
+    setOms,
+    setMenuItemAdded,
+    addItemsToMapContextMenu,
+    hasRights,
+    value => dispatch(setDisabled(value))
+  );
 
   //-------------------------React Hooks--------------------------------
   useEffect(() => {
     if (linesData && Array.isArray(linesData)) {
-      const transformed = linesData.map((item) => ({
+      const transformed = linesData.map(item => ({
-        coordinates: item.points.map((point) => [point.x, point.y]),
+        coordinates: item.points.map(point => [point.x, point.y]),
         idModul: item.idModul,
         idLD: item.idLD,
       }));
@@ -204,7 +232,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         map.removeLayer(poiLayerRef.current);
         poiLayerRef.current = new L.LayerGroup().addTo(map);
       }
-      locations.forEach((location) => {});
+      locations.forEach(location => {});
     };
     //console.log("trigger in MapComponent.js:", poiReadTrigger);
   }, [map, locations, poiReadTrigger]);
@@ -233,7 +261,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       deviceName,
       dispatch
     );
-  }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded, userRights, poiLayerVisible, poiData, poiTypMap, dispatch]);
+  }, [
+    map,
+    locations,
+    onLocationUpdate,
+    poiReadTrigger,
+    isPoiTypLoaded,
+    userRights,
+    poiLayerVisible,
+    poiData,
+    poiTypMap,
+    dispatch,
+  ]);
 
   //---------------------------------------------
   //console.log("priorityConfig in MapComponent2: ", priorityConfig);
@@ -263,8 +302,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     if (!map) return;
 
     // Entferne alte Marker und Polylinien
-    markers.forEach((marker) => marker.remove());
+    markers.forEach(marker => marker.remove());
-    polylines.forEach((polyline) => polyline.remove());
+    polylines.forEach(polyline => polyline.remove());
 
     // Setze neue Marker und Polylinien mit den aktuellen Daten
     const { markers: newMarkers, polylines: newPolylines } = setupPolylines(
@@ -281,7 +320,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
     newPolylines.forEach((polyline, index) => {
       //console.log("polyline: ", polyline);
-      const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Die Linie ist noch nicht in Webservice vorhanden oder bekommt keine Daten";
+      const tooltipContent =
+        tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] ||
+        "Die Linie ist noch nicht in Webservice vorhanden oder bekommt keine Daten";
 
       polyline.bindTooltip(tooltipContent, {
         permanent: false,
@@ -291,7 +332,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         pane: "tooltipPane",
       });
 
-      polyline.on("mouseover", (e) => {
+      polyline.on("mouseover", e => {
         const tooltip = polyline.getTooltip();
         if (tooltip) {
           const mousePos = e.containerPoint;
@@ -323,7 +364,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
     setMarkers(newMarkers);
     setPolylines(newPolylines);
-  }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]);
+  }, [
+    map,
+    linePositions,
+    lineColors,
+    tooltipContents,
+    newPoint,
+    newCoords,
+    tempMarker,
+    polylineVisible,
+  ]);
 
   //--------------------------------------------
 
@@ -338,7 +388,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   useEffect(() => {
     if (map) {
       console.log("map in MapComponent: ", map);
-      const handleMapMoveEnd = (event) => {
+      const handleMapMoveEnd = event => {
         const newCenter = map.getCenter();
         const newZoom = map.getZoom();
 
@@ -367,7 +417,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     const points = GisStationsStaticDistrict?.Points;
 
     if (selectedArea && map) {
-      const station = points.find((s) => s.Area_Name === selectedArea);
+      const station = points.find(s => s.Area_Name === selectedArea);
 
       if (station) {
         console.log("📌 Gefundene Station:", station);
@@ -387,7 +437,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //--------------------------------------------
   useEffect(() => {
     if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) {
-      addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates);
+      addItemsToMapContextMenu(
+        map,
+        menuItemAdded,
+        setMenuItemAdded,
+        hasRights,
+        setShowPopup,
+        setPopupCoordinates
+      );
     }
   }, [map, poiLayerRef, isPoiTypLoaded, menuItemAdded, hasRights, isRightsLoaded]);
   //--------------------------------------------
@@ -464,14 +521,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       // Entferne alle Marker aus der Karte
       if (!map) return; // Sicherstellen, dass map existiert
 
-      areaMarkers.forEach((marker) => {
+      areaMarkers.forEach(marker => {
         if (map.hasLayer(marker)) {
           map.removeLayer(marker);
         }
       });
     } else {
       // Wenn editMode aktiviert ist, füge die Marker hinzu und aktiviere Dragging
-      areaMarkers.forEach((marker) => {
+      areaMarkers.forEach(marker => {
         if (!map.hasLayer(marker)) {
           marker.addTo(map); // Layer hinzufügen
         }
@@ -482,7 +539,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, [areaMarkers, map]);
 
   //----------------------------------
-  const { markerStates, layerRefs } = useDynamicDeviceLayers(map, GisSystemStatic, mapLayersVisibility, priorityConfig, oms);
+  const { markerStates, layerRefs } = useDynamicDeviceLayers(
+    map,
+    GisSystemStatic,
+    mapLayersVisibility,
+    priorityConfig,
+    oms
+  );
   useEffect(() => {
     const handleVisibilityChange = () => {
       if (!map) return;
@@ -584,7 +647,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     dispatch(fetchGisLinesStatusThunk());
   }, [dispatch]);
   //---------------------------------------------------------
-  const rights = useSelector((state) => state.gisUserRightsFromWebservice.rights);
+  const rights = useSelector(state => state.gisUserRightsFromWebservice.rights);
   useEffect(() => {
     dispatch(fetchUserRightsThunk());
   }, [dispatch]);
@@ -653,7 +716,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   useEffect(() => {
     if (poiTypStatus === "succeeded" && Array.isArray(poiTypData)) {
       const map = new Map();
-      poiTypData.forEach((item) => map.set(item.idPoiTyp, item.name));
+      poiTypData.forEach(item => map.set(item.idPoiTyp, item.name));
       setPoiTypMap(map);
     }
   }, [poiTypData, poiTypStatus]);
@@ -672,7 +735,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
     Object.entries(markerStates).forEach(([systemName, markers]) => {
       const isVisible = mapLayersVisibility[systemName];
-      markers.forEach((marker) => {
+      markers.forEach(marker => {
         const hasLayer = map.hasLayer(marker);
         if (editMode || !isVisible) {
           if (hasLayer) map.removeLayer(marker);
@@ -684,7 +747,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
     // optional für alle zusammen
     const allMarkers = Object.values(markerStates)
-      .filter((entry) => Array.isArray(entry))
+      .filter(entry => Array.isArray(entry))
       .flat();
 
     checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
@@ -697,22 +760,55 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       window.oms = oms; // Für Debugging global
     }
   }, [oms]);
+
   //---------------------------------------------
   //--------------------------------------------
   return (
     <>
       {/* Zeigt das POI-Modal, wenn `showPoiModal` true ist */}
-      {showPoiModal && <AddPOIModal latlng={popupCoordinates} onClose={() => setShowPoiModal(false)} />}
+      {showPoiModal && (
+        <AddPOIModal latlng={popupCoordinates} onClose={() => setShowPoiModal(false)} />
+      )}
       <ToastContainer />
-      <div>{showPoiUpdateModal && <PoiUpdateModal onClose={() => setShowPoiUpdateModal(false)} poiData={currentPoiData} onSubmit={() => {}} latlng={popupCoordinates} />}</div>
+      <div>
+        {showPoiUpdateModal && (
+          <PoiUpdateModal
+            onClose={() => setShowPoiUpdateModal(false)}
+            poiData={currentPoiData}
+            onSubmit={() => {}}
+            latlng={popupCoordinates}
+          />
+        )}
+      </div>
 
       <div>
         {showPopup && (
-          <div className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]" onClick={closePopup}>
+          <div
-            <div className="relative bg-white p-6 rounded-lg shadow-lg" onClick={(e) => e.stopPropagation()}>
+            className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]"
-              <button onClick={closePopup} className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600" aria-label="Close">
+            onClick={closePopup}
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            <div
+              className="relative bg-white p-6 rounded-lg shadow-lg"
+              onClick={e => e.stopPropagation()}
+            >
+              <button
+                onClick={closePopup}
+                className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600"
+                aria-label="Close"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
                 </svg>
               </button>
             </div>
@@ -720,7 +816,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         )}
       </div>
 
-      {GisStationsStaticDistrict && GisStationsStaticDistrict.Points?.length > 0 && <MapLayersControlPanel className="z-50" />}
+      {GisStationsStaticDistrict && GisStationsStaticDistrict.Points?.length > 0 && (
+        <MapLayersControlPanel className="z-50" />
+      )}
 
       <CoordinateInput onCoordinatesSubmit={handleCoordinatesSubmit} />
       <div id="map" ref={mapRef} className="z-0" style={{ height: "100vh", width: "100vw" }}></div>
@@ -740,7 +838,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           </div>
         </div>
       </div>
-      <VersionInfoModal showVersionInfoModal={showVersionInfoModal} closeVersionInfoModal={closeVersionInfoModal} APP_VERSION={APP_VERSION} />
+      <VersionInfoModal
+        showVersionInfoModal={showVersionInfoModal}
+        closeVersionInfoModal={closeVersionInfoModal}
+        APP_VERSION={APP_VERSION}
+      />
     </>
   );
 };

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.228";
+export const APP_VERSION = "1.1.229";

hooks/layers/useCiscoRouterMarkersLayer.js

@@ -1,50 +0,0 @@
-/* // hooks/useCiscoRouterMarkersLayer.js
-import { useEffect, useState } from "react";
-import L from "leaflet";
-import { createAndSetDevices } from "../../utils/createAndSetDevices";
-import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
-import { checkOverlappingMarkers } from "../../utils/mapUtils";
-
-const useCiscoRouterMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
-  const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]);
-
-  useEffect(() => {
-    if (GisSystemStatic && GisSystemStatic.length && map) {
-      createAndSetDevices(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig); // Cisco Router
-    }
-  }, [GisSystemStatic, map, priorityConfig]);
-
-  useEffect(() => {
-    if (map && ciscoRouterMarkers.length) {
-      ciscoRouterMarkers.forEach((marker) => {
-        marker.addTo(map);
-        oms.addMarker(marker);
-
-        // Popup on mouseover and mouseout
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
-
-        addContextMenuToMarker(marker);
-      });
-
-      // Disable map context menu
-      map.options.contextmenu = false;
-      map.options.contextmenuItems = [];
-
-      oms.map.options.contextmenu = false;
-      oms.map.options.contextmenuItems = [];
-
-      // Call the function to check for overlapping markers
-      checkOverlappingMarkers(oms, map);
-    }
-  }, [map, ciscoRouterMarkers]);
-
-  return ciscoRouterMarkers;
-};
-
-export default useCiscoRouterMarkersLayer;
- */

hooks/layers/useDauzMarkersLayer.js

@@ -1,46 +0,0 @@
-/* // hooks/useDauzMarkersLayer.js
-import { useEffect, useState } from "react";
-import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
-import { createAndSetDevices } from "../../utils/createAndSetDevices";
-
-const useDauzMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
-  const [dauzMarkers, setDauzMarkers] = useState([]);
-
-  useEffect(() => {
-    if (GisSystemStatic && GisSystemStatic.length && map) {
-      createAndSetDevices(110, setDauzMarkers, GisSystemStatic, priorityConfig); // DAUZ
-    }
-  }, [GisSystemStatic, map, priorityConfig]);
-
-  useEffect(() => {
-    if (map && dauzMarkers.length) {
-      dauzMarkers.forEach((marker) => {
-        marker.addTo(map);
-        oms.addMarker(marker);
-
-        // Popup on mouseover and mouseout
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
-
-        addContextMenuToMarker(marker);
-      });
-
-      // Disable map context menu
-      map.options.contextmenu = false;
-      map.options.contextmenuItems = [];
-
-      oms.map.options.contextmenu = false;
-      oms.map.options.contextmenuItems = [];
-    }
-  }, [map, dauzMarkers, oms]);
-
-  return dauzMarkers;
-};
-
-export default useDauzMarkersLayer;
- */

hooks/layers/useDynamicDeviceLayers.js

@@ -17,12 +17,12 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
   const [markerStates, setMarkerStates] = useState({});
   const layerRefs = useRef({});
 
-  // Marker initialisieren
+  // Marker initialisieren (nicht sichtbar machen)
   useEffect(() => {
     if (!map || GisSystemStatic.length === 0) return;
 
     GisSystemStatic.forEach(({ Name, IdSystem }) => {
-      const key = `system-${IdSystem}`; // ✅ Einheitlicher Key
+      const key = `system-${IdSystem}`; // Einheitlicher Key
 
       if (!layerRefs.current[key]) {
         layerRefs.current[key] = new L.LayerGroup().addTo(map);
@@ -30,12 +30,11 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
 
       createAndSetDevices(
         IdSystem,
-        (newMarkers) => {
+        newMarkers => {
-          setMarkerStates((prev) => ({ ...prev, [key]: newMarkers }));
+          setMarkerStates(prev => ({ ...prev, [key]: newMarkers }));
-          newMarkers.forEach((m) => {
+
-            layerRefs.current[key].addLayer(m);
+          // ❌ NICHT direkt zur Karte hinzufügen
-            if (oms) oms.addMarker(m);
+          // Sichtbarkeit folgt im 2. useEffect
-          });
           checkOverlappingMarkers(map, newMarkers, plusRoundIcon, oms);
         },
         GisSystemStatic,
@@ -44,14 +43,14 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
     });
   }, [map, GisSystemStatic, priorityConfig]);
 
-  // Sichtbarkeit aktualisieren
+  // Sichtbarkeit nach Redux-Status steuern
   useEffect(() => {
     if (!map) return;
     const editMode = localStorage.getItem("editMode") === "true";
 
     Object.entries(markerStates).forEach(([key, markers]) => {
       const isVisible = mapLayersVisibility[key];
-      markers.forEach((marker) => {
+      markers.forEach(marker => {
         const hasLayer = map.hasLayer(marker);
         if (editMode || !isVisible) {
           if (hasLayer) map.removeLayer(marker);
@@ -61,9 +60,7 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
       });
     });
 
-    const allMarkers = Object.values(markerStates)
+    const allMarkers = Object.values(markerStates).filter(Array.isArray).flat();
-      .filter(Array.isArray) // nur Arrays zulassen
-      .flat();
 
     checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
   }, [map, markerStates, mapLayersVisibility]);

hooks/layers/useEciMarkersLayer.js

@@ -1,49 +0,0 @@
-/* // /hooks/layers/useEciMarkersLayer.js
-import { useEffect, useState } from "react";
-import L from "leaflet";
-import { createAndSetDevices } from "../../utils/createAndSetDevices";
-import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
-import { checkOverlappingMarkers } from "../../utils/mapUtils";
-
-const useEciMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
-  const [eciMarkers, setEciMarkers] = useState([]);
-
-  useEffect(() => {
-    if (GisSystemStatic && GisSystemStatic.length && map) {
-      createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System
-    }
-  }, [GisSystemStatic, map, priorityConfig]);
-
-  useEffect(() => {
-    if (map && eciMarkers.length) {
-      eciMarkers.forEach((marker) => {
-        marker.addTo(map);
-        oms.addMarker(marker);
-
-        // Popup beim Überfahren mit der Maus öffnen und schließen
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
-
-        addContextMenuToMarker(marker);
-      });
-      // Disable map context menu
-      map.options.contextmenu = false;
-      map.options.contextmenuItems = [];
-
-      oms.map.options.contextmenu = false;
-      oms.map.options.contextmenuItems = [];
-
-      // Call the function to check for overlapping markers
-      checkOverlappingMarkers(oms, map);
-    }
-  }, [map, eciMarkers]);
-
-  return eciMarkers;
-};
-
-export default useEciMarkersLayer;
- */

hooks/layers/useGmaMarkersLayer.js

@@ -1,54 +0,0 @@
-import { useEffect } from "react";
-import { store } from "../redux/store";
-import L from "leaflet";
-import "leaflet-contextmenu";
-import { openInNewTab } from "./openInNewTab";
-
-const useGmaMarkersLayer = (map, markers, selectedMarkerId) => {
-  useEffect(() => {
-    if (!map || !markers || markers.length === 0) return;
-
-    const markerGroup = L.layerGroup();
-
-    markers.forEach((markerData) => {
-      const marker = L.marker([markerData.lat, markerData.lng], {
-        contextmenu: true,
-        contextmenuItems: [
-          {
-            text: "Station öffnen (Tab)",
-            icon: "/img/screen_new.png",
-            callback: () =>
-              openInNewTab(null, {
-                options: {
-                  link: markerData.link,
-                },
-              }),
-          },
-        ],
-      });
-
-      markerGroup.addLayer(marker);
-
-      // Optional: highlight selected marker
-      if (selectedMarkerId && markerData.id === selectedMarkerId) {
-        marker.setZIndexOffset(1000);
-        marker.setIcon(
-          L.icon({
-            iconUrl: "/img/marker-selected.png",
-            iconSize: [25, 41],
-            iconAnchor: [12, 41],
-          })
-        );
-      }
-    });
-
-    markerGroup.addTo(map);
-
-    return () => {
-      markerGroup.clearLayers();
-      map.removeLayer(markerGroup);
-    };
-  }, [map, markers, selectedMarkerId]);
-};
-
-export default useGmaMarkersLayer;

hooks/layers/useLteModemMarkersLayer.js

@@ -1,47 +0,0 @@
-// hooks/useLteModemMarkersLayer.js
-import { useEffect, useState } from "react";
-import L from "leaflet";
-import { createAndSetDevices } from "../../utils/createAndSetDevices";
-import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
-import { checkOverlappingMarkers } from "../../utils/mapUtils";
-
-const useLteModemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
-  const [lteModemMarkers, setLteModemMarkers] = useState([]);
-
-  useEffect(() => {
-    if (GisSystemStatic && GisSystemStatic.length && map) {
-      createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem
-    }
-  }, [GisSystemStatic, map, priorityConfig]);
-
-  useEffect(() => {
-    if (map && lteModemMarkers.length) {
-      lteModemMarkers.forEach((marker) => {
-        marker.addTo(map);
-        oms.addMarker(marker);
-
-        // Popup beim Überfahren mit der Maus öffnen und schließen
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
-
-        addContextMenuToMarker(marker);
-      });
-      // Disable map context menu
-      map.options.contextmenu = false;
-      map.options.contextmenuItems = [];
-
-      oms.map.options.contextmenu = false;
-      oms.map.options.contextmenuItems = [];
-
-      // Call the function to check for overlapping markers
-      checkOverlappingMarkers(oms, map);
-    }
-  }, [map, lteModemMarkers]);
-
-  return lteModemMarkers;
-};
-export default useLteModemMarkersLayer;

hooks/layers/useOtdrMarkersLayer.js

@@ -1,46 +0,0 @@
-/* // hooks/useOtdrMarkersLayer.js
-import { useEffect, useState } from "react";
-import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
-import { createAndSetDevices } from "../../utils/createAndSetDevices"; // Assuming this function is in poiUtils
-
-const useOtdrMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
-  const [otdrMarkers, setOtdrMarkers] = useState([]);
-
-  useEffect(() => {
-    if (GisSystemStatic && GisSystemStatic.length && map) {
-      createAndSetDevices(9, setOtdrMarkers, GisSystemStatic, priorityConfig); // OTDR
-    }
-  }, [GisSystemStatic, map, priorityConfig]);
-
-  useEffect(() => {
-    if (map && otdrMarkers.length) {
-      otdrMarkers.forEach((marker) => {
-        marker.addTo(map);
-        oms.addMarker(marker);
-
-        // Popup on mouseover and mouseout
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
-
-        addContextMenuToMarker(marker);
-      });
-
-      // Disable map context menu
-      map.options.contextmenu = false;
-      map.options.contextmenuItems = [];
-
-      oms.map.options.contextmenu = false;
-      oms.map.options.contextmenuItems = [];
-    }
-  }, [map, otdrMarkers, oms]);
-
-  return otdrMarkers;
-};
-
-export default useOtdrMarkersLayer;
- */

hooks/layers/useSiemensMarkersLayer.js

@@ -1,50 +0,0 @@
-/* // hooks/useSiemensMarkersLayer.js
-import { useState, useEffect } from "react";
-import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
-import { createAndSetDevices } from "../../utils/createAndSetDevices";
-import { checkOverlappingMarkers } from "../../utils/mapUtils";
-
-const useSiemensMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => {
-  const [siemensMarkers, setSiemensMarkers] = useState([]);
-
-  useEffect(() => {
-    if (gisSystemStatic && gisSystemStatic.length && map) {
-      createAndSetDevices(8, setSiemensMarkers, gisSystemStatic, priorityConfig); // Siemens-System
-    }
-  }, [gisSystemStatic, map, priorityConfig]);
-
-  useEffect(() => {
-    if (map && siemensMarkers.length) {
-      siemensMarkers.forEach((marker) => {
-        marker.addTo(map);
-        oms.addMarker(marker);
-
-        // Popup on mouseover and mouseout
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
-
-        addContextMenuToMarker(marker);
-      });
-
-      // Disable map context menu
-      map.options.contextmenu = false;
-      map.options.contextmenuItems = [];
-
-      oms.map.options.contextmenu = false;
-      oms.map.options.contextmenuItems = [];
-
-      // Call the function to check for overlapping markers
-      checkOverlappingMarkers(oms, map);
-    }
-  }, [map, siemensMarkers, oms]);
-
-  return siemensMarkers;
-};
-
-export default useSiemensMarkersLayer;
- */

hooks/layers/useSmsfunkmodemMarkersLayer.js

@@ -1,66 +0,0 @@
-/* // hooks/useSmsfunkmodemMarkersLayer.js
-import { useEffect, useState } from "react";
-import L from "leaflet";
-import "leaflet-contextmenu";
-import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
-
-const useSmsfunkmodemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig, isVisible) => {
-  const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);
-
-  useEffect(() => {
-    if (!map || !GisSystemStatic) return;
-
-    // Debugging: Logge die Sichtbarkeit und die übergebenen Daten
-    console.log("isVisible für SMS Modem:", isVisible);
-    console.log("Alle Stationen in GisSystemStatic:", GisSystemStatic);
-
-    // Hilfsfunktion: Normalisiert Strings
-    const normalizeString = (str) => str?.trim().toLowerCase() || "";
-
-    // Filter für SMS Modem (System === 111 oder Name entspricht "SMS Modem")
-    const markers = isVisible
-      ? GisSystemStatic.filter((station) => station.System === 111 || normalizeString(station.Name) === "SMS Modem").map((station) => {
-          console.log("Gefundener SMS Modem-Marker:", station); // Debugging
-          const marker = L.marker([station.Latitude, station.Longitude], {
-            icon: L.icon({
-              iconUrl: "/img/icons/pois/sms-funkmodem.png",
-              iconSize: [25, 41],
-              iconAnchor: [12, 41],
-              popupAnchor: [1, -34],
-            }),
-            id: station.id,
-            areaName: station.Area_Name,
-            draggable: false,
-          }).bindPopup(`
-            <div>
-              <b class="text-xl text-black-700">${station.Area_Name || "Unbekannt"}</b><br>
-              ${station.Description || "No Description"}<br>
-            </div>
-          `);
-
-          // Füge ein Kontextmenü hinzu
-          addContextMenuToMarker(marker);
-          return marker;
-        })
-      : [];
-
-    // Setze die Marker im Zustand
-    setSmsfunkmodemMarkers(markers);
-
-    // Füge Marker zur Karte hinzu
-    markers.forEach((marker) => {
-      marker.addTo(map);
-      oms.addMarker(marker);
-    });
-
-    // Cleanup: Entferne Marker bei Deaktivierung oder wenn der Hook entladen wird
-    return () => {
-      markers.forEach((marker) => marker.remove());
-    };
-  }, [map, GisSystemStatic, isVisible]);
-
-  return smsfunkmodemMarkers;
-};
-
-export default useSmsfunkmodemMarkersLayer;
- */

hooks/layers/useSonstigeMarkersLayer.js

@@ -1,46 +0,0 @@
-/* // hooks/useSonstigeMarkersLayer.js
-import { useEffect, useState } from "react";
-import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
-import { createAndSetDevices } from "../../utils/createAndSetDevices";
-
-const useSonstigeMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
-  const [sonstigeMarkers, setSonstigeMarkers] = useState([]);
-
-  useEffect(() => {
-    if (GisSystemStatic && GisSystemStatic.length && map) {
-      createAndSetDevices(200, setSonstigeMarkers, GisSystemStatic, priorityConfig); // Sonstige
-    }
-  }, [GisSystemStatic, map, priorityConfig]);
-
-  useEffect(() => {
-    if (map && sonstigeMarkers.length) {
-      sonstigeMarkers.forEach((marker) => {
-        marker.addTo(map);
-        oms.addMarker(marker);
-
-        // Popup on mouseover and mouseout
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
-
-        addContextMenuToMarker(marker);
-      });
-
-      // Disable map context menu
-      map.options.contextmenu = false;
-      map.options.contextmenuItems = [];
-
-      oms.map.options.contextmenu = false;
-      oms.map.options.contextmenuItems = [];
-    }
-  }, [map, sonstigeMarkers, oms]);
-
-  return sonstigeMarkers;
-};
-
-export default useSonstigeMarkersLayer;
- */

hooks/layers/useTalasMarkersLayer.js

@@ -1,36 +0,0 @@
-// /hooks/layers/useTalasMarkersLayer.js
-/* import { useEffect, useState } from "react";
-import { createAndSetDevices } from "../../utils/createAndSetDevices";
-import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
-
-const useTalasMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
-  const [talasMarkers, setTalasMarkers] = useState([]);
-
-  useEffect(() => {
-    if (GisSystemStatic && GisSystemStatic.length && map) {
-      createAndSetDevices(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System
-    }
-  }, [GisSystemStatic, map, priorityConfig]);
-
-  useEffect(() => {
-    if (map && talasMarkers.length && oms) {
-      talasMarkers.forEach((marker) => {
-        oms.addMarker(marker); // Erst zu OMS hinzufügen
-        marker.addTo(map); // Dann zum Map hinzufügen
-
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
-
-        addContextMenuToMarker(marker); // Kontextmenü-Event hinzufügen
-      });
-    }
-  }, [map, talasMarkers, oms]);
-
-  return talasMarkers;
-};
-
-export default useTalasMarkersLayer; */

hooks/layers/useTalasiclMarkersLayer.js

@@ -1,46 +0,0 @@
-/* // hooks/useTalasiclMarkersLayer.js
-import { useEffect, useState } from "react";
-import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
-import { createAndSetDevices } from "../../utils/createAndSetDevices";
-
-const useTalasiclMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
-  const [talasiclMarkers, setTalasiclMarkers] = useState([]);
-
-  useEffect(() => {
-    if (GisSystemStatic && GisSystemStatic.length && map) {
-      createAndSetDevices(100, setTalasiclMarkers, GisSystemStatic, priorityConfig); // TALASICL
-    }
-  }, [GisSystemStatic, map, priorityConfig]);
-
-  useEffect(() => {
-    if (map && talasiclMarkers.length) {
-      talasiclMarkers.forEach((marker) => {
-        marker.addTo(map);
-        oms.addMarker(marker);
-
-        // Popup on mouseover and mouseout
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
-
-        addContextMenuToMarker(marker);
-      });
-
-      // Disable map context menu
-      map.options.contextmenu = false;
-      map.options.contextmenuItems = [];
-
-      oms.map.options.contextmenu = false;
-      oms.map.options.contextmenuItems = [];
-    }
-  }, [map, talasiclMarkers, oms]);
-
-  return talasiclMarkers;
-};
-
-export default useTalasiclMarkersLayer;
- */

hooks/layers/useTkComponentsMarkersLayer.js

@@ -1,50 +0,0 @@
-/* // /hooks/layers/useTkComponentsMarkersLayer.js
-import { useEffect, useState } from "react";
-import L from "leaflet";
-import { createAndSetDevices } from "../../utils/createAndSetDevices";
-import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
-import { checkOverlappingMarkers } from "../../utils/mapUtils";
-
-const useTkComponentsMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
-  const [tkComponentsMarkers, setTkComponentsMarkers] = useState([]);
-
-  useEffect(() => {
-    if (GisSystemStatic && GisSystemStatic.length && map) {
-      createAndSetDevices(2, setTkComponentsMarkers, GisSystemStatic, priorityConfig); // ECI-System
-    }
-    GisSystemStatic.filter((system) => system.IdSystem === 30).forEach((station) => console.log("Koordinaten für TK-Komponenten wird von hier nie aufgerufen:", station.Latitude, station.Longitude));
-  }, [GisSystemStatic, map, priorityConfig]);
-
-  useEffect(() => {
-    if (map && tkComponentsMarkers.length) {
-      tkComponentsMarkers.forEach((marker) => {
-        marker.addTo(map);
-        oms.addMarker(marker);
-
-        // Popup beim Überfahren mit der Maus öffnen und schließen
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
-
-        addContextMenuToMarker(marker);
-      });
-      // Disable map context menu
-      map.options.contextmenu = false;
-      map.options.contextmenuItems = [];
-
-      oms.map.options.contextmenu = false;
-      oms.map.options.contextmenuItems = [];
-
-      // Call the function to check for overlapping markers
-      checkOverlappingMarkers(oms, map);
-    }
-  }, [map, tkComponentsMarkers]);
-
-  return tkComponentsMarkers;
-};
-
-export default useTkComponentsMarkersLayer;
- */

hooks/layers/useUlafMarkersLayer.js

@@ -1,78 +0,0 @@
-/* // hooks/useUlafMarkersLayer.js
-import { useEffect, useState } from "react";
-import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
-//import { fetchDeviceNameById } from "../services/api/fetchDeviceNameById";
-
-
-const useUlafMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
-  const [ulafMarkers, setUlafMarkers] = useState([]);
-
-  useEffect(() => {
-    if (!map || !GisSystemStatic) return;
-
-    const markers = [];
-    GisSystemStatic.forEach((station) => {
-      if (station.System === 0) {
-        // Adjust the condition to match ULAF system identification
-        const marker = L.marker([station.Lat, station.Lon], {
-          icon: L.icon({
-            iconUrl: "/img/icons/ulaf.png",
-            iconSize: [25, 41],
-            iconAnchor: [12, 41],
-            popupAnchor: [1, -34],
-          }),
-          id: station.id,
-          name: station.name,
-          description: station.description,
-        });
-
-        marker.bindPopup(`
-          <div>
-            <b class="text-xl text-black-700">${station.name || "Unbekannt"}</b><br>
-            ${station.description || "Keine Beschreibung"}
-          </div>
-        `);
-
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
-
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
-
-        marker.on("click", async () => {
-          //const deviceName = await fetchDeviceNameById(station.idLD);
-          marker
-            .bindPopup(
-              `
-            <div>
-              <b class="text-xl text-black-700">${station.name || "Unbekannt"}</b><br>
-              ${deviceName}<br>
-              ${station.description || "Keine Beschreibung"}
-            </div>
-          `
-            )
-            .openPopup();
-        });
-
-        markers.push(marker);
-        if (map) marker.addTo(map);
-        if (oms) oms.addMarker(marker);
-        addContextMenuToMarker(marker);
-      }
-    });
-
-    setUlafMarkers(markers);
-
-    return () => {
-      markers.forEach((marker) => map.removeLayer(marker));
-    };
-  }, [map, GisSystemStatic, oms, priorityConfig]);
-
-  return ulafMarkers;
-};
-
-export default useUlafMarkersLayer;
- */

hooks/layers/useWagoMarkersLayer.js

@@ -1,50 +0,0 @@
-/* // hooks/useWagoMarkersLayer.js
-import { useState, useEffect } from "react";
-import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
-import { createAndSetDevices } from "../../utils/createAndSetDevices";
-import { checkOverlappingMarkers } from "../../utils/mapUtils";
-
-const useWagoMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => {
-  const [wagoMarkers, setWagoMarkers] = useState([]);
-
-  useEffect(() => {
-    if (gisSystemStatic && gisSystemStatic.length && map) {
-      createAndSetDevices(7, setWagoMarkers, gisSystemStatic, priorityConfig); // WAGO-System
-    }
-  }, [gisSystemStatic, map, priorityConfig]);
-
-  useEffect(() => {
-    if (map && wagoMarkers.length) {
-      wagoMarkers.forEach((marker) => {
-        marker.addTo(map);
-        oms.addMarker(marker);
-
-        // Popup on mouseover and mouseout
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
-
-        addContextMenuToMarker(marker);
-      });
-
-      // Disable map context menu
-      map.options.contextmenu = false;
-      map.options.contextmenuItems = [];
-
-      oms.map.options.contextmenu = false;
-      oms.map.options.contextmenuItems = [];
-
-      // Call the function to check for overlapping markers
-      checkOverlappingMarkers(oms, map);
-    }
-  }, [map, wagoMarkers, oms]);
-
-  return wagoMarkers;
-};
-
-export default useWagoMarkersLayer;
- */

hooks/layers/useWdmMarkersLayer.js

@@ -1,46 +0,0 @@
-/* // hooks/useWdmMarkersLayer.js
-import { useEffect, useState } from "react";
-import L from "leaflet";
-import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
-import { createAndSetDevices } from "../../utils/createAndSetDevices";
-
-const useWdmMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
-  const [wdmMarkers, setWdmMarkers] = useState([]);
-
-  useEffect(() => {
-    if (GisSystemStatic && GisSystemStatic.length && map) {
-      createAndSetDevices(10, setWdmMarkers, GisSystemStatic, priorityConfig); // WDM
-    }
-  }, [GisSystemStatic, map, priorityConfig]);
-
-  useEffect(() => {
-    if (map && wdmMarkers.length) {
-      wdmMarkers.forEach((marker) => {
-        marker.addTo(map);
-        oms.addMarker(marker);
-
-        // Popup on mouseover and mouseout
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
-
-        addContextMenuToMarker(marker);
-      });
-
-      // Disable map context menu
-      map.options.contextmenu = false;
-      map.options.contextmenuItems = [];
-
-      oms.map.options.contextmenu = false;
-      oms.map.options.contextmenuItems = [];
-    }
-  }, [map, wdmMarkers, oms]);
-
-  return wdmMarkers;
-};
-
-export default useWdmMarkersLayer;
- */

hooks/useDataUpdater.js

@@ -0,0 +1,31 @@
+// hooks/useDataUpdater.js
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+// import type { AppDispatch } from "../redux/store";
+
+// ✅ Thunks aus korrektem Pfad importieren
+import { fetchGisLinesStatusThunk } from "../redux/thunks/webservice/fetchGisLinesStatusThunk";
+import { fetchGisStationsMeasurementsThunk } from "../redux/thunks/webservice/fetchGisStationsMeasurementsThunk";
+import { fetchGisStationsStaticDistrictThunk } from "../redux/thunks/webservice/fetchGisStationsStaticDistrictThunk";
+import { fetchGisStationsStatusDistrictThunk } from "../redux/thunks/webservice/fetchGisStationsStatusDistrictThunk";
+import { fetchGisSystemStaticThunk } from "../redux/thunks/webservice/fetchGisSystemStaticThunk";
+
+const REFRESH_INTERVAL = parseInt(process.env.NEXT_PUBLIC_REFRESH_INTERVAL || "10000");
+
+export default function useDataUpdater() {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    const updateAll = () => {
+      dispatch(fetchGisLinesStatusThunk());
+      dispatch(fetchGisStationsMeasurementsThunk());
+      dispatch(fetchGisStationsStaticDistrictThunk());
+      dispatch(fetchGisStationsStatusDistrictThunk());
+      dispatch(fetchGisSystemStaticThunk());
+    };
+
+    updateAll(); // direkt initial einmal laden
+    const interval = setInterval(updateAll, REFRESH_INTERVAL);
+
+    return () => clearInterval(interval); // Cleanup
+  }, [dispatch]);
+}

hooks/useDataUpdater.ts

@@ -1,26 +0,0 @@
-// hooks/useDataUpdater.ts
-import { useEffect } from "react";
-import { useDispatch } from "react-redux";
-import { fetchPois } from "../redux/slices/database/pois/poiTypSlice";
-import { fetchLineStatus } from "@redux/lineStatusSlice";
-import { fetchDeviceStatus } from "@redux/deviceStatusSlice";
-
-const REFRESH_INTERVAL = parseInt(process.env.NEXT_PUBLIC_REFRESH_INTERVAL || "10000");
-
-export default function useDataUpdater() {
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    const update = () => {
-      dispatch(fetchPois());
-      dispatch(fetchLineStatus());
-      dispatch(fetchDeviceStatus());
-      // Füge hier weitere dispatches hinzu
-    };
-
-    update(); // Initialer Abruf
-    const interval = setInterval(update, REFRESH_INTERVAL);
-
-    return () => clearInterval(interval);
-  }, [dispatch]);
-}

hooks/useDynamicMarkerLayers.js

@@ -6,75 +6,42 @@ import { plusRoundIcon } from "../components/PlusRoundIcon.js";
 
 export const useDynamicMarkerLayers = (
   map,
-  gisSystemStaticLoaded,
   GisSystemStatic,
+  mapLayersVisibility,
   priorityConfig,
-  setMarkerStates
+  setMarkerStates // Funktion wie setMarkers(z.B. map.setMarkers(prev => ({...prev, [systemName]: markers})))
 ) => {
-  const layerRefs = {
+  const layerRefs = useRef({}); // dynamisch pro systemName
-    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;
+    if (!map || !Array.isArray(GisSystemStatic?.Systems)) return;
 
-    const layerGroups = [
+    GisSystemStatic.Systems.forEach(system => {
-      { ref: layerRefs.gmaLayerRef, id: 11, setState: setMarkerStates.setGmaMarkers },
+      const { id, System_Name } = system;
-      { 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 (!layerRefs.current[System_Name]) {
-      if (!ref.current) {
+        layerRefs.current[System_Name] = new L.LayerGroup().addTo(map);
-        ref.current = new L.LayerGroup().addTo(map);
       }
+
+      // Sichtbarkeit prüfen
+      const isVisible = mapLayersVisibility?.[System_Name] ?? false;
+      const layer = layerRefs.current[System_Name];
+      layer.clearLayers();
+
+      createAndSetDevices(
+        id,
+        markers => {
+          setMarkerStates(prev => ({ ...prev, [System_Name]: markers }));
+
+          if (isVisible) {
+            markers.forEach(marker => layer.addLayer(marker));
+          }
+
+          checkOverlappingMarkers(map, markers, plusRoundIcon);
+        },
+        GisSystemStatic,
+        priorityConfig
+      );
     });
-
+  }, [map, GisSystemStatic, mapLayersVisibility, priorityConfig]);
-    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]);
 };

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "03.06.2025 NodeMap",
+  "name": "03.06.2025 NodeMap at home",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {