visgl / visgl/react-map-gl

[Bug] onMoveEnd event is fired on second map on remount with reuseMaps

Open
#2,512 1 comment 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

I have a main map and a mini map.
I would like the view state of the main map to drive the mini map, however the mini map should always be 2 zoom levels lower than the main map.
The main map is uncontrolled, the mini map is controlled.
The main map view state is stored in React state which updates when the main map moveend event fires.

The maps appear in a modal, so are unmounted and remounted as the modal is opened and closed. So I also have reuseMaps added to reduce mapbox map loads from the frequent mounting.

Each time the maps are remounted, the mini map zoom level decreases by 2 without moving the main map.
This only occurs when reuseMaps is set for both maps. But of course, I'd like to reuse both to save on map loads :)

The bug appears to be, at least, that the moveend callback for the main map is fired with the zoom level of the mini map, NOT the main map
You can see in the logs of the moveend callback that the zoom of the event view state doesn't match the main map zoom even when not changing the main map zoom. and the ID of the container for the event is indeed the main map.

But additionally may be that the moveend callback fires when the maps remount, when in reuse mode? does remount when reuse is on count as a move event?

Expected Behavior

moveend doesn't fire with reuse + remount? Or at least, the zoom of the event should match to the map the handler is attached to.
The zoom level of the mini map shouldn't change.

Steps to Reproduce

https://codesandbox.io/p/sandbox/epic-liskov-mymg27

Click Unmount/Mount several times to observe the mini map zoom level decreases each time

Environment
  • Framework version: react-map-gl@7.1.0 and react-map-gl@8.0.1
  • Map library: mapbox-gl@1.13.2 (in reproduction) and mapbox-gl@2.10.0 (in local app)
  • Browser: Chrome Version 134.0.6998.119
  • OS: Windows 10
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 by running the linked CodeSandbox reproduction and toggling Unmount/Mount several times with reuseMaps enabled for both maps. Trace the reuseMaps remount handling and the main map's moveend event, then verify that remounting does not change the mini map zoom or report the wrong map's view state.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.