[Bug] Map is distorted when reuseMaps is true
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 8.5k
- Forks
- 1.4k
- Avg merge
- 5d 17h
- Merged PRs (30d)
- 3
Description
Description
The map renders correctly on the initial load (see Image 1). However, the map becomes distorted or fails to load tiles properly (see Image 2) when the component is unmounted and remounted while the reuseMaps property is enabled. It appears as though the map container dimensions or tile coordinates are not being recalculated correctly upon re-insertion into the DOM.
The issue can be reproduced here (the mapbox token need to add): https://codesandbox.io/p/sandbox/reactjs-playground-forked-n5nfrk
Expected Behavior
The map must work well even after remount with reuseMap as true
Steps to Reproduce
- Load the map and perform pan (drag) and zoom actions.
- Click the "Toggle Map" button to unmount the component.
- Click the "Toggle Map" button again to remount the component.
- Observe the distorted map. (Note: If it doesn't happen immediately, repeat the steps 2-3 times, ensuring you interact with the map between toggles).
The issue can be reproduced here (the mapbox token need to add): https://codesandbox.io/p/sandbox/reactjs-playground-forked-n5nfrk
Environment
- Framework version: react-map-gl@8.1.0
- Map library: 3.18.0
- Browser: Chrome
- OS: Mac
Logs
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproduction using react-map-gl@8.1.0 and Map library 3.18.0; add the required Mapbox token and follow the reuseMaps unmount/remount path after pan and zoom. Compare map rendering before and after remount, then verify that repeated toggles no longer distort the map or prevent tiles from loading.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100