Find centerpoint of polygon in JavaScript
This will get the centerpoint of any shape as an array [centerX, centerY]:
var center = function (arr)
{
var minX, maxX, minY, maxY;
for (var i = 0; i < arr.length; i++)
{
minX = (arr[i][0] < minX || minX == null) ? arr[i][0] : minX;
maxX = (arr[i][0] > maxX || maxX == null) ? arr[i][0] : maxX;
minY = (arr[i][1] < minY || minY == null) ? arr[i][1] : minY;
maxY = (arr[i][1] > maxY || maxY == null) ? arr[i][1] : maxY;
}
return [(minX + maxX) / 2, (minY + maxY) / 2];
}
Another way:
var center = function (arr)
{
var x = arr.map (function (a){ return a[0] });
var y = arr.map (function (a){ return a[1] });
var minX = Math.min.apply (null, x);
var maxX = Math.max.apply (null, x);
var minY = Math.min.apply (null, y);
var maxY = Math.max.apply (null, y);
return [(minX + maxX) / 2, (minY + maxY) / 2];
}
getCenter (coords);
Alternatively if your browser supports ECMAScript 6, then you can use Arrow functions and Spread syntax as follows:
var center = function (arr)
{
var x = arr.map (xy => xy[0]);
var y = arr.map (xy => xy[1]);
var cx = (Math.min (...x) + Math.max (...x)) / 2;
var cy = (Math.min (...y) + Math.max (...y)) / 2;
return [cx, cy];
}
jsfiddle
This should get the centroid of the area of any polygon
/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/*global console */
(function () {
"use strict";
function Point(x, y) {
this.x = x;
this.y = y;
}
function Region(points) {
this.points = points || [];
this.length = points.length;
}
Region.prototype.area = function () {
var area = 0,
i,
j,
point1,
point2;
for (i = 0, j = this.length - 1; i < this.length; j=i,i++) {
point1 = this.points[i];
point2 = this.points[j];
area += point1.x * point2.y;
area -= point1.y * point2.x;
}
area /= 2;
return area;
};
Region.prototype.centroid = function () {
var x = 0,
y = 0,
i,
j,
f,
point1,
point2;
for (i = 0, j = this.length - 1; i < this.length; j=i,i++) {
point1 = this.points[i];
point2 = this.points[j];
f = point1.x * point2.y - point2.x * point1.y;
x += (point1.x + point2.x) * f;
y += (point1.y + point2.y) * f;
}
f = this.area() * 6;
return new Point(x / f, y / f);
};
var polygon = [
{"x": -1.2, "y": 5.1},
{"x": -1.3, "y": 5.2},
{"x": -1.8, "y": 5.9},
{"x": -1.9, "y": 5.8}
],
region = new Region(polygon);
console.log(region.centroid());
}());
On jsfiddle
To get the bounds of a Polygon (with your data) in the Google Maps API v3 (not tested):
var coords = [
[ -1.2, 5.1 ],
[ -1.3, 5.2 ],
[ -1.8, 5.9 ],
[ -1.9, 5.8 ]
];
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i<coords.length; i++) {
bounds.extend(new google.maps.LatLng(coords[i][0], coords[i][1]));
}
var center = bounds.getCenter();
var latitude = center.lat(); // latitude=-1.5499999999999998
var longitude = center.lng(); // longitude=5.5
var coordinates = center.toUrlValue(); // coordinates=-1.55,5.5
var coords = [
[-1.2, 5.1],
[-1.3, 5.2],
[-1.8, 5.9],
[-1.9, 5.8]
];
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < coords.length; i++) {
bounds.extend(new google.maps.LatLng(coords[i][0], coords[i][1]));
}
var center = bounds.getCenter();
var latitude = center.lat();
console.log("latitude=" + latitude);
var longitude = center.lng();
console.log("longitude=" + longitude);
var coordinates = center.toUrlValue();
console.log("coordinates=" + coordinates);
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>