Tooltip für die Linien an Maus-Koordinaten positionieren

components/MapComponent.js

@@ -499,17 +499,70 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     fetchData();
   }, []);
 
+  //Tooltip an mouse position anzeigen für die Linien
   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);
 
+    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: [0, 10],
+        pane: "tooltipPane",
+      });
+
+      // Mausbewegung tracken
+      polyline.on("mouseover", (e) => {
+        const tooltip = polyline.getTooltip();
+        if (tooltip) {
+          const mousePos = e.containerPoint; // Mausposition relativ zur Karte
+          const mapSize = map.getSize(); // Größe der Karte
+
+          // Berechne die Tooltip-Position, um sicherzustellen, dass sie innerhalb des sichtbaren Bereichs bleibt
+          let direction = "right"; // Standard-Richtung
+
+          if (mousePos.x > mapSize.x - 100) {
+            direction = "left"; // Bewege den Tooltip nach links, wenn der Mauszeiger nahe dem rechten Rand ist
+          } else if (mousePos.x < 100) {
+            direction = "right"; // Bewege den Tooltip nach rechts, wenn der Mauszeiger nahe dem linken Rand ist
+          }
+
+          if (mousePos.y > mapSize.y - 100) {
+            direction = "top"; // Bewege den Tooltip nach oben, wenn der Mauszeiger nahe dem unteren Rand ist
+          } else if (mousePos.y < 100) {
+            direction = "bottom"; // Bewege den Tooltip nach unten, wenn der Mauszeiger nahe dem oberen Rand ist
+          }
+
+          // Setze die neue Richtung und öffne den Tooltip
+          tooltip.options.direction = direction;
+          polyline.openTooltip(e.latlng);
+        }
+      });
+
+      /*      polyline.on("mouseover", () => {
+        polyline.openTooltip();
+      }); */
+
+      polyline.on("mouseout", () => {
+        polyline.closeTooltip();
+      });
+    });
+
     setMarkers(newMarkers);
     setPolylines(newPolylines);
   }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker]);
+  //  }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker]);
+  //--------------------------------------------
 
   useEffect(() => {
     if (map) {