0

I am having this strange issue when I try to set the pitch, heading, bounds and centerCoordinate of a camera in a single config.

Initially, this is the config of the camera I am having -

pitch: 0

heading: 0

bounds: some coordinate bounds

centerCoordinate: null

These values are passed to the camera via props as follows -

const {
  followUserLocation,
  heading,
  pitch,
  animationDuration,
  zoomLevel, 
  centerCoordinate,
  bounds
} = this.state;
<MapboxGL.Camera
      ref={camera => (this._camera = camera)}
      bounds={bounds}
      centerCoordinate={centerCoordinate}
      heading={heading}
      pitch={pitch}
      animationDuration={animationDuration}
      zoomLevel={zoomLevel}
      followUserLocation={locationPermissionGranted ? 
      followUserLocation : false}
      followUserMode={'normal'}
/>

On certain external event, I receive set of waypoints and I want to update the pitch and heading as well as focus the camera on each of the waypoints per external event (like next/prev button click). So I do following -

this.setState({
  pitch: 60,
  heading: someHeading,
  animationDuration: 400,
  bounds: undefined,
  centerCoordinate: nextWaypoint,
  zoomLevel
})

and my camera properly updates the pitch, heading, removes the default bounds and focuses to the centerCoordinate all at once properly.

Problem occurs when I try to 'reset' the camera to the default stage - reset pitch, heading, clear the centerCoordinate and set some bounds using setState -

this.setState({
      heading: 0, //reset
      pitch: 0, //reset
      animationDuration: 1000,
      bounds : defaultBounds,
      centerCoordinate: null, //reset
      zoomLevel: undefined // reset
    })

When I do that, the camera is not properly reset to the default position - pitch and heading is not reset (takes the old ones) and bounds are also not properly set.

When I try to set the pitch and heading first, add some timeout and then set the bounds, it works, but not in single go. Am I doing something wrong or is this a known bug?

I am doing all this when the mapbox has finished loading, i.e, when the onDidFinishLoadingMap event is triggered.

I also tried using setCamera(cameraConfig) function instead of state approach, but got the same results.

  • Platform: Android, IOS

  • Version: 7.0.0-rc3

  • RN version - 0.59.10

Angel F Syrus
  • 1,984
  • 8
  • 23
  • 43
Awadhoot
  • 737
  • 6
  • 19
  • You might get some support with this via a new ticket at https://github.com/nitaliano/react-native-mapbox-gl/issues – langsmith Aug 02 '19 at 18:05
  • yes..I already raised one on their new library - https://github.com/react-native-mapbox-gl/maps/issues/292 , but will add it on the old one too. – Awadhoot Aug 03 '19 at 17:21

0 Answers0