How to flyTo?

[sherikovic]

I'm having trouble getting the flyTo to function properly.

const cameraRef = useRef<CameraRef>(null)

const recenterMap = async () => {
    if (cameraRef.current) {
      cameraRef.current.flyTo([lngno, latno])
    }
  }

return (
    <View style={styles.container}>
      <MapLibreGL.MapView
        ref={mapRef}
        style={styles.map}
        styleURL={MAP_STYLES.bright}
        attributionEnabled={false}
        onPress={onMapPress}
      >
        <MapLibreGL.Camera ref={cameraRef} centerCoordinate={[lng, lat]} zoomLevel={16} />
      </MapLibreGL.MapView>
      <View style={styles.recenterButton}>
        <Button title="" onPress={recenterMap} />
      </View>
      <Button title="get bounds" onPress={onPress} />
    </View>
  )

The intended behavior is when the user drags the map away, they would be able to fly back to their location. This works well only for the first time I click on re center. Are these functions memoized and need new data every time? I did try to change the lng and lat given to the flyTo function and it works whenever I change them, though in my case the location of the user will be fixed.

Help will be much appreciated.

[sherikovic]

I figured a way to do it, not sure if this is an official one though. And it is to update the center every time the map moves away from the original coords. This way the stop config passed down to setCamera doesn't remain stale.

const updateCenter = async () => {
    const newCenter = await mapRef.current?.getCenter()
    if (cameraRef.current)
      cameraRef.current.setCamera({
        centerCoordinate: newCenter,
        animationMode: 'flyTo',
      })
  }

<MapLibreGL.MapView
        ref={mapRef}
        style={styles.map}
        styleURL={MAP_STYLES.bright}
        attributionEnabled={false}
        zoomEnabled={true}
        rotateEnabled={true}
        onRegionDidChange={updateCenter}
      >
....

[KiwiKilian]

Hmmm will have to investigate – does this not work on Android and iOS when calling again with the same coordinates? Which version are you using?

[sherikovic]

I'm working on the iOS simulator (eas build), haven't tried it on Android yet.
"@maplibre/maplibre-react-native": "^10.0.0-alpha.27",

[mutation-plant]

Similar issue here. If I call flyTo() on a CameraRef multiple times, the first call succeeds, but the subsequent call doesn't seem to go through.
No error is shown on the RN console. By the way, moveTo() behaves the same way.
Android build seems to work fine with the same code. I can call it multiple times and it will flyTo() the set coordinate.

Device: Pixel 7a(Android 15), iPhone 12(iOS 18.1.1)
Version:

@maplibre/maplibre-react-native @10.0.0-beta.8
expo @52.0.18