Skip to content

fix(maps): prevent blank tiles after GeolocateControl flyTo - #166

Merged
slaveofcode merged 2 commits into
developfrom
fix/map-explorer-blank-tiles-v3
Aug 7, 2026
Merged

fix(maps): prevent blank tiles after GeolocateControl flyTo#166
slaveofcode merged 2 commits into
developfrom
fix/map-explorer-blank-tiles-v3

Conversation

@slaveofcode

Copy link
Copy Markdown
Owner

Summary

  • Root cause 1 (main fix): The re-style effect was calling map.setStyle() even when the resolved style URL was unchanged (e.g. switching between 'auto' and 'liberty' with a light theme resolves to the same OpenFreeMap URL). MapLibre treats any setStyle call—even with the same URL—as a full style reload, cancelling all in-flight tile requests. Added appliedStyleUrl ref to skip no-op calls.
  • Root cause 2: After flyTo ends, map.resize() is a no-op when the canvas dimensions haven't changed (the container CSS is fixed). Without an explicit repaint, MapLibre's tile-fetch cycle never runs for the new viewport. Added map.triggerRepaint() after resize() in the moveend rAF handler.
  • Root cause 3 (defensive): Added explicit minZoom: 0, maxZoom: 20 to the Map constructor to avoid the MapLibre v6 circular get minZoom getter (which caused the earlier stack overflow) from corrupting the transform at high zoom levels.

Test plan

  • Open Map Explorer, confirm tiles load at zoom 3
  • Click the GeolocateControl (location icon) → tiles must load at zoom 15
  • Use the custom locate button → same
  • Search for a place → flyTo zoom 14 → tiles load
  • Toggle style (Liberty / Bright / Positron / Dark) → tiles change correctly
  • Toggle dark mode → auto-style switches to dark map
  • Hard-refresh (PWA cache) to pick up new JS

🤖 Generated with Claude Code

slaveofcode and others added 2 commits August 7, 2026 15:56
Promote to production: fix map-explorer stack overflow on resize
Three root causes addressed:

1. Spurious setStyle: the re-style effect was calling map.setStyle() even
   when the resolved URL hadn't changed (e.g. 'auto'→'liberty' with light
   theme resolves to the same URL). MapLibre treats any setStyle call as a
   full style reload, cancelling in-flight tile requests. Added appliedStyleUrl
   ref to skip no-op calls.

2. triggerRepaint after moveend: map.resize() is a no-op when canvas
   dimensions haven't changed (container CSS doesn't change during flyTo),
   so it doesn't kick off tile fetching. Added map.triggerRepaint() after
   resize() to force a render cycle that discovers and requests missing tiles.

3. Explicit minZoom/maxZoom: avoids the MapLibre v6 circular 'get minZoom'
   getter bug (seen in the earlier stack overflow) by giving the transform
   concrete values instead of relying on the derived getter chain.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Aug 7, 2026

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
✅ Deployment successful!
View logs
goodwebtools 63c72d3 Aug 07 2026, 10:12 AM

@slaveofcode
slaveofcode merged commit 4acffc3 into develop Aug 7, 2026
2 checks passed
@slaveofcode
slaveofcode deleted the fix/map-explorer-blank-tiles-v3 branch August 7, 2026 10:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant