Previously I have demonstrated how to use Microsoft Research's MapCruncher tool to create map tiles from custom bitmaps for Bing Maps (nee Virtual Earth). That particular example used an ASTER satellite image for the EcoMapCostaRica.com project, and hosted the map tiles on Amazon's S3 service with delivery using Amazon Cloudfront. Although MapCruncher was intended for use with Bing Maps, the resulting tiles can be used for custom applications and with map APIs from competing companies. This article shows you how to use MapCruncher tiles with Google Maps.

Recently I tried to implement a multi-touch interface for the EcoMapCostaRica.com maps so that they could be used on the Apple iPad and similar devices. At the moment, the Google Maps v3 API is the only web map API that supports multi-touch and is also supported by the Apple iPad. The Bing Maps Silverlight control has multi-touch support but it is unlikely that it will ever be supported by the iPad.

These maps are a conventional "pushpins and shapes on a map" application implemented using KML and (MapCruncher) tile overlays for satellite and aerial imagery. KML is easy to implement in Google Maps, but the MapCruncher tiles are a little more difficult. The original OpenLayers and Bing Maps applications also included a 50m survey grid and a layer selection control - for simplicity, both have been dropped from the Google Maps implementation. The resulting application can be found at http://www.ecomapcostarica.com/map_2010/map_gm.shtml and looks like this:

Note that two bugs were found. The first appears to affect all browsers: The v3 Google Maps API ignores the icon size settings in a KML file. This results in the oversized icons that can be seen in the above image.

The second bug only appears to affect the iPad/Safari/Google Maps v3 combination. When using this combination, tile layers quicky crash Safari. The problem appears to be a memory or pointer problem - possibly due to limited memory available to a JavaScript script running on the iPad edition of Safari. This problem does not appear on a Windows PC running Internet Explorer, Firefox, or Safari.

Adding MapCruncher Tiles to a Google Maps

So how do we add the MapCruncher tiles to Google Maps? It turns out that it is surprisingly simple. This is because Google Maps and Bing Maps both use the same map projection ("spherical Mercator") and tile scheme.

MapCruncher tiles are implemented using a quadtree system. Quadtree tiles are divided into four small tiles. This is repeated recursively until the required level of detail is produced. Quadtrees have been used for a long time in image processing and compression applications. They are ideal for web mapping applications such as this, because a tile scheme can be created with an extremely high level of detail, but a server can easily and efficiently provide only the files and detail that the client requests.

Not only does Google Maps use the same projection and general tile scheme as MapCruncher and Bing Maps, but it even supports the same tile coding scheme. Each tile is 256x256 pixels in size. For zoom 0, there is one tile with 0.0N,0.0E at the center. Zoom level 1 divides this tile into four tiles.

The only thing that is different is the tile naming scheme, but Google Maps provide a way of customizing this. Google Maps tile layers are defined using a GTileLayer object. This has a getTileUrl parameter that is set to a function which finds the URL for a particular coordinate and zoom level. A typical implementation would define a function to calculate a tile name from these. This is then used to create a specific web URL.

Here is the resulting code:

ERROR [include_code_listing plugin]: File Not Found (/usr/www/users/winwaed/geowebguru/img/2010/google_mapcruncher.js)

Note that this is not a full implementation, but simply shows the addition of a new tile layer into an existing google.maps.Map object, and the use of the getTileUrl function.

The URL refers to "cloudfront" which is the Amazon Content Delivery Network (CDN) service. This is simply an efficient way of deliverying image files across the Internet. A conventional web server could be used instead.

That is all that is required. Code like the above is making it increasingly easy to switch from one web map service provider to another. The above map application now has implementations for Bing Maps, Google Maps, and OpenLayers/MapServer. Last week I was busy adding new data literally from the rain forest, and all I had to do was to edit the shared KML data files to update all three map applications simultaneously.

On a side note: I would be interested in any workarounds for the Google/Safari/iPad bug, and could publish it here with full acknowledgment once I have confirmed it works.