140Design Google Maps/Uber live tracking: map rendering, location updates, smoothing, and state synchronization
hardAbout 60 minutesSystem designmapsreal-timeanimationgeolocationsystem-design
Problem
Design the live-tracking screen of a ride-hailing or delivery app (like Uber's "your driver is arriving" view):
- an interactive map with the route, pickup and drop-off pins, and the driver's car moving smoothly, rotating to its heading;
- an ETA and trip status that update in real time (driver assigned → arriving → on trip → completed);
- location updates every few seconds over a mobile network that is slow, lossy and sometimes offline;
- the screen also works when the user leaves and comes back, or opens the trip on another device;
- battery and data usage stay low.
Cover map rendering, the real-time location protocol, smoothing and interpolation, state synchronisation, and handling bad networks.
Step-by-step
The map (tiles, camera, layers) is a rendering engine; the trip state (status, route, ETA, driver positions) comes from the server; the animation turns sparse, noisy position updates into smooth motion. Keep them independent.
Unlock the full solution
What's inside
- Step-by-step
- Requirements
- Architecture
- Data model and state
- Key flows and trade-offs
- Performance and reliability
- Follow-up questions
Includes 2 code listings, 4 follow-up questions.
One-time payment by UPI, card or net banking. Launch price.