Let's say I have this map:

<map name="diffmap1" id="diffmap1" class="myMap">
<area shape="poly" coords="152,347,253,292,264,307,167,358" class="diff diff1">
<area shape="poly" coords="93,244,164,215,171,233,97,264" class="diff diff2">

and jquery:

//code here

How can I calculate the maximum height and width of each polygon?

LE: https://www.dropbox.com/s/erplo5fwtp284oh/qwe.jpg

  • \$\begingroup\$ What do you mean by maximum height and width vs. height and width? \$\endgroup\$
    – AturSams
    Apr 24, 2014 at 7:55
  • \$\begingroup\$ I put a picture in the post to see \$\endgroup\$ Apr 24, 2014 at 8:08

1 Answer 1


I feel like I'm helping you a lot these time ;-)

So you have this :

<area shape="poly" coords="152,347,253,292,264,307,167,358" class="diff diff1">

and you know that coords are like "x1,y1,x2,y2[...]" so you must put every x in one array and every y in another array. Then, process =)

var x = [];
var y = [];
// string value of the attribute coord :
var coord = $(".diff1").attr('coord');
// split it in some int values
var values = coord.split(',');
var length = values.length;
// fill in your X and Y arrays
for (var i = 0; i < length; i++) {
    // push in x and increase i by 1.
    // push in y

// get the min & max X values :
var minX = Math.min.apply(null, x),
maxX = Math.max.apply(null, x);

// get the min & max Y values :
var minY = Math.min.apply(null, y),
maxY = Math.max.apply(null, y);

// Here is your result :
var width = maxX - minX;
var height = maxY - minY;

Your devoted servant,


NOTE : in my code I use the selector ".diff1", you have to do the same with ".diff2" to have values of your other polygon.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .