feat: maps clientside cache

[nikilok]

Summary by CodeRabbit

• New Features
  • Added improved map tile loading with local browser caching for faster repeat viewing and smoother theme-based tile swaps.
  • Map tiles now update in place when the map style changes, reducing visible reloads.
• Bug Fixes
  • Better handles failed or blocked tile requests and avoids reusing outdated tile images.
  • Prevents stale map tiles from lingering after zooming or changing layers.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
learn-tanstack-start	Ready	Preview, Comment	Jun 27, 2026 9:22pm

[coderabbitai]

Warning

Review limit reached

@nikilok, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 45 minutes and 23 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 04051054-580e-4c2c-bf4f-3ca799b36c08

📥 Commits

Reviewing files that changed from the base of the PR and between 275bfb7 and 884dca0.

📒 Files selected for processing (1)

• apps/web/src/components/CachedTileLayer.tsx

📝 Walkthrough

Walkthrough

Adds CachedLeafletTileLayer, a Leaflet TileLayer subclass that fetches tile images as Blobs via TanStack Query (keyed by URL, staleTime: Infinity, 30-minute GC), converts them to object URLs, and guards against memory leaks by revoking URLs on tile discard/abort. Wraps it in a CachedTileLayer React component and replaces react-leaflet's TileLayer in LeafletMap.

Changes

CachedTileLayer: TanStack Query–backed Leaflet tile caching

Layer / File(s)	Summary
Types, constants, and caching strategy apps/web/src/components/CachedTileLayer.tsx	Defines CachedTileLayerOptions (extends TileLayerOptions with QueryClient), TileImg lifecycle type (object URL + discard flags), TILE_GC_TIME constant, and inline strategy docs.
Blob fetch, image validation, and object URL wiring apps/web/src/components/CachedTileLayer.tsx	Overrides createTile to call fetchQuery with redirect: 'error' and image-type validation, then mints/revokes object URLs; wires Leaflet onload/onerror with discard and zoom-stale guards; evicts failed query keys.
Tile discard and object URL revocation apps/web/src/components/CachedTileLayer.tsx	Overrides onAdd/onRemove to attach/detach tileunload/tileabort listeners; handleTileDiscard marks tiles discarded and revokes any minted object URL.
React component and LeafletMap integration apps/web/src/components/CachedTileLayer.tsx, apps/web/src/components/LeafletMap.tsx	Exports CachedTileLayer React component that constructs/destroys the Leaflet layer via useEffect and updates URL in-place; LeafletMap swaps TileLayer for CachedTileLayer.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• nikilok/learn-tanstack-start#107: Adds the initial LeafletMap.tsx with TileLayer usage that this PR replaces with CachedTileLayer.
• nikilok/learn-tanstack-start#111: Routes tile URLs through a server-side /api/tiles/... proxy, directly related to how tile URLs are resolved before being passed to the caching layer.

Poem

🐇 Tiles once fetched fresh from the net,
Now cached in blobs — no sweat!
Object URLs bloom and fade,
Discarded tiles cleanly unmade.
Query keys hold the map in place,
A fluffy rabbit's caching grace. 🗺️

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding client-side caching for map tiles.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/maps-clientside-cache

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/web/src/components/CachedTileLayer.tsx`:
- Around line 75-80: The tile event handlers in CachedTileLayer should guard
against tiles that were already discarded after src assignment but before
onload/onerror fires. Update the tile loading flow so the onload/onerror
callbacks re-check the tile’s discarded state before calling done or evicting
via queryClient.removeQueries, and make handleTileDiscard revoke the minted
object URL immediately on discard. Keep the fix localized around the tile src
setup and the tile.onload/tile.onerror handlers.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 313d7870-dc9c-4279-a143-bb10e44e20cf

📥 Commits

Reviewing files that changed from the base of the PR and between 8a2ffab and 275bfb7.

📒 Files selected for processing (2)

• apps/web/src/components/CachedTileLayer.tsx
• apps/web/src/components/LeafletMap.tsx