# Calculating bounding box of given set of coordinates from Leaflet Draw?

I have values generated from Leaflet Draw plugin that look like this:

``````{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-73.98332834243776, 40.76718414067168],
[-73.98332834243776, 40.78941230883186],
[-73.93200159072877, 40.78941230883186],
[-73.93200159072877, 40.76718414067168],
[-73.98332834243776, 40.76718414067168]
]
]
}
}
``````

Is there a way to calculate the bounding box of the given coordinates?

For your use case (GeoJSON), the accepted answer is a good approach.

For anyone else with an arbitrary collection of latlongs that wants to calculate the bounds, you can use leaflets handy L.latLngBounds function just by passing in an array on LatLngs.

e.g.

``````const bounds = L.latLngBounds(data.geometry.coordinates.map((c) => {
return [c[1], c[0]];
}));
``````

That particular json is already a box - so the bounding box will be identical - but here is a general approach

this assumes you have a leaflet map object named 'map' - although not necessary to get the bounding box, allows you to visualize what is going on:

``````var json = {"type":"Feature","properties":{},"geometry":   {"type":"Polygon","coordinates":[[[-73.98332834243776,40.76718414067168],[-73.98332834243776,40.78941230883186],[-73.93200159072877,40.78941230883186],[-73.93200159072877,40.76718414067168],[-73.98332834243776,40.76718414067168]]]}};
var coords = json.geometry.coordinates;

var lats = []; var lngs = [];

for (var i = 0; i < coords[0].length; i++)  {
lats.push(coords[0][i][1]);
lngs.push(coords[0][i][0]);
// following not needed to calc bbox, just so you can see the points
}

// calc the min and max lng and lat
var minlat = Math.min.apply(null, lats),
maxlat = Math.max.apply(null, lats);
var minlng = Math.min.apply(null, lngs),
maxlng = Math.max.apply(null, lngs);

// create a bounding rectangle that can be used in leaflet
bbox = [[minlat,minlng],[maxlat,maxlng]];

// add the bounding box to the map, and set the map extent to it
map.fitBounds(bbox);
``````
• Hi Toms, this is great. Could you explain the logic? Why do we need infinite values? And, if the earth is spherical, how does this work? (I know nothing about Geo space)
– andy
Commented Sep 7, 2018 at 10:42
• Great answer but I think you mixed your lats and lngs. Should be `lats.push(coords[0][i][0]);` and `lngs.push(coords[0][i][1]);`. My data has lats at index 0 and lngs at index 1 Commented Mar 11, 2021 at 17:36
• if the box pass 180 degree then we have a problem Commented Sep 9, 2022 at 8:04

A very simple way of getting the bounds of any GeoJSON compliant data with Leaflet is to transform it into an L.GeoJSON layer group and to use the `getBounds()` method.

This returns an L.LatLngBounds object from which you can read the corners coordinates, or even convert it into a string:

``````var geoJsonLayer = L.geoJson(geoJsonData);

console.log("Bounding Box: " + geoJsonLayer.getBounds().toBBoxString());
// gives "Bounding Box: -73.98332834243776,40.76718414067168,-73.93200159072877,40.78941230883186"
``````

Demo: http://jsfiddle.net/ve2huzxw/77/ (open the console to see the results - hit F12 on most browsers).