Skip to content

feat: Google Maps-style route navigation with live GPS tracking

Praveena Veeranki requested to merge agri_hack into develop

Merge Request: Google Maps-Style Route Navigation & Layout Enhancements

📖 Overview

This MR introduces a premium, fully integrated Google Maps-style route navigation experience and resolves key UI collisions on the Nearby Mandis page.

Rather than simple static route listings, clicking "Get Directions" on a mandi card now transitions the map into a live navigation workspace. It replaces the time-based simulation with a high-accuracy, real-time GPS tracking system that follows the vehicle as it drives.

🛠 Key Features

1. Real GPS-Driven Navigation (No More Simulated Timer)

  • Replaced the artificial interval timer with a live device geolocation tracker (navigator.geolocation.watchPosition).
  • Route Snapping (projectOntoRoute): Projects raw GPS coordinates onto the nearest polyline segment of the active route, keeping the navigation cursor pinned accurately to the road.
  • Smart UI Feedback:
    • Displays a pulsing green LIVE badge when active coordinates are received.
    • Shows a Waiting for movement... banner when navigation starts but before the user begins moving.
    • Displays user-friendly inline notification banners for GPS errors (permission denied, signal loss).
  • Auto-Arrive: Automatically completes navigation once the device is within 300m of the destination mandi.

2. Google Maps-Style Camera Follow

  • MandiMap & MapController automatically detect if navigation is active.
  • Panning automatically focuses and locks onto the moving vehicle at zoom level 14 (smooth transitions).

3. Layout Resolution (Navbar Collisions Fixed)

  • Desktop: The search input box and back button are integrated cleanly inside the directory sidebar container, completely eliminating overlaps with the global floating header.
  • Mobile: The standalone floating search bar now sits at top-24, rendering cleanly below the mobile navbar.

4. React 19 / Fast Refresh Stability Fix

  • Changed MapController's useEffect dependency array from nested object arrays to exact primitive properties (centerLat, centerLng, zoom, routeKey, isSimulating, carLat, carLng, map).
  • This enforces a constant array size of 8 across all renders, resolving the Fast Refresh size mismatch warnings.

🧪 Testing & Verification

1. Automated Unit Tests

  • Executed npm run test successfully.
  • All 83 unit test cases passed cleanly.
    • constants.test.ts (8/8 passed)
    • teluguMap.test.ts (33/33 passed)
    • voiceParser.test.ts (35/35 passed)
    • StateContext.test.tsx (7/7 passed)

2. Production Build Check

  • Built Next.js package via npm run build using the Turbopack compiler.
  • Completed successfully with Exit Code 0 (no compiling errors).

📝 Changed Files

  • src/components/MandiMap.tsx — MapController camera updates, primitive hook dependencies, vehicle icon rotations.
  • src/app/nearby/page.tsx — Live GPS geolocation listeners, UI panel refactoring, mobile/desktop search repositioning.
  • src/app/globals.css — Pulse ripple keyframes, alternate route line hover styles.

Merge request reports