Equivalent for mapboxGL flyTo camera transition?

[benschlegel]

In visgl's other repository (react-map-gl) theres an example for camera transitions. This internally uses the .flyTo function of mapbox, which there is no direct equivalent with google maps as far as i can tell.

Does anyone know of a way to achieve a similar effect to make the camera zoom out, pan and zoom back in as smoothly as in the .flyTo example?

[ibgreen]

FWIW - deck.gl has a FlyToInterpolator that handles this for deck.gl applications (deck can also control and animate base maps). It could be worth testing that this works with the google basemap. I suspect the FlyToInterpolator code could also be deconstructed and rebuilt as a (deck.gl-independent) part of this react-google-maps library for those who want to use google-maps standalone without deck.gl

[usefulthink]

This is probably the reason: https://github.com/visgl/react-google-maps/blob/main/src/components/map/index.tsx#L88-L89

It still feels like a hack to me and I'm working on improving this part specifically. When deck.gl is supposed to be in control, we need to prevent google maps from trying to update it's own camera which is difficult and right now achieved by just moving it to the back...

[benschlegel]

That does sound like a really difficult problem. I guess there's no real workaround until the core issue is fixed?

I tried manually increasing the maps z-index, which does somewhat work and also makes the view transition work, but as you mentioned, the camera quickly starts breaking as soon as i change zoom level/fit to bounds and pan, the camera starts jumping around between what I assume is google maps managed camera state and deck.gl managed camera state.

[usefulthink]

you could try using the onBoundsChanged event to get notified of every change the map instance does itself and put that into the viewstate of deck.gl, but I suspect this might cause some stuttering.

[benschlegel]

this somewhat seems to behave as expected, but the entire animation/transition is extremely choppy compared to the mapbox-gl example.

is this something to be expected/a limitation of google maps tile fetching/rendering? or more likely to be an issue of how i use deck.gl/this library

[usefulthink]

It's not you, it's us :D

Synchronizing deck.gl and the basemap is notoriously difficult if you want both of them to be in control. If behaves decently if either google maps is prevented from updating it's state in any way, so the sole control lies with deck.gl or if you use deck.gl as an overlay and leave full control to the google maps instance.

It's also something I am still working on to figure out the best way to handle it, so maybe there are ways to still improve it.

react-map-gl has had years to figure this one out (and mapbox itself seems to be a bit more malleable in this regard) :)

[usefulthink]

I think this could be an interesting Idea for this library and it would be worthwhile to explore how this could fit into the reactive programming model.

The Google Maps API itself doesn't provide anything like this. There sometimes are automatic minimal camera-transitions when using map.setCenter() and so on (which is also why we're not using them for the center/zoom/heading/tilt props), but I think they are only triggered when moving smaller distances.

[dragonlobster]

how about map.panTo()?