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

Question

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?

Answer 1

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]]; 
}));

Answer 2

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
    L.marker([coords[0][i][1], coords[0][i][0]]).addTo(map);
}

// 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
L.rectangle(bbox).addTo(map);
map.fitBounds(bbox);

Answer 3

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).