polylines tooltip content

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;