feat: highlight polylines on mouseover and bring to front

components/MapComponent.js

@@ -2144,7 +2144,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     iconSize: [25, 25],
     iconAnchor: [5, 5],
   });
-
+  //---------------------------------------------------------
   // Function to initialize markers and polylines
   useEffect(() => {
     if (!map) return;
@@ -2169,6 +2169,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       // Add mouseover and mouseout events to change the polyline width
       polyline.on("mouseover", () => {
         polyline.setStyle({ weight: 8 }); // Increase width on hover
+        polyline.bringToFront(); // Bring polyline to the front on hover
       });
 
       polyline.on("mouseout", () => {