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?

James Chevalier · Answer 1 · 2016-02-28T17:19:14.647

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.

This function should probably specify that it only works for polygons. Like you said, it won't work for other geometries that don't have the same structure such as a Point, MultiPoint, and LineStrings. — jabbermonkey, Apr 25 '16 at 17:21
It's not for Polygons. Only for MultiPoints, and it works pretty good for them. — Aleksey Kuznetsov, Sep 03 '20 at 05:39

score 4 · Answer 2 · edited Aug 07 '19 at 23:23

4

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

const bbox = turf.bbox(foo);

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

edited Aug 07 '19 at 23:23

James Chevalier

10,604
5
48
74

answered Aug 07 '19 at 10:01

four-eyes

10,740
29
111
220

score 2 · Answer 3 · answered Nov 25 '16 at 17:21

I use the turf-extent library, which is maintained by the Mapbox bunch anyhow. https://www.npmjs.com/package/turf-extent is the node module link. In your code you simply import(ES6) or require as so:

ES6/Webpack: import extent from 'turf-extent';
Via script tag: `<script src='https://api.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js'></script>`

Then feed your response to the function, for example:

ES6/Webpack: let orgBbox = extent(response);
Normal: var orgBbox = turf.extent(geojson);

Then you can use the array values to set your map center:

center: [orgBbox[0], orgBbox[1]]

Or as you want, to fit bounds:

map.fitBounds(orgBbox, {padding: 20});

Here is an example using the turf.min.js in a regular html tag in case you are not using webpack or browser: https://bl.ocks.org/danswick/83a8ddff7fb9193176a975a02a896792

Happy coding and mapping!

score 2 · Answer 4 · answered Mar 17 '17 at 13:51

Based on James Chevalier's answer. For polygon/multipolygon tilesets that are assigend to a map in Mapbox Studio I am using this to get the bounding box:

getPolygonBoundingBox: function(feature) {
    // bounds [xMin, yMin][xMax, yMax]
    var bounds = [[], []];
    var polygon;
    var latitude;
    var longitude;

    for (var i = 0; i < feature.geometry.coordinates.length; i++) {
        if (feature.geometry.coordinates.length === 1) {
            // Polygon coordinates[0][nodes]
            polygon = feature.geometry.coordinates[0];
        } else {
            // Polygon coordinates[poly][0][nodes]
            polygon = feature.geometry.coordinates[i][0];
        }

        for (var j = 0; j < polygon.length; j++) {
            longitude = polygon[j][0];
            latitude = polygon[j][1];

            bounds[0][0] = bounds[0][0] < longitude ? bounds[0][0] : longitude;
            bounds[1][0] = bounds[1][0] > longitude ? bounds[1][0] : longitude;
            bounds[0][1] = bounds[0][1] < latitude ? bounds[0][1] : latitude;
            bounds[1][1] = bounds[1][1] > latitude ? bounds[1][1] : latitude;
        }
    }

    return bounds;
}

score 0 · Answer 5 · answered Mar 02 '23 at 10:52

first use the @turf/turf package:

import * as turf from '@turf/turf'

then construct a bbox via your JSON source feature (in this case a line string):

const locationCoords = locations.map(({ latitude, longitude }) => [
    longitude,
    latitude,
])


const line = turf.lineString(locationCoords)
const bbox = turf.bbox(line) as LngLatBoundsLike

newMap.fitBounds(bbox)

score 0 · Answer 6 · edited Jul 15 '23 at 10:11

Based on James Chevalier's AND tobias47n9e answer.

I have extended the answers with a recursive approach to be able to process all types of polygons and multipolygons. With the answer of tobias47n9e I got partly no results, because the different structures of the polygons were not addressed.

function getPolygonBoundingBox(arr, bounds = [[], []]) {
  for (var i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i][0][0])){
      bounds = getPolygonBoundingBox(arr[i], bounds);
    } else {
      polygon = arr[i];
      for (var j = 0; j < polygon.length; j++) {
        longitude = polygon[j][0];
        latitude = polygon[j][1];
        bounds[0][0] = bounds[0][0] < longitude ? bounds[0][0] : longitude;
        bounds[1][0] = bounds[1][0] > longitude ? bounds[1][0] : longitude;
        bounds[0][1] = bounds[0][1] < latitude ? bounds[0][1] : latitude;
        bounds[1][1] = bounds[1][1] > latitude ? bounds[1][1] : latitude;
      }
    }
  }
  return bounds;
 }
 
 
getPolygonBoundingBox(feature.geometry.coordinates);

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

6 Answers6

Linked