Apple Map Overlay and Aerial Images

Overlay objects are the way to display geographic data on top of a map view. Overlays can take the form of different shapes such as circles (MKCircle), polylines (MKPolyline), poligons (MKPolygon) and custom overlays.

Here, I will show how to use custom overlays on top of MKMapView. We can use raster overlays to show how a city has changed over time or the physical degradation of the coast line. If you want to know more, iNVASIVECODE provides specialized consulting on location-based services.

A raster overlay can be delivered in many different formats, but in order to overlay it on top of the iOS map view correctly, your overlay has to be generated in the Mercator projection. If this is not the case, your raster image must be warped to match the Mercator projection used by Map Kit.

You can run into several problems when you try to overlay images that come from unknown sources with unknown projection. So that’s what this post is about and how to solve a few common problems you might encounter.

Let’s see the steps that Apple gave to overlay map imagery. There is a 2010 WWDC session you can watch, Customizing Maps with Overlays. I will use the sample code they provided during the session, the TileMap project. Please, download it, because we will use it in this example.

Before starting, install the Geospatial Data Abstraction Library. I won’t be covering this step here, but if you go here you can download GDAL and then install it on your computer.

Example 1: Let’s go to Hawaii

Let’s start by overlaying an image downloaded from the Internet. If you want to follow this example, please go here and download the georeferenced file that belongs to the island: Hawaii - Alexander 1901.

The first step is to get information from our .tif file to check if everything is correct. GDAL provides a handy utility: gdalinfo. At the command line, simply type gdalinfo <filename>, where <filename> is the path to the file.

You should get an output that looks like this:

Note that the accompanying .aux and .rrd files you downloaded contain the resulting information from the georeferencing process. Georeferencing is the process of associating the map to the geographical coordinates. Raw raster data, like a scanned map or an aerial photo, normally don’t have a relation to a coordinate system. Georeferencing is the process to associate the image to the geographical coordinates.

Now, take the Corner Coordinates shown in the shell result and enter them in Apple or Google maps to visualize them. If you use Apple Maps you need to convert the coordinate from DMS (Degrees, Minutes, Seconds) to Decimal Degree and enter them in the format latitude,longitude. If you use Google Maps you can use any format. Either way, the result for the upper left coordinate should be a pin on the map close to Hawaii.

Alt text

Open the georef_Hawaii_Alexander_1901.tif file. Notice that the pin we see on Google Maps corresponds to the upper left corner of this image.

Now, we can move on to the following step, creating a VRT description. VRT files are a special XML format defined for GDAL. At the command line, simply type gdal_translate -of <format> <source> <destination>, where format is the VRT format, source is the input file path and destination is the output destination path. In our case, we have:

This command will generate a VRT file that will be used as the input file to cut the map into tiles at multiple levels of detail. Apple recommended an utility that someone did as Google Summer of Code project: gdal2tiles.py. gdal2tiles.py is a script that generates a directory structure with a super-overlay:

The -p mercator parameter is used to match the projection used by Apple maps.

Check the result and you will see a directory with several folders, where each numbered folder corresponds to a zoom level. Now, you just have to take the whole directory structure and replace the Tiles folder in the original project (the TileMap project I asked you to download at the beginning of this post) and then, run it. You should see this:

Alt textAlt textAlt textAlt text

Notice that for the most part of the contour of the island, the matching is perfect. In some parts, it looks like the island was a bit bigger, so I assume that the coast line has been eroded and has changed since 1901, when the overlayed map was produced. If we take a look at the shore of the city of Hilo, which has been most affected by tsunamis, where the insrushing water is accentuated by the shape of hilo Bay, we’ll see that the ocean has acquired some land. The overlayed map is a topographic, a type of map characterized by large-scale detail and quantitative representation of relief, using contour lines to represent elevation.

I would also like to mention the difference if we compare the quantity of geographic names that appear on each map.

Alt textAlt text

Example 2: Flying over the Sacramento river

Now, let’s download an aerial image from the Sacramento River that has been geo-referenced. If you want to follow the example, please go here and download image 2-112.

I’m proud to show this example because Robert, the Resource Conservationinst from the Department of Water in California was very kind and helpful and he prepared some data I needed to write this post. I know that his department is working hard to make available as much data as possible and they encourage people to use their data:

Cal-atlas offers a free service to California Data developers to provide support for the distribution and collaborative development of geo-spatial data. Services include permanent file archival, data package uploads, mailing lists, bug tracking, message boards/forums, task management, site hosting, and web-based administration.

So, thank you Robert for your help!

Let’s start typing at the command line to get the information about the image as we have done before.

You should get an output that looks like this:

Notice that although there is a list of accompanying files as the example above (.aux, .rrd, .tif, .aux, .xml) there are two main differences:

  • The coordinate system field is empty.
  • The listed corner coordinates do not seem to refer to a place close to the Sacramento River. In fact, if you check closely, you will see that they match the numbers that describe the size of the image: 5356, 5331 (in pixels).

Since the image has been georeferenced, we have to search and add the information to our image. Go to the previous link and download the first file listed: 1947_imagery_index.zip. The way aerial photogrammetry works is that in order to cover an area, a plane flights above it at a constant speed shooting photos of the ground. The file you just downloaded contains the different images that represent small portions of the whole area.

Open the .dbf file with the text editor and you will see the following information:

The information we need is the geographic position of the bounds from image 2-112 which we find on the following fields: X_MINN Y_MAXN X_MAXN Y_MINN for image 2-112.tif. Let’s order the numbers in a way that they represent the upper left corner first (581402.4850240962, 4403815.9212774821) and then, the lower right corner (586920.0796811492, 4398307.5685606254).

At the command line, simply type gdal_translate -of <format> <source> <destination> -a_ullr <ulx> <uly> <lrx> <lry> -a_srs <srs_def>, where format is VRT, source is the path to the input file and destination the path to the output file, ulx uly lrx lry are the upper left x, upper left y, lower right x and lower right y, respectively and srs_def is epsg:26910 as the projection for the output file.

Let’s check the information of the file we just created. You will notice that we have assigned a coordinate system and the corner coordinates have changed.

You should get an output that looks like this:

Entering the new corner coordinates in Apple Maps or Google Maps, here is what we get:

Alt text

The pin is located in the Sacramento River area. Now, let’s create the tiles with the following command:

See the final result here, after replacing the tiles directory on the original project.

Alt textAlt text

The first thing you will notice is how the river has changed it’s shape from 1947. It looks like the bridge has changed as well within time:

Alt textAlt textAlt text

Example 3: What’s new in Cupertino?

So you might think, that’s great to show one image, but what happens if I have several images? Well, that’s a great question and you will be happy to know that you can build a mosaic with all the images and show them as a single overlay. And that’s what we are going to do now. Go here and under the Data Sets tab, check DOQ from Aerial Imagery and enter Cupertino in the data set search field. From the results, download the 4 images from 1948 with the following ID: DI00000001140340, DI00000001140341, DI00000001140342, DI00000001140343. We will be building a mosaic with them.

Let’s start as in the previous example, collecting information about the files we just downloaded.

and we get the following:

Let’s check the corner coordinates in Google Maps, you should see a point in the Cupertino area, in California.

Alt text

Let’s move on and build our VRT file. At the command line, type gdalbuildvrt <destination> <input_file_list>, where destination with the output file and input_file_list is the list of the input files.

And now let’s build tiles with the following command:

After replacing our tiles on the project, that’s what I get:

Alt textAlt textAlt text

It looks like Cupertino has been under quite a lot of construction…Do you see the Apple HQ on 1948? 1 Infinite Loop didn’t exist…

Alt textAlt text

Final remarks

This post just scratches the surface of what types of issues you might run into when working with aerial imagery. The steps described in this tutorial might change slightly depending on how the image has been geo-referenced and the type of software used to geo-reference them.

I hope you enjoyed this post and please, do not hesitate to send the outcome of you work if this tutorial has been useful somehow. We would love to add your project to the end of this post so everyone can see what it can be done with maps.

I’m adding a new image from the Alpine Lake in California. You can see the difference of the water level depending on the time of the year.

Eva

Alt textAlt text

iOS Consulting | INVASIVECODE

iOS Training | INVASIVECODE

(Visited 103 times, 1 visits today)