Add HSL-style map component to the application UI

[3nd3r1]

Integrate the HSL-style map component into the application's user interface. The developer has freedom to choose the most appropriate placement and integration approach based on the app's current structure and user flow.

Technical Details:

• Import and integrate the HSLMap component (once created) into the app
• Choose appropriate location for map display:
  • Option A: Dedicated full-screen map tab/screen
  • Option B: Embedded map view within route search screen
  • Option C: Modal/overlay map that can be opened from multiple screens
  • Option D: Split view with map and route list
  • Or any other approach that makes sense for the user experience
• Ensure map component receives necessary props (initial region, user location, etc.)
• Handle navigation to/from map view appropriately
• Consider when map should be rendered (lazy loading, conditional rendering)
• Ensure map integrates smoothly with existing app navigation structure
• Test map visibility and interaction in chosen placement
• Optimize for performance based on integration approach

Acceptance Criteria:

• HSLMap component successfully integrated into the app
• Map is visible and accessible to users
• Map placement makes sense for user workflow
• Navigation to/from map works smoothly
• Map receives appropriate initial configuration
• No performance issues introduced by integration
• Map interactions work as expected in chosen context
• Integration approach documented in PR description
• Works on both iOS and Android

Developer Notes:

• Feel free to experiment with different placements and choose what works best
• Consider the user's journey: when would they want to see the map?
• Document your decision in the PR for team discussion
• If unsure about placement, create a simple tab navigation initially and iterate later
• Consider creating multiple integration points if beneficial (e.g., map in search AND in route details)