feat: Added TK component to MapComponent.js

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;