Tooltip für die Linien an Maus-Koordinaten positionieren

.env.local

@@ -1,37 +1,32 @@
 #.env.local
 #je nach dem Mysql Server, ob localhost freigegeben ist oder die IP Adresse des Servers, manchmal die beide und manchmal nur eine
 
-DB_HOST=10.10.0.30
+#DB_HOST=10.10.0.30
+#DB_USER=root
+#DB_PASSWORD="root#$"
+#DB_NAME=talas_v5
+#DB_PORT=3306
+#########################
+
+#NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/"
+#NEXT_PUBLIC_SERVER_URL="http://10.10.0.30"
+#NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.30"
+#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.30:3000/mapTiles/{z}/{x}/{y}.png"
+#########################
+
+
+DB_HOST=10.10.0.70
 DB_USER=root
 DB_PASSWORD="root#$"
 DB_NAME=talas_v5
 DB_PORT=3306
 
-
 #########################
 
 NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/"
 NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
-NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.30"
+NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70"
-NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.30:3000/mapTiles/{z}/{x}/{y}.png"
+NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"
-NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-#########################
-
-
-#DB_HOST=10.10.0.70
-#DB_USER=root
-#DB_PASSWORD="root#$"
-#DB_NAME=talas_v5
-#DB_PORT=3306
-
-
-#########################
-
-#NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/"
-#NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
-#NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70"
-#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"
-#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
 #########################
 
 #DB_HOST=192.168.10.167
@@ -45,3 +40,6 @@ NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.pn
 #NEXT_PUBLIC_SERVER_URL="http://192.168.10.167"
 #NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.167"
 #NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"
+
+######################### online
+#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

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) {