visgl / react-map-gl

React friendly API wrapper around MapboxGL JS
http://visgl.github.io/react-map-gl/
Other
7.88k stars 1.35k forks source link

[Bug] rotateTo is not updating markers position #2148

Closed anthony-bernardo closed 1 year ago

anthony-bernardo commented 1 year ago

Description

I'm trying to implement a button to rotate a map with Marker in it

The rotation is working (with rotateTo function), but the Markers are not updated well. When I try to rotate the map "manually" (with shift click rotate) this error do not occurs

See the video :

https://user-images.githubusercontent.com/739621/228761205-d3f4a542-86af-4989-ab45-91dec060957d.mp4

Expected Behavior

When I rotate the map with "rotateTo", to have the markers in right place

Steps to Reproduce

mapContainer.current.getMap().rotateTo(currentRotation.current, { duration: 0 });

I tried to repaint the map too

  mapContainer.current.getMap().on('rotateend', async () => {
            mapContainer.current.getMap().triggerRepaint();
        });

And the markers :

      {
                    routes && routes.pointsOfInterest.map(p => (
                        <React.Fragment key={p["@id"]}>
                            <Marker latitude={p.latitude} longitude={p.longitude} offsetLeft={-20} offsetTop={-10}>
                                <img src={`${API_URL}${p.type.mapIcon.contentUrl}`} alt='point-of-interest-marker' style={{ width: "45px", maxWidth: "45px", transform: "translate3d(0,-50%,0)", zIndex: -1, cursor: "pointer" }} onClick={() => handleMarkerClick(p.name)} />
                            </Marker>
                        </React.Fragment>
                    ))
                }

Environment

Logs

No response

anthony-bernardo commented 1 year ago

Resolve my issue :

  onViewportChange={nextViewport => {
                    if (!isButtonActive) {
                        console.log(nextViewport.bearing)

                        setViewport({ ...nextViewport })
                    }
                }}

this were causing the bug