polylines tooltip content

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;