# Polygon shaped buttons

Is there a way to create polygon shapes for buttons? Should I just use an imagemap in a webview? I want to create a clickable USA image map.

• button
• imagemap
• poly
• polygon
• shapes

Here's what I finally came up.

I created an imageview with a photo of the USA Map. I then created several dictionaries of points, defining the regions I wanted to capture clicks from on the image. I then added an event listener that uses the following function to detect if the click event happened inside any of the polygon dictionaries I had defined.

``````// Point inside a polygon

function isPointInPoly(poly, pt)
{
for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y)) && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x) && (c = !c);
return c;
}

/** Example implementation code

points = [
{x: 0, y: 0},
{x: 0, y: 50},
{x: 50, y: 10},
{x: -50, y: -10},
{x: 0, y: -50},
{x: 0, y: 0}
];

alert(isPointInPoly(points, {x: 10, y: 10}) ? "In" : "Out");

*/
``````
• Hi Jeff,

could you please share your code. imageview with a photo of the USA Map.

Thanks,

• Jeff Krause, many thanks for this, you saved my day !

• nice logic Jeff..thanks..works like charm..

• Thanks a lot. Blessings Jeff!!

• Jeff,

``````amazing script, but now if i want to check if a poly is in poly do you have any guideline to realize it...
``````

Thanks a lot
Steve