AFComponents.com

Step 0. Acquire a map image.

You can buy an image of desired area from various vendors (for example, http://digitalglobe.com). We will use a free sample from DigitalGlobe.

http://www.digitalglobe.com/index.php/27/Sample+Imagery+Gallery?ITEM=29.

According to the information on site it is an aerial image of Kauai, Hawaii.

 

Step 1. Split the map in tiles 256x256 pixels each.

The best way to do this is to use a free Zoomify splitter (http://zoomify.com/express.htm) Download & split the big image. It will organize the resulting tiles in folders: TileGroup0, TileGroup1, etc. Also this tool shrinks the map image twice and creates tiles until all of the map can fit in one 256x256 tile. This fits our needs most perfectly. In the root folder you will also get ImageProperties.xml file which will contain information about your map image. You can save the results on a remote server, or locally on your computer.

We will put the images and XML file to our Amazon server:

http://umap.s3.amazonaws.com/demo/hawaii/ImageProperties.xml

Step 2. Define projection.

To accurately bind our map to geographical coordinates we need to define map projection and transformation. We have written a tool that can calculate the needed transformation for you. You can find it here:

http://umap.s3.amazonaws.com/tutorial/projection/calculator/TransformCalculator.html

Here is what you should see once you run it:

 

To calculate the transformation we need to specify:

a. Original image dimensions.
b. Geographical and bitmap coordinates of the 3 widely spread points. The points should form a triangle which should cover as much of the map image as possible.
c. Projection and resulting code type.

Step 2a. So we go, first, specify the dimensions of the original image, 3004x3004 pixels.

Step 2b. Second, we need to define the 3 points. To get the latitude and longitude of the selected points, we can take GPS, fly to Kauai, Hawaii... or use another tool based on UMap:

http://umap.s3.amazonaws.com/tutorial/projection/locator/Locator.html

Here is what we should do:

1. Search for "Kauai, Hawaii".



2. Switch the map type to "Satellite", zoom in to the shore shown on the original image.



3. Select a point, for example the "circle" in the top-left corner (lat=22.227972, lng=-159.486775). Double click the map to put marker there. Write down the lat,lng of a point.Repeat for 2 more points.









4. Now we need to define x,y of each point in the original image. For this purpose, open the source image in you favorite Image Editor (e.g. Photoshop). I will MS Paint, open my image, select the "pencil" tool and move the pointer to the first selected location. We can see the coordinates in the lower left corner of the window: (670, 593)



Repeat the same for the 2 other points. Once you have all the data, input it in the required fields in the "Transformation Calculator" (or simply press "sample data", which contains the needed data for this image):

Step 2c. Lastly, we select the projection algorithm and generated code type. Google, Microsoft, Yahoo all use Mercator Projection, so we select it from the list. In the code type instead of "Simple code", we should select "Custom Class", so that a complete projection class will be generated. Finally, we click "Calculate!" and get the code:



This is a Custom Projection class, that is based on a MercatorProjection, contains our transformation and bitmap size. Save this in your project's folder with the name "CustomProjection.as". Finally, the hardest step is over, so we can go on...

Step 3. Define custom map Provider. Now we should define the custom provider for UMap. Since v1.0 we have a special provider class for Zoomify -split images. So we just instantiate it, passing the url of our Image Properties.xml file, and a custom projection reference:



Step 4. UMap application. Now we can use this provider in a UMap application. We can also add 3 points to check the map accurracy.