# How to find the center of an area element with JavaScript

In a recent project I was working on a script interacting with an image map consisting of irregular areas and needed to find the center of each of these areas.

I couldn’t find a function to do that so I wrote my own. It’s pretty simple, but in case anyone else needs this I thought I’d share.

The function takes two parameters:

shape
The type of shape (`circle`, `poly`, or `rect`)
coords
A comma-separated list of coordinate values

The values are just the text values of the `shape` and `coords` attributes of the `area` element.

The function looks like this:

``````function getAreaCenter(shape, coords) {
var coordsArray = coords.split(','),
center = [];
if (shape == 'circle') {
// For circle areas the center is given by the first two values
center = [coordsArray, coordsArray];
} else {
// For rect and poly areas we need to loop through the coordinates
var coord,
minX = maxX = parseInt(coordsArray, 10),
minY = maxY = parseInt(coordsArray, 10);
for (var i = 0, l = coordsArray.length; i < l; i++) {
coord = parseInt(coordsArray[i], 10);
if (i%2 == 0) { // Even values are X coordinates
if (coord < minX) {
minX = coord;
} else if (coord > maxX) {
maxX = coord;
}
} else { // Odd values are Y coordinates
if (coord < minY) {
minY = coord;
} else if (coord > maxY) {
maxY = coord;
}
}
}
center = [parseInt((minX + maxX) / 2, 10), parseInt((minY + maxY) / 2, 10)];
}
return(center);
}``````

It returns an array with two values – the X center and the Y center. Here’s an example of calling the function:

``````var area = document.getElementById('area-1');
var center = getAreaCenter(area.getAttribute('shape'), area.getAttribute('coords'));
alert('X-center: ' + center + ', Y-center: ' + center);``````

In my use case I looped through the `area` elements of a particular `map` element and stored the center coordinates in a custom attribute on each `area` element for easy access later on.

Hope it’s of use to someone.

Posted on April 18, 2011 in JavaScript