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 + \$y/\$len, \$x + \$y/\$len];
}, array(0,0));
return \$centroid;
}``````

Javascript:

``````var getCentroid = function (coord)
{
var center = coord.reduce(function (x,y) {
return [x + y/coord.length, x + y/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
)
)``````

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:

1. [-6.826599519083694, 110.8101224899292],
2. [-6.82387240136356, 110.81316947937012],
3. [-6.82617340796409, 110.81651687622069],
4. [-6.829795340386739, 110.8152723312378],
5. [-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);
var popup = L.popup()
.setLatLng([center,center])
.setContent(center + ', ' + center)
.openOn(map);``````

2. Get Centroid Of A Triangle in leafletjs

Suppose we draw a triangle with the following coordinates:

1. [-6.831158884312092, 110.79171180725098],
2. [-6.835760816356314, 110.78965187072754],
3. [-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

Our Commitment: We respect your privacy, we'll not share your credential to any party

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, This is very Helping. But I wan ask how to get a random coordinate inside polygon using php?

• It was very helpful in a college work.

• This site uses Akismet to reduce spam. Learn how your comment data is processed.

Like Us

Great information from webdevzoom.com right to your inbox

Interesting Posts

• Create Login Form Using HTML5 and CSS3 – Clean and Responsive

• 10 Clean HTML Table Design Using CSS 3 – Fresh Design

• 