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:

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[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:

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