Get Center of Polygon, Triangle, and Area Using Javascript and PHP
Hi there, today we’ll discuss some functions that can be used to get center of polygon, the code is simple, just a few lines of code, I found it on stackoverflow then I adapt as necessary to suit my need, this code can also be applied to get centroid of a triangle or other shapes. I write the script using PHP and Javascript, If you work with another programming language you can port it to suit your need, the important here is you got the programming flow.
Furthermore, this snippet works with all kinds of areas such as simple line, triangle, square, polygon, etc., with different types of coordinates, such as point (x, y) and geographic coordinate (latitude and longitude). I usually use it to get center of polygon in lefaletjs workspace. If you want to instantly calculate the centroid, you can use our free tools: Centroid Calculator
Here is the code:
PHP:
function getCentroid($coord)
{
$centroid = array_reduce( $coord, function ($x,$y) use ($coord) {
$len = count($coord);
return [$x[0] + $y[0]/$len, $x[1] + $y[1]/$len];
}, array(0,0));
return $centroid;
}
Javascript:
var getCentroid = function (coord)
{
var center = coord.reduce(function (x,y) {
return [x[0] + y[0]/coord.length, x[1] + y[1]/coord.length]
}, [0,0])
return center;
}
These functions will return x and y coordinate as an array, in order to work properly it require an argument with array data type , the format of array should be like follows:
array
(
0 => array
(
0 => 3, // x or latitude
1 => 4 // y or longitude
),
1 => array
(
0 => 3,
1 => 0
),
2 => array
(
0 => 0,
1 => 0
),
3 => array
(
0 => 0,
1 => 4
)
)
Example I: Get Centroid Of A Triangle, Polygon, and Line That Use Point As Coordinate[x, y]
1. Get Centroid Of A Triangle
An example for a triangle with coordinates: [1,1], [2,5], and [5,2] will generate the center coordinate: [3.33, 2.66]
PHP
$points = array(array(1,2), array(4,5), array(5,1));
print_r(getCentroid($points));
Javascript:
var points = [[1,2], [4,5], [5,1]];
console.log(getCentroid(points));
2. Get Center of Polygon
In this example we’ll calculate the center of polygon with coordinates:[3.5, 6], [6, 4], [5, 1], [2, 1], and [1, 4], the function will generate the center coordinate: [3.5, 3.2]
PHP:
$points = array(array(3.5,6), array(6,4), array(5,1), array(2,1), array(1,4));
print_r(getCentroid($points));
Javascript:
var points = [[3.5,6], [6,4], [5,1], [2,1], [1,4]]
console.log(getCentroid(points));
3. Get Center of Line
Even in a simple coordinate like lines, this function works like a charm, for instance, line with coordinates: [1, 3] and [7,1] will get [4, 2] as it centers.
PHP:
$points = array(array(1,3), array(7,1));
print_r(getCentroid($points));
Javascript:
var points = [[1,3], [7,1]];
console.log(getCentroid(points));
Example II: Get Centroid Of A Triangle and Polygon That Use Geographic Coordinate [latitude, longitude]
In these examples I use leafletjs – most popular javascript map library – to demonstrate the shape of polygon that pointed with geographic coordinates, there is no particular reason why I chose this library as an example, just because I work a lot with it, again, you can adopt it to your favorite library.
1. Get Center of Polygon in leafletjs
Suppose we have a polygon with the following coordinated:
- [-6.826599519083694, 110.8101224899292],
- [-6.82387240136356, 110.81316947937012],
- [-6.82617340796409, 110.81651687622069],
- [-6.829795340386739, 110.8152723312378],
- [-6.829923172794863, 110.81162452697752]
we’ll get [-6.827272768318589, 110.81334114074707] as the center of polygon.
PHP:
$geo = array(
array(-6.826599519083694, 110.8101224899292),
array(-6.82387240136356, 110.81316947937012),
array(-6.82617340796409, 110.81651687622069),
array(-6.829795340386739, 110.8152723312378),
array(-6.829923172794863, 110.81162452697752)
);
print_r(getCentroid($geo));
Javascript:
var geo = [
[-6.826599519083694, 110.8101224899292],
[-6.82387240136356, 110.81316947937012],
[-6.82617340796409, 110.81651687622069],
[-6.829795340386739, 110.8152723312378],
[-6.829923172794863, 110.81162452697752],
]
console.log(getCentroid(geo));
Example of The leafletjs code:
center = getCentroid(feature.geometry.coordinates[0]);
var popup = L.popup()
.setLatLng([center[0],center[1]])
.setContent(center[0] + ', ' + center[1])
.openOn(map);
2. Get Centroid Of A Triangle in leafletjs
Suppose we draw a triangle with the following coordinates:
- [-6.831158884312092, 110.79171180725098],
- [-6.835760816356314, 110.78965187072754],
- [-6.836101698449195, 110.79677581787108]
we’ll get the coordinate: [-6.8343404663725345, 110.7927131652832] as centroid of the triangle.
PHP:
$triangle = array(
array(-6.831158884312092, 110.79171180725098),
array(-6.835760816356314, 110.78965187072754),
array(-6.836101698449195, 110.79677581787108)
);
print_r(getCentroid($triangle));
Javascript:
var triangle = [
[-6.831158884312092, 110.79171180725098],
[-6.835760816356314, 110.78965187072754],
[-6.836101698449195, 110.79677581787108]
]
console.log(getCentroid(triangle));
Subscibe Now
Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!
7 Responses
is there no one how have a point-in-polygon for latitude and longitude?
Hi, do you mean get center of latitude and longitude coordinate?
Just wanted to say “Thanks!” for posting this code (in multiple languages). I have found it very useful for a computer vision project I am working on.
Hi, you are welcome
Hi, This is very Helping. But I wan ask how to get a random coordinate inside polygon using php?
Thank you for your post.
It was very helpful in a college work.
Hi, thank you..