Calculating the bounding box of GeoJSON object using JavaScript

Question

I have Django app with Leaflet on the frontend and I need to calculate the bbox of a GeoJSON object so that I can pass the coordinates to map.fitBounds()

I have tried some libs as well as trying the getBounds methods of certain objects in Leaflet, such as FeatureGroup, but it complained that the bounds were not defined.

Can anyone point me to a simple solution to this?

In general, map.fitBounds(featureGroupName.getBounds()) should work, as long as the FeatureGroup contains data. Have you examined the FeatureGroup to see what it looks like at the time you are trying to get the bounds? — nathansnider, Oct 18 '15 at 19:23

score 29 · Answer 1 · edited Mar 09 '18 at 03:16

If you want to calculate the bounds of a GeoJSON-Layer you can do:

var geojsonLayer = L.geoJson(your_data).addTo(map);
map.fitBounds(geojsonLayer.getBounds());

Example: http://jsfiddle.net/expedio/qgkbrjwt/

(Map zooms to Layer extent after the Layer is completely loaded).

If you want to calculate the Bounds of each single feature you can do the following:

var myGeoJSON = L.geoJson(data, {
    onEachFeature: function (feature, layer) {
        // assign bounds to feature
        feature.properties.bounds_calculated = layer.getBounds();
    }
}).addTo(map);

// do whatever you want with
// feature.properties.bounds_calculated

Example: http://jsfiddle.net/expedio/fxxguv0v/

(Zoom to feature function in each popup)

Fixed the demo to remove dep on ajax request http://jsfiddle.net/fxxguv0v/22/ — sidonaldson, Apr 27 '17 at 10:52

score 5 · Answer 2 · edited Feb 06 '24 at 13:29

Use the geojson-bbox module to calculate the bbox of any GeoJSON.

Download this geojson-bbox/dist /geojson-bbox.min.js file and save it in your project.

Usage:

.html file

</body>
    <script type="text/javascript" src="path/to/geojson-bbox.min.js"></script>
<body>

.js file:

// reading and parsing the GeoJSON file
const geojson = JSON.parse(geojsonfile);
// getting the bbox extent as an array [left, bottom, right, top] from the GeoJSON file
var gj_extent = bbox(geojson);

There is npm module for geojson-bbox

Node.js usage:

// const bbox = require('geojson-bbox'); // with CommonJS
import * as bbox from 'geojsjon-bbox';
const feature = { 
  type: 'Feature',
  geometry: {
    type: 'LineString', 
    coordinates: [
      [10, 40], [40, 30], [20, 20], [30, 10]
    ]
  }
};
const extent = bbox(feature); 
// extent is array 
// [10, 10, 40, 40]

Thank you @Taras for enhancing the answer. – Gagan Feb 07 '24 at 06:05 — Gagan, Feb 07 '24 at 06:05

Calculating the bounding box of GeoJSON object using JavaScript

2 Answers2

Linked