29.1.12

Online/Offline Mapping: Map Tiles and their URL Schemas

I've recently been developing online/offline mapping applications for use in places which simply don't have access to internet connections.  I'm currently preparing a presentation discussing topics related to bring online application to offline users, and in doing so will be blogging on related topics.  The first part of the series will be dedicated to working with tile map services.

One of the main challenges of bringing an online map to an offline environment is maintaining access to map tiles. From imagery to streets, tiled map services provide the necessary geographic context and semantic detail to visualize additional spatial layers.  While hard-drive space is still a major limiting factor in ability to store tiles, a significant number of tiles can be stored locally to allow use of an application for limited geographic area.

Disclaimer:  Persisting map tiles locally breaks the terms of service for many popular basemap providers like Google, Bing, and ArcGIS Online.  I'm not a lawyer, nor do I aspire to be one, but if you start storing tiles offline without permission, then you do so at your own risk.  With that said, let's look at how to get started in storing map tiles for offline use.


Map Tiles and their URL Schemas

If you want to save down map tiles, you need to first know the address of each tile.  Map tile addresses take the form of urls (uniform address locators) which web maps access via HTTP GET requests.  Map tile service providers structure their map tile urls differently, but they all use column (x), row (y), and zoom level (z) values somewhere in the url.  Most providers have settled on using the Web Mercator projection (sad but true), and most have used the same origin for tiling and tile dimensions which means that the zoom level, row and column ids are the same across providers.  Dimensions are almost all 256 by 256 pixels and are in png or jpeg format.

Below I have listed requests for a single tile covering the same geographic area (Pacific Ocean / California) for several basemap tile providers including: Open Street Map, ArcGIS Online, Google Maps, Bing Maps, Yahoo! Maps and Nokia.  Here are the details for the tile which is common to ALL providers and demonstrates how easy it can be to locate a tile for any of the providers below:

/*
Tile Details:
COLUMN (X): 2
ROW (Y): 6
ZOOM LEVEL (Z): 4
DIMENSIONS: 256 x 256
*/


Open Street Map:

O.S.M. uses a simple directory structure for storing its map tiles which we will see repeated in many of the other service providers.  While you may think that "Open" means you can freely scrape as many tiles as you want...remember that OSM is hosted by volunteers with limited server resources.  If you want to scrape a large number of tiles, check out hosting your own OSM tile server.  I used Michal Migurski's TileDrawer to quickly setup my own OSM EC2 instance.  Tile Drawer is great and doesn't even require you to SSH into the machine!  Just start it up and start scraping.



/*
Open Street Map Template:
http://{SERVER}/{ZOOM_LEVEL}/{COLUMN}/{ROW}.png

Open Street Map Example:
http://c.tile.openstreetmap.org/4/2/6.png
*/

ArcGIS Server Map Service:

ArcGIS Server is the most powerful, out-of-the-box mapping server currently available.  AGS uses a similiar tile directory structure as OSM, but reverses the column and row values in the url.  ESRI is very gracious with providing access to tons of free tile services.


/*
ArcGIS Server Tiled Map Service Template:
http://{SERVER}/tile/{ZOOM_LEVEL}/{ROW}/{COLUMN}.png

ArcGIS Server Tiled Map Service Example:
http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/4/6/2.png
*/

Google Maps

Google uses a slightly different structure which involves url parameters.  They also include what appears to be a locale parameter which I'm guessing is used to change the language of label (although I have not yet confirmed).


/*
Google Maps Template:
http://{SERVER}/vt/lyrs={layer_id}&hl={locale}&x={COLUMN}&y={ROW}&z={ZOOM_LEVEL}

Google Maps Example: 
http://mt0.google.com/vt/lyrs=m@169000000&hl=en&x=2&y=6&z=4&s=Ga
*/


Bing Map (Formerly Microsoft Virtual Earth)

Bing has an interesting way to access tile which is using a quadkey.  A "quadkey" is basically the position of the tile within the "quadtree".  The real reason why Web Mercator become so successful is that it turns the earth into a square which can be recursively tiled by spliting tiles into 4 to obtain tiles for the next zoom level.  I will be covering how to generate quadkeys in coming posts, but for now, here is a python snippet which I used to get the tile below:

def tileXYZToQuadKey(x, y, z):
    quadKey = ''
    for i in range(z, 0, -1):
        digit = 0
        mask = 1 << (i - 1)
        if(x & mask) != 0:
            digit += 1
        if(y & mask) != 0:
            digit += 2
        quadKey += str(digit)
    return quadKey
>>> print tileXYZToQuadKey(2, 6, 4)
0230
>>> 

I wrote the function above based on some C# that was provided in the bing maps tiling specification which you can read more about here: Bing Maps tile specification


/*
Bing Maps Tile Template:
http://{SERVER}/tiles/a{QUAD_KEY}.jpeg?token={TOKEN}&mkt={LOCALE}&g={??}

Bing Maps Tile Example:
http://t0.tiles.virtualearth.net/tiles/a0230.jpeg?g=854&mkt=en-US&token=Anz84uRE1RULeLwuJ0qKu5amcu5rugRXy1vKc27wUaKVyIv1SVZrUjqaOfXJJoI0

Awesome Explanation: http://msdn.microsoft.com/en-us/library/bb259689.aspx
*/



Ovi Maps (Yahoo! / Nokia)
Yahoo! and Nokia use an API called Ovi Maps which I don't know much about (but I'm guessing Ovi was acquired by Nokia).  The tile structure is straight forward.


/*
Ovi Maps (Nokia and Yahoo! Maps) Template:
http://{SERVER}/maptiler/v2/maptile/???/{STYLE}/{ZOOM_LEVEL}/{COLUMN}/{ROW}/{SIZE}/{IMG_FORMAT}?token={TOKEN}&lg={LOCALE}

Ovi Maps (Nokia and Yahoo! Maps) Example:
http://4.maptile.lbs.ovi.com/maptiler/v2/maptile/279af375be/normal.day/4/2/6/256/png8?lg=ENG&token=TrLJuXVK62IQk0vuXFzaig%3D%3D&requestid=yahoo.prod&app_id=eAdkWGYRoc4RfxVo0Z4B
*/

Yandex Maps


Yandex has really nice maps and great to see soCal in cyrillic.




/*
Yandex Maps Template:
http://vec04.maps.yandex.net/tiles?l=map&v=2.26.0&x={{X}}&y={{y}}&z={{z}}&lang=ru-RU

Yandex Maps Example:
http://vec04.maps.yandex.net/tiles?l=map&v=2.26.0&x=2&y=6&z=4&lang=ru-RU
*/



Well that about concludes my post on map tile url schemas.  Look for my upcoming blog post where I will cover how to generate a list of tile x,y, z values for a specified zoom level based on a given extent.

8 comments:

  1. Nice post! I did a simple ArcGIS JS API page a while back showing tile boundaries and info for a couple of ArcGIS Online tiled map services: http://swingley.appspot.com/maps/tilefun

    ReplyDelete
  2. A mashup which shows exactly the differences in naming convention, bounding box in WGS84 and also spherical mercator coordinates is available here: http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/. (click on a map to get the bounds). There is also a source code of the algos - if you need to use this math in your own app.

    In case you need to transform existing GeoTIFF files or other raster data into these tiles the MapTiler desktop application (http://www.maptiler.org/) or GDAL2Tiles can be very helpful too - these tools are for free and run on all platforms.

    ReplyDelete
  3. I found a good site, http://www.neongeo.com/wiki/doku.php?id=map_servers

    ReplyDelete
  4. It’s refreshing to read a good quality article for a change. You’ve made many interesting points and I agree. This has made me think and for that I thank you.
    Visit: Tiler Brighton & Hove

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. Thanks for the great article and info.

    ReplyDelete
  7. Thanks for the great article and info.

    ReplyDelete

  8. Thanks for such awesome blog. Your article is very easy to understand, informative and provide complete overview about software testing. Please consider including rss feed in your website, so I get your recent post on my site.
    AngularJS Training in Chennai

    ReplyDelete