How to get particular touch Area?

Question

I am new to Iphone Development,

Given the following map. I want to raise a touch event whenever i select a particular part like "Western Australia". But that particular area is not square or circle to mention the touch area. The boundaries are not in order. How can i get that touch event?

Please any one guide me or give me a tutorial how work with that part?

Answer 1

In your linked map, you can see that each region is defined by polygons, represented by an array of vertices. (If you don't see this, then look at the html source and you will see it then.) You can find a lot of discussion on the internet about algorithms that can determine if a point is inside a polygon described this way. Here is one discussion that may be worth looking at, and before you get to discouraged by it's length (it is very thorough), look at the section titled The "Crossing Count" Algorithm. It's a pretty simple method compared to some of the others that I have seen. It comes down to determining it lines intersect and counting how many edges of the polygon intersect with a ray.

You need to check the touched point against every polygon until you find one that it is inside. One thing that might be worthwhile is to first check if the touch point is inside the bounding box, defined by the min x, max x, min y, and max y values of the each polygon vertex array. If it's not inside the bounding box, then it's not inside the polygon.

As far as detecting the touch event and where it is, look at my answer to this question, which tells how to determine where on the screen that the touch occured (using touch:locationInView:).

I don't know if you intend to zoom in and out of your images, but that will add some complications to how you go about this. If this response doesn't quite help, could you provide more info on what you are trying to do?

Answer 2

@Jim gives excellent advice on the general, portable algorithm. Since you're on iPhone, it may be convenient to convert your map information into UIBezierPath objects, however. See the Drawing and Printing Guide for details on how to create this kind of path object. You can then use [UIBezierPath containsPoint:] to do hit-testing for you. Having a path object also makes it convenient to do your highlighting if you want the same kind of effect as the webpage has.

Answer 3

THere are several options but only one would be rather trivial to implement.

First of all, you will not be able to get this done with regular controls like UIButtons - instead you will want to handle touch-events yourself.

-1- Colored regions; your map is colored and all clickable regions show different colors.

In that case all you need to do is check the pixel below the touched point for its color. Something like that is done within this example.

-2- Custom touch map; a map of geometrical objects, ideally triangles.

You might create some kind of overlay map that consists of triangles. Possibly varying in size. All the triangles on that map are linked to a region. Whenever the user touches your map, you run a collision detection. For details on a simple 2D Point to Polygon collision, check out this article at topcoder.