Masif Kadapa
← Back to work
00320235 months

Atlas · Realtime Ops

A live operations map tracking 40k vehicles in one view without melting a mid-range GPU.

RoleFrontend engineer
Timeline5 months
StackReact · TypeScript · WebSocket · Mapbox GL
Context

Atlas coordinates citywide field operations. Operators watch the whole fleet on one screen; a stray event can mean a missed incident window.

The problem

The previous build dropped to 2fps above 2,000 vehicles. Operators couldn't trust the map, and battery died before the shift ended.

How it was solved
  1. 01

    Decoupled data arrival from rendering: the wire updates state, the renderer picks when to draw.

  2. 02

    Downsample points outside the viewport and lean on Mapbox's compositor for drawing.

  3. 03

    Moved entity aggregation into a Web Worker synced to the map thread.

  4. 04

    Profiled in DevTools until frame cost stayed under 8ms of budget.

The detail worth mentioning
The map is render-native — less than 3% of live entities touch the DOM; the rest are painted on the compositor.
Outcome

40k+live entities

tracked at 24fps on mid-range hardware

  • Sustained 24fps at 40k+ vehicles on mid-range hardware.
  • Field incident response time improved ~18%.
  • Battery draw on the ops tablets fell ~75% after offloading compute.