How do you render 1,000 moving vehicles smoothly on a web map?

Keep timestamped location samples in a bounded external store, interpolate visible positions inside requestAnimationFrame, cull outside the viewport, cluster at low zoom, and avoid pushing per-frame coordinates through React state.

Should a live tracking map use DOM markers, Canvas, or WebGL?

Use DOM markers for a small visible fleet and straightforward accessibility, Canvas for a denser custom layer, and WebGL when measured density and update frequency justify GPU instancing. Cull and simplify before changing renderers.

How should the frontend handle delayed or missing GPS updates?

Interpolate between real timestamped samples, allow only short bounded extrapolation, then freeze the vehicle and display location age. Sequence gaps should trigger replay or a versioned snapshot resync before the map returns to live state.

Design Live Vehicle Tracking for 1,000 Moving Vehicles

hardSystem DesignReal-timePerformanceMaps

Asked at

DoorDash, Google, Instacart, Uber

Problem statement

Design a smooth live vehicle-tracking map with timestamped GPS updates, interpolation, viewport culling, clustering, Canvas/WebGL trade-offs, and sequence-gap recovery.

Premium

The full solution is part of HelloFrontend Pro

The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.

Full RADIO-framework walkthrough with architecture diagrams
Data model, API design, and rendering strategy trade-offs
Performance, accessibility, and offline sections plus a model answer

Unlock the full solution →

Already a member? Log in to open the workspace.

Design Live Vehicle Tracking for 1,000 Moving Vehicles

Problem statement

The full solution is part of HelloFrontend Pro

More System Design questions

Design a Real-time Chat UI

Design a Collaborative Editor (Google Docs)

Design ChatGPT (Streaming Chat with Branching & Share-link)

Design a Notification Center