feat: Polyline-Tooltip-Logik ausgelagert in usePolylineTooltipLayer Hook

- Tooltip-Logik für Polylinien aus MapComponent.js in eigenen Hook ausgelagert.
- Neuer Hook: usePolylineTooltipLayer im hooks-Verzeichnis hinzugefügt.
- Dynamische Tooltip-Ausrichtung basierend auf Mausposition implementiert.
- Flexibilität für zukünftige Anpassungen verbessert.

components/MapComponent.js

@@ -43,6 +43,7 @@ import useLineData from "../hooks/useLineData.js";
 import { useMapComponentState } from "../hooks/useMapComponentState";
 import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
 import { updateLocation } from "../utils/updateBereichUtil";
+import { usePolylineTooltipLayer } from "../hooks/usePolylineTooltipLayer";
 //--------------------------------------------
 import { currentPoiState } from "../redux/slices/currentPoiSlice.js";
 import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice";
@@ -480,7 +481,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, []);
   //--------------------------------------------
   //Tooltip an mouse position anzeigen für die Linien
-  useEffect(() => {
+/*   useEffect(() => {
     if (!map) return;
 
     // Entferne alte Marker und Polylinien
@@ -541,8 +542,23 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
     setMarkers(newMarkers);
     setPolylines(newPolylines);
-  }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]);
+  }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]); */
 
+  usePolylineTooltipLayer(  
+    map,
+    markers,
+    polylines,
+    setMarkers,
+    setPolylines,
+    linePositions,
+    lineColors,
+    tooltipContents,
+    setNewCoords,
+    tempMarker,
+    polylineVisible,
+    newPoint,
+    newCoords 
+   );
   //--------------------------------------------
 
   useEffect(() => {

hooks/usePolylineTooltipLayer.js

@@ -0,0 +1,84 @@
+// hooks/usePolylineTooltipLayer.js
+import { useEffect } from "react";
+import L from "leaflet";
+import { setupPolylines } from "../utils/setupPolylines";
+
+
+export const usePolylineTooltipLayer = (
+    map,
+    markers,
+    polylines,
+    setMarkers,
+    setPolylines,
+    linePositions,
+    lineColors,
+    tooltipContents,
+    setNewCoords,
+    tempMarker,
+    polylineVisible,
+    newPoint,
+    newCoords 
+) => {
+  useEffect(() => {
+    if (!map) return;
+
+    // Entferne alte Marker und Polylinien
+    markers.forEach((marker) => marker.remove());
+    polylines.forEach((polyline) => polyline.remove());
+
+    // Setze neue Marker und Polylinien mit den aktuellen Daten
+    const { markers: newMarkers, polylines: newPolylines } = setupPolylines(
+      map,
+      linePositions,
+      lineColors,
+      tooltipContents,
+      setNewCoords,
+      tempMarker,
+      polylineVisible // polylineVisible wird jetzt korrekt übergeben
+    );
+
+    newPolylines.forEach((polyline, index) => {
+      const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Standard-Tooltip-Inhalt";
+
+      polyline.bindTooltip(tooltipContent, {
+        permanent: false,
+        direction: "auto",
+        sticky: true,
+        offset: [20, 0],
+        pane: "tooltipPane",
+      });
+
+      polyline.on("mouseover", (e) => {
+        const tooltip = polyline.getTooltip();
+        if (tooltip) {
+          const mousePos = e.containerPoint;
+          const mapSize = map.getSize();
+
+          let direction = "right";
+
+          if (mousePos.x > mapSize.x - 100) {
+            direction = "left";
+          } else if (mousePos.x < 100) {
+            direction = "right";
+          }
+
+          if (mousePos.y > mapSize.y - 100) {
+            direction = "top";
+          } else if (mousePos.y < 100) {
+            direction = "bottom";
+          }
+
+          tooltip.options.direction = direction;
+          polyline.openTooltip(e.latlng);
+        }
+      });
+
+      polyline.on("mouseout", () => {
+        polyline.closeTooltip();
+      });
+    });
+
+    setMarkers(newMarkers);
+    setPolylines(newPolylines);
+  }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]);
+};