Wednesday, April 20, 2016

How to map any arbitrary two points from image to mapview? In iOS overlay mapkit context

Leave a Comment

I can choose points from mapview and can overlay an image there so that image's top left and bottom right are mapped to corresponding mapview's points.

But how can I map any arbitrary two points (not those corner points) from image to mapview's two chosen points? Like the calibrate feature of this app https://itunes.apple.com/us/app/mapcha/id956671318?mt=8

Any hints either SDK specific or math involved to guide towards the solutions are appreciated.

Edited: I didn't realize that my explanation were not making sense to you, pardon. I thought my requirement would easily make sense by providing the reference app and reference feature (Calibrate).

OK, a bit more explanation here. I followed this tutorial to achieve result like this image. Now, all I want to do is to make my app users be able to attach their own images to the map at their desired places like that calibrate feature of the reference app.

Note: You don't have to install the reference app to understand the calibrate feature as it can be understood by just viewing the images with title Step 1, Step 2, Step 3, Step 4 & Finish.

Here are those points' text in case reference would be no more available.

  • Step 1: Take a picture of your map or use a photo from your photo library. Ensure North is up.
  • Step 2: Choose a point on the paper map and locate it on the standard map.
  • Step 3: Repeat for another point. Points that are farther apart give better results.
  • Step 4: Preview the map and check alignment. Adjust the transparency if required.
  • Finish: Now you can see your current location on the paper map.

1 Answers

Answers 1

So, let me start by explaining the intuition behind what this example app does:

image to stick on map:

/*    _____      |     |      |     |           __      |_____|          |__|    (image to stick)    (map) */ 

As you can see, i have made it such that the image shape and size, are different from the map. Now, the reason you have to pick two points on the map and two on the image is to provide a scale for your image.

/*    _____      |   * |      |*    |                 |_____|               (image to stick, with chosen points as *)     */ 

calculate the distance between the two chosen points on the Image, and the two chosen points on the map, lets call them d_image and d_map.

Now you get the scaling of your image by simply doing:

float scale  = (d_map/d_image); 

Using the scale you will be able to find the upper right corner of the image on the map, and the bottom left corner of the image on the map. You can use these points and convert them to coordinates using the following:

CLLocationCoordinate2D image_corner_coordinate = [*yourMap* convertPoint:*image_corner* toCoordinateFromView:self.view]; 

And voila, you have your SouthWest and NorthEast coordinates to pin your overlay to!

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment