# Design Mobile Maps: Vector Tiles, Routing, and Offline Source: https://www.techinterview.org/post/3233475019/design-mobile-maps-vector-tiles-routing/ Updated: 2026-07-26 · techinterview.org Designing a mobile maps app is one of the most multidisciplinary [mobile interview questions](/system-design-interview-guides/). You touch graphics rendering, routing algorithms, location services, large-scale tile storage, and the brutal data costs of streaming map data over cellular. ## Functional requirements - Display a map at any zoom level, pan smoothly — the bar is 60fps panning even while tiles stream in over cellular, so interviewers probe how you avoid blank frames: pre-cache a ring of neighbor tiles and draw a low-zoom fallback until the sharp tile arrives. - Search for places (geocoding) — clarify whether search runs server-side against a place index or has to work offline, and be ready to say how you rank results by distance, popularity, and query prefix for autocomplete. - Compute routes from A to B (driving, walking, transit) — each mode needs its own cost function, and transit is the hard one because it adds schedules, transfers, and time-of-day, which is where interviewers push for detail. - Provide turn-by-turn navigation — this is the real-time loop that ties everything together: snap location to the route, count down to the next maneuver, and re-route when the driver deviates. - Work offline for downloaded regions — state up front what degrades without a network (no live traffic, lower-quality routing) so the scope stays realistic instead of promising full parity offline. - Show traffic, places of interest, and user location — keep these as separate overlays on top of the base map rather than baking them into tiles, so each can refresh at its own rate. ## Architecture Three core layers: **tile rendering**, **routing**, **navigation**. ## Vector vs raster tiles Modern maps use vector tiles. Reasons: - Smaller (10x compared to PNG raster) - Stylable client-side — same tile renders differently for day/night/satellite mode - Smoother zoom — vector data scales without re-fetching - Selectable features — tap a road to identify it Tile format: Mapbox Vector Tile (MVT) is the de facto standard. Tiles are organized in a tile pyramid (zoom levels 0–22) with each zoom doubling resolution. ## Tile streaming and caching Client requests visible tiles + a small ring of pre-cached neighbors. Tiles are cached on disk (~500MB) with LRU eviction. Frequently visited home/work tiles are kept indefinitely. ## Routing Server-side. Pre-computed contraction hierarchies or customizable contraction hierarchies (CCH) for fast queries. Mobile sends "from A to B" and gets back a polyline + turn instructions in 100–500ms. For offline routing, simplified pre-computed graphs are bundled with downloaded regions. Quality is lower, but it works without network. ## Turn-by-turn navigation - Periodically (every 1s) match GPS location to the nearest road segment (map matching) — the naive nearest-segment snap breaks at parallel roads and overpasses, so strong answers reach for a hidden Markov model that weighs recent history, not just the closest line. - Compute distance to next instruction — measure along the route polyline, not straight-line, or the countdown will be wrong on curves and highway ramps. - Speak the instruction at predetermined distances (e.g., 500m, 100m, 0m) — scale the trigger distances to speed, since a highway maneuver needs an earlier warning than a city turn. - Re-route automatically if user goes off-route (detected when GPS strays 50m+ from polyline) — debounce the trigger so a single bad GPS fix in an urban canyon doesn't cause a spurious recalculation. ## Offline regions User selects a region. Client downloads all tiles for that region across multiple zoom levels (typically 4–22) plus the routing graph subset. Sizes range from 50MB (small city) to 10GB+ (entire country at high zoom). ## Traffic Server-side aggregation of GPS pings from millions of devices. Speeds are computed per road segment in 5-minute windows. Rendered on the map as colored overlays. ## Battery - Reduce GPS sample rate when not navigating — a static map only needs occasional coarse fixes; full 1Hz sampling is worth the drain only during active turn-by-turn. - Throttle tile rendering to 30fps when idle — a map that isn't moving doesn't need 60fps, and you can pause redraws entirely until the user pans or zooms. - Disable traffic refresh in background — polling traffic for a map nobody is looking at burns battery and data, so suspend it and resume on foreground. ## Frequently Asked Questions ### Why does the map sometimes show a lag before tiles render? Tiles are fetched on demand. If the user pans into uncached area on slow network, the lag is visible. Mitigation: prefetch ring + low-zoom fallback tile rendered immediately while higher-zoom is fetched. ### How accurate is GPS in cities? Urban canyons cause multipath errors of 10–30 meters. Map matching corrects most of this by snapping to the most plausible road segment. ### What is the difference between Google Maps and Apple Maps engineering-wise? Both use vector tiles, but Apple Maps has tighter integration with iOS frameworks (CoreLocation, MapKit) and Google Maps has broader cross-platform consistency.