polylines tooltip content

hooks/talasMarkersLayer.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/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/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/useEciMarkersLayer.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 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/useFetchPoiData.js

@@ -0,0 +1,25 @@
+// hooks/useFetchPoiData.js
+import { useState, useEffect } from "react";
+
+const useFetchPoiData = (url) => {
+  const [poiData, setPoiData] = useState([]);
+
+  useEffect(() => {
+    const fetchPoiData = async () => {
+      try {
+        const response = await fetch(url);
+        if (!response.ok) throw new Error("Network response was not ok");
+        const data = await response.json();
+        setPoiData(data);
+      } catch (error) {
+        console.error("Fehler beim Abrufen der poiData:", error);
+      }
+    };
+
+    fetchPoiData();
+  }, [url]);
+
+  return poiData;
+};
+
+export default useFetchPoiData;

hooks/useGmaMarkersLayer.js

@@ -0,0 +1,63 @@
+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/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/useLayerVisibility.js

@@ -0,0 +1,24 @@
+// hooks/useLayerVisibility.js
+import { useEffect } from "react";
+import { useRecoilValue } from "recoil";
+import { mapLayersState } from "../store/atoms/mapLayersState";
+
+const useLayerVisibility = (map, markers, mapLayersVisibility, layerKey) => {
+  useEffect(() => {
+    if (!map || !markers) return;
+
+    const toggleLayer = (isVisible) => {
+      markers.forEach((marker) => {
+        if (isVisible) {
+          marker.addTo(map);
+        } else {
+          map.removeLayer(marker);
+        }
+      });
+    };
+
+    toggleLayer(mapLayersVisibility[layerKey]);
+  }, [map, markers, mapLayersVisibility, layerKey]);
+};
+
+export default useLayerVisibility;

hooks/useLineData - Kopie.js

@@ -0,0 +1,64 @@
+// /hooks/useLineData.js
+import { useEffect, useState } from "react";
+import { SERVER_URL } from "../config/urls";
+
+const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
+  const [lineColors, setLineColors] = useState({});
+  const [tooltipContents, setTooltipContents] = useState({});
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response1 = await fetch(webserviceGisLinesStatusUrl);
+        const data1 = await response1.json();
+        const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`);
+        const data2 = await response2.json();
+
+        const colorsByModule = {};
+        const newTooltipContents = {};
+        const reversedData = data1.Statis ? data1.Statis.reverse() : [];
+        reversedData.forEach((stat) => {
+          const matchingLine = data2.find((item) => item.idLD === stat.IdLD && item.idModul === stat.Modul);
+          if (matchingLine) {
+            // Check if PrioColor is #ffffff and change it to green
+            const prioColor = stat.PrioColor === "#ffffff" ? "green" : stat.PrioColor;
+
+            colorsByModule[matchingLine.idModul] = prioColor;
+            newTooltipContents[matchingLine.idModul] = `
+              <div class="bg-white rounded-lg m-0 p-2 w-[210px]">
+                  <span class="text-lg font-semibold text-gray-900">${stat.ModulName || "Unknown"}</span>
+                  <br>
+                  <span class="text-md font-bold text-gray-800">${stat.ModulTyp || "N/A"}</span>
+                  <br>
+                     <span class="text-md font-bold text-gray-800">Slot: ${stat.Modul || "N/A"}</span>
+                  <br>
+                  <div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
+                      <span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${prioColor || "#000000"};"></span>
+                      <span class="inline-block text-gray-800">${stat.Message || "N/A"}</span>
+                  </div>
+                  <span class="text-gray-800" style="color: ${prioColor || "#000000"};">(${stat.PrioName || "N/A"})</span>
+                  <br>
+                  <div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
+                      <span class="inline-block text-gray-800">${stat.DpName || "N/A"}</span>
+                      : <span class="inline-block text-gray-800">${stat.Value || "N/A"}</span>
+                  </div>
+              </div>
+            `;
+          }
+        });
+
+        setLineColors(colorsByModule);
+        setTooltipContents(newTooltipContents);
+        setLineStatusData(reversedData);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+
+    fetchData();
+  }, [webserviceGisLinesStatusUrl, setLineStatusData]);
+
+  return { lineColors, tooltipContents };
+};
+
+export default useLineData;

hooks/useLineData - stationname.js

@@ -0,0 +1,93 @@
+// /hooks/useLineData.js
+import { useEffect, useState } from "react";
+import { SERVER_URL } from "../config/urls";
+
+const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
+  const [lineColors, setLineColors] = useState({});
+  const [tooltipContents, setTooltipContents] = useState({});
+  const [locationDevices, setLocationDevices] = useState([]);
+
+  // Funktion zum Abrufen der Stationsnamen
+  useEffect(() => {
+    const fetchLocationDevices = async () => {
+      try {
+        const response = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}:3000/api/talas_v5_DB/station/getStationNameByIdLD`);
+        const data = await response.json();
+        setLocationDevices(data);
+        console.log("Stationen namen:", data);
+      } catch (error) {
+        console.error("Fehler beim Abrufen der Stationen:", error);
+      }
+    };
+
+    fetchLocationDevices();
+  }, []);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response1 = await fetch(webserviceGisLinesStatusUrl);
+        const data1 = await response1.json();
+        const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`);
+        const data2 = await response2.json();
+
+        const colorsByModule = {};
+        const newTooltipContents = {};
+        const reversedData = data1.Statis ? data1.Statis.reverse() : [];
+
+        reversedData.forEach((stat) => {
+          // Finden der passenden Linie
+          const matchingLine = data2.find((item) => item.idLD === stat.IdLD && item.idModul === stat.Modul);
+
+          if (matchingLine) {
+            // Ermitteln der Farbe basierend auf PrioColor
+            const prioColor = stat.PrioColor === "#ffffff" ? "green" : stat.PrioColor;
+            colorsByModule[matchingLine.idModul] = prioColor;
+
+            // Finden des passenden Stationsnamens
+            const locationDevice = locationDevices.find((device) => device.idLD === stat.IdLD);
+
+            newTooltipContents[matchingLine.idModul] = `
+              <div class="bg-white rounded-lg m-0 p-2 w-[210px]">
+                  <span class="text-lg font-semibold text-gray-900">${stat.ModulName || "Unknown"}</span>
+                  <br>
+                  <span class="text-md font-bold text-gray-800">Station: ${locationDevice ? locationDevice.name : "Unbekannt"}</span>
+                  <br>
+                  <span class="text-md font-bold text-gray-800">${stat.ModulTyp || "N/A"}</span>
+                  <br>
+                  <span class="text-md font-bold text-gray-800">Slot: ${stat.Modul || "N/A"}</span>
+                  <br>
+                  <div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
+                      <span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${prioColor || "#000000"};"></span>
+                      <span class="inline-block text-gray-800">${stat.Message || "N/A"}</span>
+                  </div>
+                  <span class="text-gray-800" style="color: ${prioColor || "#000000"};">(${stat.PrioName || "N/A"})</span>
+                  <br>
+                  <div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
+                      <span class="inline-block text-gray-800">${stat.DpName || "N/A"}</span>
+                      : <span class="inline-block text-gray-800">${stat.Value || "N/A"}</span>
+                  </div>
+              </div>
+            `;
+          }
+        });
+
+        setLineColors(colorsByModule);
+        setTooltipContents(newTooltipContents);
+        setLineStatusData(reversedData);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+
+    fetchData();
+
+    const interval = setInterval(fetchData, 300000); // 300000 ms = 5 Minuten
+
+    return () => clearInterval(interval);
+  }, [webserviceGisLinesStatusUrl, setLineStatusData, locationDevices]);
+
+  return { lineColors, tooltipContents };
+};
+
+export default useLineData;

hooks/useLineData.js

@@ -0,0 +1,152 @@
+// /hooks/useLineData.js
+import { useEffect, useState } from "react";
+import { SERVER_URL } from "../config/urls";
+
+const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
+  const [lineColors, setLineColors] = useState({});
+  const [tooltipContents, setTooltipContents] = useState({});
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        console.log("Daten werden abgerufen...");
+        const response1 = await fetch(webserviceGisLinesStatusUrl);
+        const data1 = await response1.json();
+        console.log("Daten vom Webservice:", data1);
+        const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`);
+        const data2 = await response2.json();
+        console.log("GIS Linien Daten:", data2);
+
+        const colorsByModule = {};
+        const newTooltipContents = {};
+        const valueMap = {};
+
+        // Hier führen wir die Gruppierung durch und loggen sie
+        logGroupedData(data1.Statis);
+
+        data1.Statis.forEach((statis) => {
+          const key = `${statis.IdLD}-${statis.Modul}`;
+          if (!valueMap[key]) {
+            valueMap[key] = {
+              messages: [],
+              messwert: undefined,
+              schleifenwert: undefined,
+            };
+          }
+          if (statis.DpName.includes("_Messwert") && statis.Value !== "True" && valueMap[key].messwert === undefined) {
+            valueMap[key].messwert = statis.Value;
+          }
+          if (statis.DpName.includes("_Schleifenwert") && valueMap[key].schleifenwert === undefined) {
+            valueMap[key].schleifenwert = statis.Value;
+          }
+          if (statis.Message && statis.Message !== "?") {
+            valueMap[key].messages.push(statis.Message);
+          }
+        });
+
+        data1.Statis.reverse().forEach((statis) => {
+          const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul);
+          if (matchingLine) {
+            const prioColor = statis.PrioColor === "#ffffff" ? "green" : statis.PrioColor;
+            const key = `${matchingLine.idLD}-${matchingLine.idModul}`;
+            const values = valueMap[key];
+
+            const messageDisplay = values.messages.map((msg) => (msg ? `<span class="inline-block text-gray-800">${msg}</span><br>` : "")).join("");
+            const prioNameDisplay = statis.PrioName && statis.PrioName !== "?" ? `(${statis.PrioName})` : "";
+
+            colorsByModule[matchingLine.idModul] = prioColor;
+            newTooltipContents[matchingLine.idModul] = `
+              <div class="bg-white rounded-lg m-0 p-2 w-[210px]">
+                  <span class="text-lg font-semibold text-gray-900">${statis.ModulName || "Unknown"}</span>
+                  <br>
+                  <span class="text-md font-bold text-gray-800">${statis.ModulTyp || "N/A"}</span>
+                  <br>
+                  <span class="text-md font-bold text-gray-800">Slot: ${statis.Modul || "N/A"}</span>
+                  <br>
+                  <div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
+                      <span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${prioColor || "#000000"};"></span>
+                      ${messageDisplay}
+                  </div>
+                  <span class="text-gray-800" style="color: ${prioColor || "#000000"};">${prioNameDisplay}</span>
+                  <br>
+                  ${values.messwert ? `<span class="inline-block text-gray-800">Messwert: ${values.messwert}</span><br>` : ""}
+                  ${values.schleifenwert ? `<span class="inline-block text-gray-800">Schleifenwert: ${values.schleifenwert}</span>` : ""}
+              </div>
+            `;
+          }
+        });
+
+        setLineColors(colorsByModule);
+        setTooltipContents(newTooltipContents);
+        setLineStatusData(data1.Statis);
+      } catch (error) {
+        console.error("Fehler beim Abrufen der Daten:", error);
+      }
+    };
+
+    fetchData();
+  }, [webserviceGisLinesStatusUrl, setLineStatusData]);
+
+  return { lineColors, tooltipContents };
+};
+//----------------------------------------------------------
+// Funktion zum Loggen der gruppierten und aggregierten Daten
+function logGroupedData(statisList) {
+  const grouped = statisList.reduce((acc, item) => {
+    const { IdLD, Modul, Level, PrioColor, PrioName, ModulName, ModulTyp, Message } = item;
+
+    if (!acc[IdLD]) {
+      acc[IdLD] = {};
+    }
+
+    if (!acc[IdLD][Modul]) {
+      acc[IdLD][Modul] = {
+        ModulName: ModulName || "Unknown",
+        ModulTyp: ModulTyp || "N/A",
+        TotalLevel: 0,
+        PrioColors: new Set(),
+        PrioNames: new Set(),
+        Messages: [],
+      };
+    }
+
+    // Aggregiere die Level und sammle Prioritätsinformationen und Nachrichten
+    acc[IdLD][Modul].TotalLevel += Level;
+    acc[IdLD][Modul].PrioColors.add(PrioColor);
+    acc[IdLD][Modul].PrioNames.add(PrioName);
+    if (Message && Message !== "?") {
+      acc[IdLD][Modul].Messages.push(Message);
+    }
+
+    return acc;
+  }, {});
+
+  // Formatierte Ausgabe der gruppierten Daten, Entfernen von Modulen ohne Namen und Stationen mit leeren Arrays
+  const formattedData = {};
+  Object.entries(grouped).forEach(([stationId, modules]) => {
+    const filteredModules = Object.entries(modules)
+      .filter(([modulId, data]) => data.ModulName !== "?")
+      .map(([modulId, data]) => ({
+        Modul: modulId,
+        ModulName: data.ModulName,
+        ModulTyp: data.ModulTyp,
+        TotalLevel: data.TotalLevel,
+        PrioColors: Array.from(data.PrioColors).join(", "),
+        PrioNames: Array.from(data.PrioNames).join(", "),
+        Messages: data.Messages.join(" | "),
+      }));
+
+    if (filteredModules.length > 0) {
+      formattedData[stationId] = filteredModules;
+    }
+  });
+
+  console.log("Aggregierte und gruppierte Daten (gefiltert):", formattedData);
+}
+
+// Beispielaufruf der Funktion
+// const statisList = data1.Statis; // Verwende die Liste aus deinem API-Aufruf
+// logGroupedData(statisList);
+
+//----------------------------------------------------------
+export default useLineData;

hooks/useMapComponentState.js

@@ -0,0 +1,28 @@
+// hooks/useMapComponentState.js
+import { useState, useRef } from "react";
+import usePoiTypData from "./usePoiTypData";
+import { useRecoilValue } from "recoil";
+import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState";
+
+export const useMapComponentState = () => {
+  const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp");
+  const [deviceName, setDeviceName] = useState("");
+  const [locationDeviceData, setLocationDeviceData] = useState([]);
+  const [priorityConfig, setPriorityConfig] = useState([]);
+  const [menuItemAdded, setMenuItemAdded] = useState(false);
+  const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
+
+  return {
+    poiTypData,
+    isPoiTypLoaded,
+    deviceName,
+    setDeviceName,
+    locationDeviceData,
+    setLocationDeviceData,
+    priorityConfig,
+    setPriorityConfig,
+    menuItemAdded,
+    setMenuItemAdded,
+    poiLayerVisible,
+  };
+};

hooks/useMarkerLayers.js

@@ -0,0 +1,26 @@
+// hooks/useMarkerLayers.js
+import { useEffect } from "react";
+import { useRecoilValue } from "recoil";
+import { mapLayersState } from "../store/atoms/mapLayersState";
+
+const useMarkerLayers = (map, markers, layerType) => {
+  const mapLayersVisibility = useRecoilValue(mapLayersState);
+
+  useEffect(() => {
+    if (!map || !markers) return;
+
+    const toggleLayer = (isVisible) => {
+      markers.forEach((marker) => {
+        if (isVisible) {
+          marker.addTo(map);
+        } else {
+          map.removeLayer(marker);
+        }
+      });
+    };
+
+    toggleLayer(mapLayersVisibility[layerType]);
+  }, [map, markers, mapLayersVisibility, layerType]);
+};
+
+export default useMarkerLayers;

hooks/useMessstellenMarkersLayer.js

@@ -0,0 +1,37 @@
+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/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/usePoiTypData.js

@@ -0,0 +1,26 @@
+// hooks/usePoiTypData.js
+import { useState, useEffect } from "react";
+
+const usePoiTypData = (url) => {
+  const [poiTypData, setPoiTypData] = useState([]);
+  const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
+
+  useEffect(() => {
+    const fetchPoiTypData = async () => {
+      try {
+        const response = await fetch(url);
+        const data = await response.json();
+        setPoiTypData(data);
+        setIsPoiTypLoaded(true);
+      } catch (error) {
+        console.error("Fehler beim Abrufen der poiTyp-Daten:", error);
+      }
+    };
+
+    fetchPoiTypData();
+  }, [url]);
+
+  return { poiTypData, isPoiTypLoaded };
+};
+
+export default usePoiTypData;

hooks/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/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/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/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/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/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/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/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;