feat: Added TK component to MapComponent.js

.env.local

@@ -28,7 +28,7 @@ DB_PORT=3306
 #NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
 #NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70"
 #NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"
-NEXT_PUBLIC_ONLINE_TILE_LAYER="http://127.0.0.1:3000/mapTiles/{z}/{x}/{y}.png"
+#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://127.0.0.1:3000/mapTiles/{z}/{x}/{y}.png"
 #########################
 
 #DB_HOST=192.168.10.168
@@ -44,4 +44,4 @@ NEXT_PUBLIC_ONLINE_TILE_LAYER="http://127.0.0.1:3000/mapTiles/{z}/{x}/{y}.png"
 #NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"
 
 ######################### online
-#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

components/MapComponent.js

@@ -44,6 +44,7 @@ import { addItemsToMapContextMenu } from "./useMapContextMenu.js";
 import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook
 import useTalasMarkersLayer from "../hooks/layers/useTalasMarkersLayer.js"; // Import the custom hook
 import useEciMarkersLayer from "../hooks/layers/useEciMarkersLayer.js";
+import useTkComponentsMarkersLayer from "../hooks/layers/useTkComponentsMarkersLayer.js";
 import useGsmModemMarkersLayer from "../hooks/layers/useGsmModemMarkersLayer.js";
 import useCiscoRouterMarkersLayer from "../hooks/layers/useCiscoRouterMarkersLayer.js";
 //import useLteModemMarkersLayer from "../hooks/layers/useLteModemMarkersLayer";
@@ -119,22 +120,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl;
   const webserviceGisLinesStatusUrl = config.webserviceGisLinesStatusUrl;
   //console.log("priorityConfig in MapComponent1: ", priorityConfig);
-  /*  
-  const talasMarkers = useTalasMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
-  const eciMarkers = useEciMarkersLayer(map, eciMarkers, oms, layers.MAP_LAYERS.ECI);
-  const gsmModemMarkers = useGsmModemMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
-  const ciscoRouterMarkers = useCiscoRouterMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
-  const wagoMarkers = useWagoMarkersLayer(map, oms, GisSystemStatic, priorityConfig);
-  const siemensMarkers = useSiemensMarkersLayer(map, oms, GisSystemStatic, priorityConfig);
-  const otdrMarkers = useOtdrMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
-  const wdmMarkers = useWdmMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
-  const messstellenMarkers = useMessstellenMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
-  const talasiclMarkers = useTalasiclMarkersLayer(map, oms, GisSystemStatic, priorityConfig);
-  const dauzMarkers = useDauzMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
-  const smsfunkmodemMarkers = useSmsfunkmodemMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook
-  const ulafMarkers = useUlafMarkersLayer(map, oms, GisSystemStatic, priorityConfig);
-  const sonstigeMarkers = useSonstigeMarkersLayer(map, oms, GisSystemStatic, priorityConfig); // Use the new custom hook 
-  */
 
   const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11 alle sind untetschiedlich Nummern
   const [talasMarkers, setTalasMarkers] = useState([]);
@@ -151,6 +136,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);
   const [ulafMarkers, setUlafMarkers] = useState([]);
   const [sonstigeMarkers, setSonstigeMarkers] = useState([]);
+  const [tkComponentsMarkers, setTkComponentsMarkers] = useState([]);
   //const [lteModemMarkers, setLteModemMarkers] = useState([]);
 
   const [lineStatusData, setLineStatusData] = useState([]);
@@ -407,24 +393,6 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
   //console.log("priorityConfig in MapComponent2: ", priorityConfig);
   useEffect(() => {
     if (gisSystemStaticLoaded && map) {
-      /* damit nich doppelt vorkommen
-      createAndSetDevices(11, setGmaMarkers, GisSystemStatic, priorityConfig); // GMA-System
-      createAndSetDevices(1, setTalasMarkers, GisSystemStatic, priorityConfig); // TALAS-System
-      createAndSetDevices(2, setEciMarkers, GisSystemStatic, priorityConfig); // ECI-System
-      createAndSetDevices(5, setGsmModemMarkers, GisSystemStatic, priorityConfig); // GSM-Modem-System---LTE Modem und GSM Modem sind gleich
-      //createAndSetDevices(5, setLteModemMarkers, GisSystemStatic, priorityConfig); //LTE Modem----------LTE Modem und GSM Modem sind gleich
-      createAndSetDevices(6, setCiscoRouterMarkers, GisSystemStatic, priorityConfig); // Cisco-Router-System
-      createAndSetDevices(7, setWagoMarkers, GisSystemStatic, priorityConfig); // WAGO-System
-      createAndSetDevices(8, setSiemensMarkers, GisSystemStatic, priorityConfig); // Siemens-System
-      createAndSetDevices(9, setOtdrMarkers, GisSystemStatic, priorityConfig); // OTDR-System
-      createAndSetDevices(10, setWdmMarkers, GisSystemStatic, priorityConfig); // WDM-System
-      createAndSetDevices(13, setMessstellenMarkers, GisSystemStatic, priorityConfig); // Messstellen-System
-      createAndSetDevices(100, setTalasiclMarkers, GisSystemStatic, priorityConfig); // TALASICL-System
-      createAndSetDevices(110, setDauzMarkers, GisSystemStatic, priorityConfig); // DAUZ-System
-      createAndSetDevices(111, setSmsfunkmodemMarkers, GisSystemStatic, priorityConfig); // SMS-Funkmodem-System
-      createAndSetDevices(200, setSonstigeMarkers, GisSystemStatic, priorityConfig); // Sonstige-System
-      createAndSetDevices(0, setUlafMarkers, GisSystemStatic, priorityConfig); // ULAF-System
-       */
     }
   }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
 
@@ -442,6 +410,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
   useLayerVisibility(map, wdmMarkers, mapLayersVisibility, "WDM", oms);
   useLayerVisibility(map, gmaMarkers, mapLayersVisibility, "GMA", oms);
   useLayerVisibility(map, sonstigeMarkers, mapLayersVisibility, "Sonstige", oms);
+  useLayerVisibility(map, tkComponentsMarkers, mapLayersVisibility, "TKComponents", oms);
   useLayerVisibility(map, talasiclMarkers, mapLayersVisibility, "TALASICL", oms);
   useLayerVisibility(map, dauzMarkers, mapLayersVisibility, "DAUZ", oms);
   useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSModem", oms);
@@ -481,12 +450,31 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
         ...dauzMarkers,
         ...smsfunkmodemMarkers,
         ...sonstigeMarkers,
+        ...tkComponentsMarkers,
         ...ulafMarkers,
       ];
       // Überprüfe überlappende Marker und füge das "Plus"-Icon hinzu
       checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
     }
-  }, [map, talasMarkers, eciMarkers, gsmModemMarkers, ciscoRouterMarkers, wagoMarkers, siemensMarkers, otdrMarkers, wdmMarkers, gmaMarkers, messstellenMarkers, talasiclMarkers, dauzMarkers, smsfunkmodemMarkers, sonstigeMarkers, ulafMarkers]);
+  }, [
+    map,
+    talasMarkers,
+    eciMarkers,
+    gsmModemMarkers,
+    ciscoRouterMarkers,
+    wagoMarkers,
+    siemensMarkers,
+    otdrMarkers,
+    wdmMarkers,
+    gmaMarkers,
+    messstellenMarkers,
+    talasiclMarkers,
+    dauzMarkers,
+    smsfunkmodemMarkers,
+    sonstigeMarkers,
+    tkComponentsMarkers,
+    ulafMarkers,
+  ]);
 
   //--------------------------------------------
   useEffect(() => {
@@ -746,6 +734,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
   const smsfunkmodemMarkersLayerRef = useRef(null);
   const ulafMarkersLayerRef = useRef(null);
   const sonstigeMarkersLayerRef = useRef(null);
+  const tkComponentsMarkersRef = useRef(null);
   useEffect(() => {
     if (!gisSystemStaticLoaded || !map) return; // Sicherstellen, dass die Karte und Daten geladen sind
 
@@ -765,6 +754,7 @@ await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStat
       { ref: smsfunkmodemMarkersLayerRef, id: 111, setState: setSmsfunkmodemMarkers },
       { ref: ulafMarkersLayerRef, id: 0, setState: setUlafMarkers },
       { ref: sonstigeMarkersLayerRef, id: 200, setState: setSonstigeMarkers },
+      { ref: tkComponentsMarkersRef, id: 30, setState: setTkComponentsMarkers },
     ];
 
     // Initialisiere LayerGroups nur einmal

hooks/layers/useTkComponentsMarkersLayer.js

@@ -0,0 +1,48 @@
+// /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, 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;