Move Car on Map Based on Returned Waypoints

[addejans]

As a user,
I want to see the car move along the route between the start and end points on the map based on the waypoints provided by the backend,
so that I can visualize the journey progression in real-time.

---

Acceptance Criteria:

1. Map Display:

   • The map should display on the home page, showing the route between the start and end points.
   • The route should be rendered based on waypoints returned from the backend.

2. Car Marker Display:

   • A car icon/marker should be displayed on the map to represent the vehicle.
   • The car marker should start at the first waypoint (the start point).

3. Movement of Car:

   • The car marker should move smoothly along the route following the waypoints in sequential order.
   • Movement speed should be based on the distance between waypoints and the associated speed provided in the response.
   • The car's position should update at regular intervals to simulate continuous movement.
   • The movement should reflect realistic travel progress between waypoints (e.g., using linear interpolation).

4. Start, End, and Waypoint Markers:

   • The map should display distinct markers for the start and end locations.
   • Optionally, you can display waypoint markers to indicate key positions along the route, but they may be hidden depending on the UI needs.

5. Handling of Backend Response:

   • The front-end should handle the response from the backend, which includes a list of waypoints, coordinates, speed, and any other relevant data.
   • The car marker should update as soon as the waypoints data is received, and the route should be drawn on the map accordingly.

6. Map Auto-Centering:

   • The map should automatically center itself as the car moves along the route to keep the vehicle in view.
   • If the user interacts with the map (panning or zooming), they should still be able to control the map while the car moves.

7. No Page Refresh Required:

   • The car movement and route rendering should happen in real-time on the front-end without requiring a page reload.

---

Additional Considerations:

• Real-Time Animation: Consider using a smooth animation library (like requestAnimationFrame in JavaScript or setInterval) to move the car marker between waypoints.
• Pause/Resume Feature (Optional): Allow users to pause and resume the car’s movement.
• Progress Indicator (Optional): Display a progress bar or time estimate for the remaining journey.
• Car Icon Customization: Use a car icon that visually represents the vehicle, such as an EV marker, and animate it to give a realistic look of travel.

---

Technical Notes:

• Use a front-end JavaScript library (such as Leaflet.js, Google Maps API, or Mapbox GL JS) for rendering the map and handling the movement of markers.
• Calculate the time it should take for the car to move between waypoints based on speed and distance and update the car marker's position at each interval.
• Use the waypoints returned by the backend to define the route, including latitude, longitude, and speed.
• Optionally, you can add easing functions (e.g., easeInOut) for smooth movement transitions between waypoints.

---

Tasks:

1. Setup Map Display:

   • [ ] Display the map on the home page.
   • [ ] Render the start and end locations using markers.

2. Draw Route:

   • [ ] Use the returned waypoints to draw the full route on the map.

3. Move Car Along Route:

   • [ ] Add a car marker that moves along the route based on the waypoints.
   • [ ] Calculate the time interval for each movement based on the speed between waypoints.

4. Map Centering:

   • [ ] Ensure the map centers on the moving car as it progresses through the route.

5. Test and Optimize:

   • [ ] Test smooth car movement on different routes.
   • [ ] Optimize for responsiveness and performance on different devices.