Add Interactive Map to Home Page with Start and End Point Markers

[addejans]

As a user,
I want to input start and end locations on the home page and see the map update in real-time with markers indicating these points,
so that I can visually verify the start and end locations for my journey instantly.

---

Acceptance Criteria:

1. Map Integration:

   • A map should be displayed on the home page (e.g., using Google Maps, Mapbox, or any other mapping library).
   • The map should be interactive, allowing the user to zoom and pan.

2. Input Fields for Start and End Points:

   • There should be input fields for the user to provide start and end coordinates (latitude, longitude) or search locations using an address.
   • The coordinates or addresses will trigger the marker update when entered or changed.

3. Real-Time Marker Update:

   • Upon user input for start and end locations, markers should appear on the map indicating the respective points.
   • The map should update instantly without requiring a page refresh.
   • Markers should be visually distinct for start and end points (e.g., different colors or icons).

4. Map Centering and Zoom:

   • Once both the start and end points are provided, the map should automatically adjust the zoom level and center itself to fit both markers in the view.
   • The map should dynamically adjust as the user updates the start or end location.

5. No Backend Involvement:

   • The marker updates should happen purely on the front-end in real-time, with no need to wait for backend responses.

---

Additional Considerations:

• Marker Customization: Allow for customization of the markers, such as icons for start and end points.
• Address Autocomplete (Optional): Implement an autocomplete feature to help users easily input start and end addresses.

Technical Notes:

• Use a front-end JavaScript library (such as Leaflet.js, Google Maps API, or Mapbox GL JS) to handle the map functionality.
• Ensure the map updates dynamically with input changes using JavaScript event listeners for instant feedback.

---

Tasks:

• [ ] Implement the map on the home page.
• [ ] Create input fields for the start and end locations.
• [ ] Add real-time updating markers based on user input.
• [ ] Ensure the map dynamically zooms and centers to fit both start and end markers.

[addejans]

Instead of entering coordinates, maybe we want to have the user select the start and end point on the map and retrieve the coordinates that way.

Perhaps offer both options?

To be discussed - @bsibu