React-native-mapbox-gl: Get Zoom + Center for Array of Coordinates (fitBounds?)

[luskin]

Hello,

The documentation is extremely sparse on fitBounds, essentially none, given an array of coordinates how would we obtain the center coordinate and zoom level. We are trying to this.map.fitBounds([NE, SW]) with no luck, just nothing happens. Has anybody had any luck centering and zooming the map around 2 points? Thanks.

[nitaliano]

Where are you calling it in the React lifecycle?

[luskin]

I've tried in the constructor, componentDidMount as well as when the ref is set on the MapView. Is there any documentation anywhere for fitBounds? It would be helpful to simply look at an example to see if we are even implementing the coordinates correctly.

[luskin]

We are clearly doing something wrong, @nitaliano can you please scan over this component and tell us where we are making our mistake?

class Map extends Component {
  componentDidMount() {
    // as per docs: fitBounds(northEastCoordinates, southWestCoordinates[, padding][, duration])
    this.map.fitBounds([-118.357, 34.066784], [-118.439527, 33.993731], 0, 200)
  }

  render() {
    const { pickupLocation, deliveryLocation } = this.props.shipment
    return (
      <View style={styles.container}>
        <MapboxGL.MapView
          ref={ref => (this.map = ref)}
          style={styles.mapView}
          zoomLevel={3}
          maxZoomLevel={19}
          centerCoordinate={[-118.135426, 34.795765]}>
          <MapboxGL.PointAnnotation
            coordinate={[pickupLocation.coordinates.longitude, pickupLocation.coordinates.latitude]}
            id={'pickup-pin'}>
            <Image source={Icons.Map.PickupPin} />
          </MapboxGL.PointAnnotation>
          <MapboxGL.PointAnnotation
            coordinate={[deliveryLocation.coordinates.longitude, deliveryLocation.coordinates.latitude]}
            id={'delivery-pin'}>
            <Image source={Icons.Map.DeliveryPin} />
          </MapboxGL.PointAnnotation>
        </MapboxGL.MapView>
      </View>
    )
  }
}

[luskin]

@nitaliano Looks like I had to wait until onDidFinishingLoadingMap was called for this to work. Makes sense actually was just a confusing debug since the method was so poorly documented. To anyone else looking for the solution, implement the onDidFinishLoadingMap prop in your MapView and you can fit initial bounds there.

[saike]

map.fitBounds method receive array of two arrays of type: [ lng, ltd ] as first argument:
this.map.fitBounds([ [-118.357, 34.066784], [-118.439527, 33.993731] ]),
docs: https://docs.mapbox.com/mapbox-gl-js/example/fitbounds/