Get bounding box out of polygon

Question

I have many complex polygons with 750+ points. Is there a quick and efficient way to get a bounding box? I would really like to quote every point and expand the bounding box.

The solution should be in javascript or maybe there is a Google Maps API v3 function that I missed.

---

Or do I need to rigidly set the coordinates of the bounding box and use them to reduce the load on the client?

How to create polygons:

//Coordinates var coordinates = [ new google.maps.LatLng(11,22), new google.maps.LatLng(11,22), new google.maps.LatLng(11,22), //etc up to 200, 500 or even 800 points ] //Options var options = { path: coordinates, strokeColor: "#222", strokeOpacity: 1, strokeWeight: 2, fillColor: "#000", fillOpacity: 0, zIndex: 0 } //Create polygon var polygon = new google.maps.Polygon( options ); //Show it on map polygon.setMap( map ); 

I need to do my homework because direct calculations are excluded. I probably will have to do this hard, but maybe some of you know some convenient online tool that calculates the border frame based on inserted cords?

I need the simplest possible shape, because I need to check if my polygon is in the viewport, and it will probably be a nightmare with 800 points, because I do not know any other way, except to iterate over all the points.

Answer 1

Polygon does not have a getBounds method in the Google Maps API version 3. You can implement it manually. But there are fors in it. By the way. I applied the getBounds method. This is a hard-coded version. Link to the demo.

UPDATE

To get a single border for multiple polygons, use the union method of the getBounds method.

 var coordinates = [ new google.maps.LatLng(10,15), new google.maps.LatLng(12,16), new google.maps.LatLng(11,18), new google.maps.LatLng(11,19), new google.maps.LatLng(13,21), new google.maps.LatLng(12,22), new google.maps.LatLng(13,24), new google.maps.LatLng(11,25), new google.maps.LatLng(8,23), new google.maps.LatLng(7,23), new google.maps.LatLng(8,21), new google.maps.LatLng(6,17), new google.maps.LatLng(9,16) ] var coordinates_1 = [ new google.maps.LatLng(15,28), new google.maps.LatLng(16,30), new google.maps.LatLng(17,30), new google.maps.LatLng(16,31), new google.maps.LatLng(16,32), new google.maps.LatLng(14,29), ] var options = { path: coordinates, strokeColor: "#222", strokeOpacity: 1, strokeWeight: 2, fillColor: "#000", fillOpacity: 0, zIndex: 0, map: map } var options_1 = { path: coordinates_1, strokeColor: "#222", strokeOpacity: 1, strokeWeight: 2, fillColor: "#000", fillOpacity: 0, zIndex: 0 } var polygon = new google.maps.Polygon(options); var polygon_1 = new google.maps.Polygon(options_1); if(!google.maps.Polygon.prototype.getBounds) google.maps.Polygon.prototype.getBounds = function() { var bounds = new google.maps.LatLngBounds(); var paths = this.getPaths(); for (var i = 0; i < paths.getLength(); i++) { var path = paths.getAt(i); for (var j = 0; j < path.getLength(); j++) { bounds.extend(path.getAt(j)); } } return bounds; } var rectangle = new google.maps.Rectangle({ strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, map: map, bounds: polygon.getBounds() }); var rectangle_1 = new google.maps.Rectangle({ strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, map: map, bounds: polygon_1.getBounds() }); var rectangle_single = new google.maps.Rectangle({ strokeColor: '#FFC000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FFF000', fillOpacity: 0.35, map: map, bounds: polygon.getBounds().union(polygon_1.getBounds()) }); 

Answer 2

A simpler and more compact version of the code:

  google.maps.Polygon.prototype.getBounds = function() { var bounds = new google.maps.LatLngBounds(); this.getPath().forEach(function(element,index){ bounds.extend(element); }); return bounds; } 

Answer 3

X and Y coordinates in the array, then x and y array min and max. Although we need more than photography to find out exactly what you want and how.

Answer 4

If points are given, we are not an a priori structure; there is no more efficient way than iterating over points and expanding the bounding box. Since you don't know anything in advance, any point can be a corner point (or an edge point), and therefore you should take this into account. No algorithm can do this more efficiently.

If you have control over a server that provides coordinates, you can save points in advance in the data structure, for example, in the kd tree. Say, for example, all points are static, you can store them in such a kd tree, and then you can defintely speed up everything (although, as far as I know, the problem is still O (n), but you do not need to take all points into account).

However, the problem is that you are not providing any server side information.