visgl / visgl/react-map-gl

[Bug] Map is distorted when reuseMaps is true

Open
#2,578 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

Image Image
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.