React: FitBounts issue when passing array of lonlat - react-mapbox-gl

Question

Am trying to use fitBounds to make all my markers visible with a proper zoom level.

getBounds(){
   return [[12.49637,41.90278],[12.319398,45.441906],[13.055054,47.809532],[16.373724,48.208244]]
}

<Map
   style="mapbox://styles/mapbox/streets-v9"
   containerStyle={{
     height: "100%",
     width: "100%"
   }}
   fitBounds={this.getBounds()}>
     <markers /> 
</Map>

and am getting this error

Error: Invalid LngLat object: (12.49637,41.90278, 12.319398,45.441906)
 at new LngLat (bundle.js:118874)
 at Function.LngLat.convert (bundle.js:118874)
 at LngLatBounds.setSouthWest (bundle.js:118876)
 at new LngLatBounds (bundle.js:118876)
 at Function.LngLatBounds.convert (bundle.js:118876)
 at e.i.fitBounds (bundle.js:119021)
 at ReactMapboxGl.ReactMapboxFactory.ReactMapboxGl.componentDidMount (bundle.js:124648)
 at commons.js:19945
 at measureLifeCyclePerf (commons.js:19755)
 at commons.js:19944

Am not getting whats wrong here. Please help me with this.

Here the react-component am using alex3165/react-mapbox-gl

Answer 1

You are passing the wrong bounds format to the fitBounds() function.

Fit bounds expects as an argument: fitBounds : Array<Array<number>>

See the docs: https://github.com/alex3165/react-mapbox-gl/blob/master/docs/API.md

In mapbox this is called an "LngLatBoundsLike Object", see here: https://www.mapbox.com/mapbox-gl-js/api/#lnglatlike

So your function call must be something like this:

fitBounds([[12.49637,41.90278],[12.319398,45.441906]]);

Where the first argument is the southwest corner and the second argument is the northeast corner of your desired bounding box

Answer 2

The input am passing to fitBounds should be in the form of Array<Array<number>>

getMinOrMax(markersObj, minOrMax, latOrLng) {
 if(minOrMax == "max"){
  return _.maxBy(markersObj, function (value) {
      return value[latOrLng]
  })[latOrLng];
 }else{
  return _.minBy(markersObj, function (value) {
      return value[latOrLng]
  })[latOrLng];
 }
}

getBounds(markersObj) {
  var maxLat = this.getMinOrMax(markersObj, "max", "lat");
  var minLat = this.getMinOrMax(markersObj, "min", "lat");
  var maxLng = this.getMinOrMax(markersObj, "max", "lng");
  var minLng = this.getMinOrMax(markersObj, "min", "lng");

  var southWest = [minLng, minLat];
  var northEast = [maxLng, maxLat];
  return [southWest, northEast];
}

So am using the above methods to find figure out SouthWest and NorthEast points from the given array of marker position objects.

Marker sample objects should to be like below:

var markerPoints = [{lng:12.49637,lat:41.90278},{lng:12.319398,lat:45.441906},{lng:13.055054,lat:47.809532},{lng:16.373724,lat:48.208244}]

<Map
  style="mapbox://styles/mapbox/streets-v9"
  containerStyle={{
   height: "100%",
   width: "100%"
  }}
  fitBounds={this.getBounds(markerPoints)}>
  <markers /> 
</Map>  

Note: Am using lodash liblary for utility functions like min and max in the example.

Thanks,
Josan