React-map-gl: Zoom allows zooming the overlay more than the map

[jameskraus]

When zooming out, I can zoom out of the overlay more than I can zoom out of the map. Currently using the 'controls' example:

Before zooming out:

After zooming out:

Even more zoomed out:

This isn't a huge bug, but it does lead to weird behavior.

[aderaaij]

I'm kind of struggling with this now when I add a flyTo function to a marker click. Somehow it doesn't update the staticmap layer which contains the markers and it's a pain. If anyone has any ideas on this, I'd love to hear them :).

[abmai]

@aderaaij are you seeing this issue in the latest version (3.0.3)?

[daumann]

@aderaaij Could you share how you managed a flyTo with react-map-gl?

[aderaaij]

@abmai Apologies for the late reply. I've switched to using react-mapbox, although I might just use the Mapbox GL API directly as the libraries do not add that much benefit for my purpose. Anyhow, it is on version 3.0.3.

@daumann If you get a ref to the map object, you can call .getMap() on it to get an instance of the actual map on which you can apply all the api goodness from mapbox. For example <ReactMapGL ref={(map) => { this.map = map; }}/> and call it somewhere with this.map.getMap().flyTo({...options})

[ibgreen]

This should be fixed in 3.0.

[colllin]

When calling .flyTo() on the map directly, it looks like onViewportChange isn't called... so the next time the user interacts with the map, it reverts to the location from component state.

I can capture the next moveend event, get the map's new viewport info, and set it in my state:

            this.map.getMap().fitBounds(newBounds)
            this.map.getMap().once('moveend', (event) => {
                this.setState({
                    viewport: {
                        ...this.state.viewport,
                        longitude: this.map.getMap().getCenter().lng,
                        latitude: this.map.getMap().getCenter().lat,
                        zoom: this.map.getMap().getZoom(),
                    },
                })
            })

But if the user interrupts the flyTo by trying to interact with the map, they end up in their original location (prior to calling flyTo or fitBounds), give or take a few zoom levels.

[AddoSolutions]

I am having the same issue as described. Is there a bug open for this?