0

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">
</map>

and jquery:

$('.diff').click(function(e){
//code here
});

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

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

Marinescu Edward
  • 105
  • 3

1 Answers1

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.
    x.push(values[i++]);
    // push in y
    y.push(values[i]);
}

// 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,

Apolo

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

Apolo
  • 183
  • 1
  • 12