Map Viewport Tiles and Request Lifecycle

Working case

An inspector pans from district 47 to district 63 on a slow connection. Twenty tile requests from the first district finish after the second is visible, and an old facility query paints markers over the new area. The map client tags each viewport request with a sequence and cancels or ignores earlier work. It retains a modest tile cache for recent pans but does not prefetch an entire state at high zoom. When the tile service fails, the case list still names facilities and lets the inspector open each record. The interface offers zoom controls reachable from a keyboard and keeps selected facility state in a stable URL.

Implementation boundary

function belongsToViewport(response, current) {
  return response.generation === current.generation &&
    response.styleRevision === current.styleRevision;
}
console.log(belongsToViewport({ generation: 47, styleRevision: 29 }, { generation: 63, styleRevision: 29 }));
// Output: false

Calculate visible tile IDs from viewport bounds and zoom under the chosen tiling scheme. Clamp supported zoom and latitude to the projection’s valid region; do not issue invalid tile coordinates. Deduplicate requests shared across adjacent views. Attach a viewport generation to both tile and facility-query responses, and render only data matching the latest generation. Abort work that no longer has consumers where the transport permits it. Bound speculative neighbor tiles, outstanding requests, and decoded tile memory. Cache keys include style and dataset revision so a changed road label or private overlay does not reuse stale content. Treat a private facility overlay differently from public base tiles: every marker query needs tenant scope and record authorization. Provide a list view using the same filtered result set.

Cost and boundaries

For V visible tiles and P prefetched neighbors, network request count is O(V + P); decoded image memory grows with retained tile pixels, not just compressed transfer bytes. A small LRU cache saves nearby pans but competes with the rest of the page for memory. Vector styling can move work from the server to client CPU; raster tiles move more rendering work upstream. An unbounded marker query can return O(N) facilities for N stored points, so cap results and use viewport filtering. Measure tile request count per pan, canceled requests, cache hit rate, decoded memory, marker freshness, and task completion when the tile layer fails.

Failure trace

Pan rapidly between three districts under network throttling. Old tile and marker responses must not repaint a new viewport. Zoom beyond the supported level and require a bounded fallback. Change map style revision and verify stale styled tiles are not reused. Block the tile service entirely and finish a facility search through the list. Return thousands of private markers and enforce a result cap with a visible count or refinement path. Turn off script and verify the page still has a route to the case list. Test zoom and selection with keyboard focus, screen magnification, and reduced bandwidth.

Verification

Late responses cannot repaint a newer viewport.
Tile cache keys change with style or data revision.
The facility list still works when tiles fail.

Practice drill

Render a case map at zoom 12 with a cache budget of 47 tiles and a maximum of 8 simultaneous requests. Pan from district 47 to 63 before any first-view request completes. Tag each response with its viewport generation and count discarded stale results. Switch style revision 29 to 30 and inspect cache keys. Deny tile network access, then select a facility from the list and open its case route. Record bytes and decoded-memory estimates for the pan sequence.

Decision note

Viewport identity owns what appears on the map; old network success is not permission to repaint a new view.

Common Mistakes

Prefetching an unbounded area at high zoom.
Reusing private overlay data across tenants.
Treating a successful stale request as current UI state.

Connected practice

Build Project: authorized facility map and nearby search and review Web Development: geospatial decisions quiz.