livebustracker : earn rewards

Home/Map View — Full Description The Home screen displays active bus trips on an interactive Google Map with real-time location updates. The map is centered on Pune, India (coordinates 18.5308, 73.8445) with a default zoom level of 15, tilted at 45 degrees for a 3D perspective view. A custom dark map style is applied for visual consistency with the app's theme. The map supports gestures for rotation, tilt, and building views. User location is displayed but the default location button and zoom controls are hidden to maintain a clean interface. Real-time Bus Visualization Buses are displayed as custom-drawn markers rendered programmatically using Flutter's Canvas API. Each marker shows a teal-colored bus icon with white windows and shadow effect. When new location data arrives, the markers animate smoothly to their updated positions using 12% interpolation per frame, creating fluid movement. The bearing (rotation angle) is calculated from the previous to current position so the bus icon points in the direction of travel. Location polling happens every 2 seconds by calling the debug endpoint to fetch the latest GPS coordinates for each active trip. Top UI Elements The top-left corner displays a "Live Badge" showing how many trips are currently being tracked. It shows a green dot when trips are active or gray when none. Next to it is a my-location button that animates the map back to the initial Pune position. Bottom Sheet A draggable bottom sheet occupies 30% of the screen initially (minimum 13%, maximum 65%) showing a list of trip cards. It snaps to three positions: collapsed (13%), default (30%), and expanded (65%). The sheet header shows "Active Trips" with a count badge and an add button (+) to open the trip picker. Below the header, trip cards display the route name, city, contributor count, and status. Active trips show a green "LIVE" badge while closed trips show "Closed" in gray. Each card has a "Join" button that initiates tracking participation. Trip Picker Modal Tapping the add button opens a modal bottom sheet for selecting trips to track. Users can search by route name or city using a text field. Each trip appears with a checkbox for multi-selection. Selected trips are saved to device storage and persist across app launches. When the user taps "Join" on a trip card, the app calls the tracking start endpoint and navigates to the TrackingPage, passing the trip ID and session ID. If the trip is full (maximum 10 contributors reached), an error snackbar displays "Trip is full — max 10 contributors". State Management The page manages loading states while fetching active trips from the API. It maintains sets for selected trip IDs, bus positions, target positions for animation, and bearing calculations. A timer handles the animation loop at 60fps (16ms intervals).