polylines tooltip content

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;