Feature/show car details

src/core/components/ApplicantRequestDetail/FlyToPolyline.jsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Polyline, useMap } from "react-leaflet";
+import { useEffect } from "react";
+const purpleOptions = { color: "purple" };
+
+const FlyToPolyline = ({ polyline }) => {
+    const map = useMap();
+
+    useEffect(() => {
+        if (map) {
+            const leafletPolyline = L.polyline(polyline); // Create a Leaflet polyline
+            const bounds = leafletPolyline.getBounds(); // Get bounds from the polyline
+            map.flyToBounds(bounds, { padding: [50, 50] }); // Fly to the polyline bounds
+        }
+    }, [map, polyline]);
+
+    return <Polyline pathOptions={purpleOptions} positions={polyline} />; // Render the polyline
+};
+
+export default FlyToPolyline;