feat: Lines bringToFront effect on mouse over

components/MapComponent.js

@@ -2214,30 +2214,46 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
             color: lineColors[lineData.idModul] || "#000000",
           }).addTo(map);
 
+          // Event-Handler für mouseover und mouseout erneut einrichten
+          updatedPolyline.on("mouseover", () => {
+            updatedPolyline.setStyle({ weight: 8 });
+            updatedPolyline.bringToFront();
+          });
+          updatedPolyline.on("mouseout", () => {
+            updatedPolyline.setStyle({ weight: 5 });
+          });
+
           // Ersetzen der alten Polyline durch die neue
           newPolylines[lineIndex].remove();
           newPolylines[lineIndex] = updatedPolyline;
-          lineData.coordinates = newCoordinates; // Aktualisieren der Koordinaten im Zustand
-
-          // Optional: Koordinaten auf dem Server aktualisieren
-          // ...
+          lineData.coordinates = newCoordinates;
         });
 
         lineMarkers.push(marker);
         return marker;
       });
 
+      // Erstellen der Polyline
       const polyline = L.polyline(lineData.coordinates, {
         color: lineColors[lineData.idModul] || "#000000",
       }).addTo(map);
+
+      // Einrichten der mouseover- und mouseout-Event-Handler
+      polyline.on("mouseover", () => {
+        polyline.setStyle({ weight: 8 });
+        polyline.bringToFront();
+      });
+      polyline.on("mouseout", () => {
+        polyline.setStyle({ weight: 5 });
+      });
+
       newPolylines.push(polyline);
       newMarkers.push(...lineMarkers);
     });
 
     setMarkers(newMarkers);
     setPolylines(newPolylines);
-  }, [map, linePositions, lineColors]); // Achten Sie darauf, dass dieser Effekt läuft, wenn sich `map`, `linePositions` oder `lineColors` ändern
-
+  }, [map, linePositions, lineColors]);
   //---------------------------------------------------------
   //---------------------------------------------------------