die hooks Layer in den Verzeichnis /hooks/layers verschoben

hooks/layers/useCiscoRouterMarkersLayer.js

@@ -0,0 +1,49 @@
+// hooks/useCiscoRouterMarkersLayer.js
+import { useEffect, useState } from "react";
+import L from "leaflet";
+import { createAndSetMarkers } from "../../utils/markerUtils";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { checkOverlappingMarkers } from "../../utils/mapUtils";
+
+const useCiscoRouterMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
+  const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]);
+
+  useEffect(() => {
+    if (GisSystemStatic && GisSystemStatic.length && map) {
+      createAndSetMarkers(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

@@ -0,0 +1,45 @@
+// hooks/useDauzMarkersLayer.js
+import { useEffect, useState } from "react";
+import L from "leaflet";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { createAndSetMarkers } from "../../utils/markerUtils";
+
+const useDauzMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
+  const [dauzMarkers, setDauzMarkers] = useState([]);
+
+  useEffect(() => {
+    if (GisSystemStatic && GisSystemStatic.length && map) {
+      createAndSetMarkers(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/useEciMarkersLayer.js

@@ -0,0 +1,48 @@
+// /hooks/layers/useEciMarkersLayer.js
+import { useEffect, useState } from "react";
+import L from "leaflet";
+import { createAndSetMarkers } from "../../utils/markerUtils";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { checkOverlappingMarkers } from "../../utils/mapUtils";
+
+const useEciMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
+  const [eciMarkers, setEciMarkers] = useState([]);
+
+  useEffect(() => {
+    if (GisSystemStatic && GisSystemStatic.length && map) {
+      createAndSetMarkers(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

@@ -0,0 +1,64 @@
+// /hooks/layers/useGmaMarkersLayer.js
+import { useEffect } from "react";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+
+const useGmaMarkersLayer = (map, gmaMarkers, GisStationsMeasurements, GMA, oms) => {
+  useEffect(() => {
+    if (map && gmaMarkers.length) {
+      const gmaMeasurements = GisStationsMeasurements.filter((m) => m.Gr === "GMA");
+      let area_name = "";
+      let measurements = {};
+
+      gmaMeasurements.forEach((m) => {
+        area_name = m.Area_Name;
+        measurements[m.Na] = m.Val;
+      });
+
+      gmaMarkers.forEach((marker) => {
+        marker.addTo(map);
+        oms.addMarker(marker);
+
+        // Logging the data to debug
+        //console.log("Marker Data:", { area_name, measurements });
+
+        marker.bindTooltip(
+          `
+            <div class="p-0 rounded-lg bg-white bg-opacity-90">
+              <div class="font-bold text-sm text-black">
+                <span>${area_name}</span> 
+              </div>
+              <div class="font-bold text-xxs text-blue-700">
+                <span>LT : ${measurements.LT} °C</span> 
+              </div>
+              <div class="font-bold text-xxs text-red-700">
+                <span>FBT : ${measurements.FBT} °C</span> 
+              </div>
+              <div class="font-bold text-xxs text-yellow-500">
+                <span>GT : ${measurements.GT === "nicht ermittelbar" ? measurements.GT : `${measurements.GT} °C`}</span> 
+              </div>
+              <div class="font-bold text-xxs text-green-700">
+                <span>RLF : ${measurements.RLF} %</span> 
+              </div>
+            </div>
+          `,
+          {
+            permanent: true,
+            direction: "auto",
+            offset: [20, 0],
+          }
+        );
+
+        marker.on("mouseover", function () {
+          this.openPopup();
+        });
+        marker.on("mouseout", function () {
+          this.closePopup();
+        });
+        addContextMenuToMarker(marker);
+      });
+      map.addLayer(GMA);
+    }
+  }, [map, gmaMarkers, GisStationsMeasurements, GMA, oms]);
+};
+
+export default useGmaMarkersLayer;

hooks/layers/useGsmModemMarkersLayer.js

@@ -0,0 +1,47 @@
+// hooks/useGsmModemMarkersLayer.js
+import { useEffect, useState } from "react";
+import L from "leaflet";
+import { createAndSetMarkers } from "../../utils/markerUtils";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { checkOverlappingMarkers } from "../../utils/mapUtils";
+
+const useGsmModemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
+  const [gsmModemMarkers, setGsmModemMarkers] = useState([]);
+
+  useEffect(() => {
+    if (GisSystemStatic && GisSystemStatic.length && map) {
+      createAndSetMarkers(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem
+    }
+  }, [GisSystemStatic, map, priorityConfig]);
+
+  useEffect(() => {
+    if (map && gsmModemMarkers.length) {
+      gsmModemMarkers.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, gsmModemMarkers]);
+
+  return gsmModemMarkers;
+};
+export default useGsmModemMarkersLayer;

hooks/layers/useMessstellenMarkersLayer.js

@@ -0,0 +1,38 @@
+// /hooks/layers/useMessstellenMarkersLayer.js
+import { useEffect, useState } from "react";
+import L from "leaflet";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { createAndSetMarkers } from "../../utils/markerUtils";
+
+const useMessstellenMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
+  const [messstellenMarkers, setMessstellenMarkers] = useState([]);
+
+  useEffect(() => {
+    if (GisSystemStatic && GisSystemStatic.length && map) {
+      createAndSetMarkers(13, setMessstellenMarkers, GisSystemStatic, priorityConfig); // Messstellen
+    }
+  }, [GisSystemStatic, map, priorityConfig]);
+
+  useEffect(() => {
+    if (map && messstellenMarkers.length) {
+      messstellenMarkers.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);
+      });
+    }
+  }, [map, messstellenMarkers, oms]);
+
+  return messstellenMarkers;
+};
+
+export default useMessstellenMarkersLayer;

hooks/layers/useOtdrMarkersLayer.js

@@ -0,0 +1,45 @@
+// hooks/useOtdrMarkersLayer.js
+import { useEffect, useState } from "react";
+import L from "leaflet";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { createAndSetMarkers } from "../../utils/markerUtils"; // Assuming this function is in markerUtils
+
+const useOtdrMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
+  const [otdrMarkers, setOtdrMarkers] = useState([]);
+
+  useEffect(() => {
+    if (GisSystemStatic && GisSystemStatic.length && map) {
+      createAndSetMarkers(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

@@ -0,0 +1,49 @@
+// hooks/useSiemensMarkersLayer.js
+import { useState, useEffect } from "react";
+import L from "leaflet";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { createAndSetMarkers } from "../../utils/markerUtils";
+import { checkOverlappingMarkers } from "../../utils/mapUtils";
+
+const useSiemensMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => {
+  const [siemensMarkers, setSiemensMarkers] = useState([]);
+
+  useEffect(() => {
+    if (gisSystemStatic && gisSystemStatic.length && map) {
+      createAndSetMarkers(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

@@ -0,0 +1,54 @@
+// hooks/useSmsfunkmodemMarkersLayer.js
+import { useEffect, useState } from "react";
+import L from "leaflet";
+import "leaflet-contextmenu";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+
+const useSmsfunkmodemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
+  const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);
+
+  useEffect(() => {
+    if (map && GisSystemStatic) {
+      const markers = GisSystemStatic.filter((station) => station.System === 111).map((station) => {
+        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>
+        `);
+
+        marker.on("mouseover", function () {
+          this.openPopup();
+        });
+
+        marker.on("mouseout", function () {
+          this.closePopup();
+        });
+
+        addContextMenuToMarker(marker);
+
+        return marker;
+      });
+
+      setSmsfunkmodemMarkers(markers);
+      markers.forEach((marker) => {
+        marker.addTo(map);
+        oms.addMarker(marker);
+      });
+    }
+  }, [map, GisSystemStatic, priorityConfig]);
+
+  return smsfunkmodemMarkers;
+};
+
+export default useSmsfunkmodemMarkersLayer;

hooks/layers/useSonstigeMarkersLayer.js

@@ -0,0 +1,45 @@
+// hooks/useSonstigeMarkersLayer.js
+import { useEffect, useState } from "react";
+import L from "leaflet";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { createAndSetMarkers } from "../../utils/markerUtils";
+
+const useSonstigeMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
+  const [sonstigeMarkers, setSonstigeMarkers] = useState([]);
+
+  useEffect(() => {
+    if (GisSystemStatic && GisSystemStatic.length && map) {
+      createAndSetMarkers(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/useTalasMarkers.js

@@ -0,0 +1,102 @@
+// /hooks/useTalasMarkers.js
+import { useEffect, useState } from "react";
+import L from "leaflet";
+import "leaflet-contextmenu";
+import { useRecoilValue } from "recoil";
+import { mapLayersState } from "../../store/atoms/mapLayersState.js";
+import { selectedAreaState } from "../../store/atoms/selectedAreaState.js";
+import { zoomTriggerState } from "../../store/atoms/zoomTriggerState.js";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils.js";
+import { checkOverlappingMarkers } from "../../utils/mapUtils.js";
+import plusRoundIcon from "../../components/PlusRoundIcon.js";
+import { gisStationsStaticDistrictState } from "../../store/atoms/gisStationState.js";
+
+const useTalasMarkers = (map, oms, layers, priorityConfig) => {
+  const [talasMarkers, setTalasMarkers] = useState([]);
+  const mapLayersVisibility = useRecoilValue(mapLayersState);
+  const selectedArea = useRecoilValue(selectedAreaState);
+  const zoomTrigger = useRecoilValue(zoomTriggerState);
+  const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);
+
+  // Funktion zum Erstellen und Setzen der Marker
+  const createAndSetMarkers = (systemId, setMarkers, GisSystemStatic, priorityConfig) => {
+    const markers = GisSystemStatic.filter((station) => station.System === systemId).map((station) => {
+      const marker = L.marker([station.Latitude, station.Longitude], {
+        title: station.Name,
+        contextmenu: true,
+        contextmenuItems: [],
+      });
+
+      marker.bindPopup(`<b>${station.Name}</b><br>${station.Description}`);
+
+      if (priorityConfig.includes(station.Priority)) {
+        marker.setIcon(
+          L.icon({
+            iconUrl: `/icons/priority_${station.Priority}.png`,
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            popupAnchor: [1, -34],
+          })
+        );
+      }
+
+      return marker;
+    });
+
+    setMarkers(markers);
+  };
+
+  useEffect(() => {
+    if (map && talasMarkers.length) {
+      talasMarkers.forEach((marker) => {
+        marker.addTo(map);
+        oms.addMarker(marker);
+
+        marker.on("mouseover", function () {
+          this.openPopup();
+        });
+        marker.on("mouseout", function () {
+          this.closePopup();
+        });
+
+        addContextMenuToMarker(marker);
+      });
+
+      map.addLayer(layers.TALAS);
+      checkOverlappingMarkers(oms, map, plusRoundIcon);
+    }
+  }, [map, talasMarkers]);
+
+  useEffect(() => {
+    if (!map || !talasMarkers) return;
+
+    const toggleLayer = (isVisible) => {
+      if (isVisible) {
+        talasMarkers.forEach((marker) => marker.addTo(map));
+      } else {
+        talasMarkers.forEach((marker) => map.removeLayer(marker));
+      }
+    };
+
+    toggleLayer(mapLayersVisibility.TALAS);
+  }, [map, talasMarkers, mapLayersVisibility.TALAS]);
+
+  useEffect(() => {
+    if (selectedArea && map) {
+      const station = GisStationsStaticDistrict.find((s) => s.Area_Name === selectedArea);
+      if (station) {
+        map.flyTo([station.X, station.Y], 14);
+      }
+    }
+  }, [selectedArea, map, GisStationsStaticDistrict]);
+
+  useEffect(() => {
+    if (zoomTrigger && map) {
+      map.flyTo([51.41321407879154, 7.739617925303934], 7);
+    }
+  }, [zoomTrigger, map]);
+
+  return [talasMarkers, setTalasMarkers, createAndSetMarkers];
+};
+
+export default useTalasMarkers;

hooks/layers/useTalasMarkersLayer.js

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import L from "leaflet";
+import { createAndSetMarkers } from "../../utils/markerUtils";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { checkOverlappingMarkers } from "../../utils/mapUtils";
+
+const useTalasMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
+  const [talasMarkers, setTalasMarkers] = useState([]);
+
+  useEffect(() => {
+    if (GisSystemStatic && GisSystemStatic.length && map) {
+      createAndSetMarkers(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System
+    }
+  }, [GisSystemStatic, map, priorityConfig]);
+
+  useEffect(() => {
+    if (map && talasMarkers.length) {
+      talasMarkers.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, talasMarkers]);
+
+  return talasMarkers;
+};
+
+export default useTalasMarkersLayer;

hooks/layers/useTalasiclMarkersLayer.js

@@ -0,0 +1,45 @@
+// hooks/useTalasiclMarkersLayer.js
+import { useEffect, useState } from "react";
+import L from "leaflet";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { createAndSetMarkers } from "../../utils/markerUtils";
+
+const useTalasiclMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
+  const [talasiclMarkers, setTalasiclMarkers] = useState([]);
+
+  useEffect(() => {
+    if (GisSystemStatic && GisSystemStatic.length && map) {
+      createAndSetMarkers(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/useUlafMarkersLayer.js

@@ -0,0 +1,76 @@
+// hooks/useUlafMarkersLayer.js
+import { useEffect, useState } from "react";
+import L from "leaflet";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+//import { fetchDeviceNameById } from "../services/apiService";
+
+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

@@ -0,0 +1,49 @@
+// hooks/useWagoMarkersLayer.js
+import { useState, useEffect } from "react";
+import L from "leaflet";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { createAndSetMarkers } from "../../utils/markerUtils";
+import { checkOverlappingMarkers } from "../../utils/mapUtils";
+
+const useWagoMarkersLayer = (map, oms, gisSystemStatic, priorityConfig) => {
+  const [wagoMarkers, setWagoMarkers] = useState([]);
+
+  useEffect(() => {
+    if (gisSystemStatic && gisSystemStatic.length && map) {
+      createAndSetMarkers(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

@@ -0,0 +1,45 @@
+// hooks/useWdmMarkersLayer.js
+import { useEffect, useState } from "react";
+import L from "leaflet";
+import { addContextMenuToMarker } from "../../utils/contextMenuUtils";
+import { createAndSetMarkers } from "../../utils/markerUtils";
+
+const useWdmMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
+  const [wdmMarkers, setWdmMarkers] = useState([]);
+
+  useEffect(() => {
+    if (GisSystemStatic && GisSystemStatic.length && map) {
+      createAndSetMarkers(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;