search

nitaliano / react-native-mapbox-gl

A Mapbox GL react native module for creating custom maps
Other
2.16k stars 699 forks source link

Not able to reset pitch, heading, bounds, centerCoordinate together in single config #1653

Open awdhootlele opened 4 years ago

awdhootlele commented 4 years ago

I have already asked this on sof and on the new library but here's what the issue is -

When I try to set the pitch, heading, bounds and centerCoordinate of a camera in a single config, the pitch/heading is not reset back to default (0).

This is based on the new library where the Camera related component is separated out from MapView, but rest of the things are I guess same.

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 (react-native-mapbox-gl/maps) RN version - 0.59.10