Visualize More Than One Hundred Million Map Points
Company: Google
Role: Frontend Engineer
Category: System Design
Difficulty: hard
Interview Round: Onsite
# Visualize More Than One Hundred Million Map Points
Design an interactive map for more than 100 million data points. Broad zoom levels should render aggregated heat-map information, while the closest zoom reveals individual pins. Discuss GIS resolution, rendering technology, zoom-aware caching, worker threads, live SSE updates, aggregation, refresh cycles, failure recovery, and hardware and network limits.
### Constraints & Assumptions
- The browser cannot download or render the entire dataset.
- Every response is bounded by viewport, zoom, and a version or time window.
- The design must degrade safely when live updates or high-detail data are unavailable.
### Clarifying Questions to Ask
- How fresh must the visualization be?
- Are points static, moving, or appended over time?
- What accuracy is required at each zoom level?
```hint Make zoom a query dimension
Choose server aggregation and payload detail from viewport and zoom before comparing SVG, canvas, and WebGL.
```
### What a Strong Answer Covers
- Spatial indexing, tiles, multiresolution aggregates, and stable cache keys.
- Heat-map-to-pin transitions without double counting or visual jumps.
- WebGL, canvas, or SVG choice, worker processing, and memory budgets.
- SSE deltas, refresh consistency, fallback behavior, metrics, and capacity limits.
### Follow-up Questions
1. How would you support historical playback?
2. What changes if some points require per-user authorization?
Overview: Design a multiresolution map that turns over one hundred million points into cached heat maps and detailed pins without overwhelming the browser.