Mission Report · MapMyIndia [Gtropy]Project case study
Vahan Shakti
The challenge was never drawing the vehicles. It was keeping the map useful once thousands of them were moving at the same time.
- Status
- Shipped
- Owned
- Frontend · map UX
- Users
- 200,000+
- Distribution
- Live on Play Store
- Sector
- Government
- Stack
- React
- Mappls SDK
- TypeScript
- RxJS
ResultsMeasured
- 200,000+
- Users · Government fleet programme
- Live
- On the Play Store
- 200,000+ users
I built
- React map components: live location, custom markers, route plotting, clustering, heatmaps
Vehicle tracking and analytics for a government fleet programme.
A map that shows everything shows nothing. Past a certain density, every additional marker removes information rather than adding it.
Government fleet operators and administrators, 200,000+ of them.
A map of a national fleet is unreadable at the scale it needs to serve. The work began by identifying which questions operators asked at which zoom levels (where is everything, where is the density, where is this one vehicle) and designing a different answer for each.
Live location at national scale, rendered in a browser, without the interface collapsing into noise.
If the map changes what it emphasises with altitude (clusters and heat at the top, individual markers and routes close in), one interface can serve both the overview and the individual case without either collapsing into noise.
Build the map as a set of React components over the Mappls SDK, each owning one visual concern (markers, clusters, heatmap, routes, geofences), so performance work could target the layer that was actually slow.
Clustering and lazy rendering first, because without them nothing else was usable at 200,000 vehicles. Then live-update throttling, then the analytics views that sit on top.
Clustering and heatmaps carry density; custom markers and plotted routes carry the individual case. The map changes what it emphasises as you zoom, so the answer stays legible at every altitude.
Custom vehicle markers with dynamic state, cluster badges that read at a glance, heat layers for movement and activity, and route playback for the individual journey.
React map components over the Mappls SDK: live location, custom markers, route plotting, clustering and heatmaps.
Debounce-based load optimisation to cut redundant API calls and re-renders, clustering and lazy rendering for the dense views, and caching for navigation between map-heavy screens. Live on the Play Store.
Live on the Play Store, serving 200,000+ users.
At this scale, performance is a UX decision. Every optimisation changed what the operator could see, so the two conversations had to happen together.