How do I get the bounding box of a mapboxgl.GeoJSONSource object?

Question

I'm setting up a Mapbox GL JS map like this:

mapboxgl.accessToken = 'pk.my_token';
var cityBoundaries   = new mapboxgl.GeoJSONSource({ data: 'http://domain.com/city_name.geojson' } );
var map              = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v8',
  center: [cityLongitude,cityLatitude],
  zoom: 13
});

Then I'm loading that GeoJSON data onto the map after it loads like this:

map.on('style.load', function(){
  map.addSource('city', cityBoundaries);
  map.addLayer({
    'id': 'city',
    'type': 'line',
    'source': 'city',
    'paint': {
      'line-color': 'blue',
      'line-width': 3
    }
  });
});

At this point, I have a map that's centered at the location I specified in new mapboxgl.Map, and it's at zoom level 13. So, only a piece of the GeoJSON data is visible on the map. I'd like to re-center and re-zoom the map so that the entire GeoJSON data is visible.

In Mapbox JS, I would do this by loading the GeoJSON data into a featureLayer and then fitting the map to its bounds with:

map.fitBounds(featureLayer.getBounds());

The fitBounds documentation for Mapbox GL JS indicates that it wants the bounds in the format of [[minLng, minLat], [maxLng, maxLat]].

Is there a way to determine the mix/max latitude & longitude values of this GeoJSON layer?

Answer 1

Based on the 'Obtaining a bounding box' section of this post, I've come up with this process...

map.on('style.load', function(){
  $.getJSON('http://citystrides.dev/city_name.geojson', function(response){
    var boundingBox = getBoundingBox(response);
    var cityBoundary = new mapboxgl.GeoJSONSource({ data: response } );

    map.addSource('city', cityBoundary);
    map.addLayer({
      'id': 'city',
      'type': 'line',
      'source': 'city',
      'paint': {
        'line-color': 'blue',
        'line-width': 3
      }
    });
    map.fitBounds([[boundingBox.xMin, boundingBox.yMin], [boundingBox.xMax, boundingBox.yMax]]);
  })
});

function getBoundingBox(data) {
  var bounds = {}, coords, point, latitude, longitude;

  for (var i = 0; i < data.features.length; i++) {
    coords = data.features[i].geometry.coordinates;

    for (var j = 0; j < coords.length; j++) {
      longitude = coords[j][0];
      latitude = coords[j][1];
      bounds.xMin = bounds.xMin < longitude ? bounds.xMin : longitude;
      bounds.xMax = bounds.xMax > longitude ? bounds.xMax : longitude;
      bounds.yMin = bounds.yMin < latitude ? bounds.yMin : latitude;
      bounds.yMax = bounds.yMax > latitude ? bounds.yMax : latitude;
    }
  }

  return bounds;
}

Here's a walkthrough of what the code is doing, for anyone out there who needs a detailed explanation:

• map.on('style.load', function(){
  • When the map loads, let's do the stuff in this function.
• $.getJSON('http://citystrides.dev/city_name.geojson', function(response){
  • Get the city's GeoJSON data. This is an asynchronous call, so we have to put the all the code that uses this data (the response) inside this function.
• var boundingBox = getBoundingBox(response);
  • Get the bounding box of this GeoJSON data. This is calling the , function(){ that appears after the 'map on style load' block.
• var cityBoundary = new mapboxgl.GeoJSONSource({ data: response } );
  • Build Mapbox's GeoJSON data.
• map.addSource('city', cityBoundary);
  • Add the source to Mapbox.
• map.addLayer({
  • Add the layer to Mapbox.
• map.fitBounds([[boundingBox.xMin, boundingBox.yMin], [boundingBox.xMax, boundingBox.yMax]]);
  • Adjust the map to fix the GeoJSON data into view.
• function getBoundingBox(data) {
  • This function iterates over the returned GeoJSON data, finding the minimum and maximum latitude and longitude values.

---

One thing to note in the getBoundingBox function is this line:

coords = data.features[i].geometry.coordinates;

In the original post, linked above, this line was written as coords = data.features[i].geometry.coordinates[0]; because their data for the list of coordinates was an array of arrays. My data isn't formatted that way, so I had to drop the [0]. If you try this code & it blows up, that might be the reason.

Answer 2

You can use the turf.js library. It has a bbox function:

const bbox = turf.bbox(foo);

https://turfjs.org/docs/#bbox