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.

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]);
+};