Map Tiles (1) – Introduction

July 15th, 2007

Google Maps ushered in a new era in web mapping: pre-rendered map tiles. Traditionally, web mapping followed a 4-tiered approach for generating map images:

Web Mapping 4 Steps

The benefits in this scenario are obvious. Maps at any scale can be produced and layers of information (e.g. roads, lakes, etc.) can be turned on or off with each map request. Map colors, shapes, and symbols can even be changed between requests. The unlimited possibilities come a cost though of slower rendering because each request requires the raw data to be accessed, combined with other layers, and the returned as a single image.

An alternative approach made popular by Google Maps involves pre-rendering map tiles at a variety of scales. This 3-tiered approach removed GIS data from the workflow:

Web Mapping 3 Steps

The primary benefit here is speed. Having the map images already rendered means the only limitation is how fast the images can be transferred across the web. A secondary result of having the maps “ready-to-go” means that tiles adjacent to the user’s current view can be loaded concurrently to allow for seamless panning. Tiles can also be cached so if the user returns to an area, the images don’t even need to be re-accessed from the web server.

The disadvantage to the tiling approach is that there is only a limited number of map scales and layer combinations available. A pre-tiled map may only have 5-10 map scales (although Google Maps has over 15) which the user can view data from. In most cases, individual layers cannot be turned on or off. The map’s cartography is presented “as-is” so colors, symbols, and sizes cannot be altered.

For a in-depth discussion how Google Maps works, here is a link to a great article.

Map Tiles for Desktop Applications

Pre-rendering map tiles can also be beneficial for desktop mapping applications. In terms of our exploration with XNA, having pre-rendered map tiles allows us to treat them just like a standard texture. We can load them and easily draw, shift, rescale, etc. without even having to rely an outside GIS/mapping engine or API. Basically, we are then using the same technique video game makers have been using to create games for the last decade.

Map Tile Basics

Let’s briefly define some terminology relating to map tiling that will be used in some upcoming projects. Many of the terms come from a document at the Open Source Geospatial Foundation (OSGEO) discussing proposed standards for tile mapping on the web.

  • Tile – a single map image
  • Tile Format Width – the width of a tile in pixels
  • Tile Format Height – the height of a tile in pixels
  • TileSet – a set of tiles for a single scale of a map
  • Tile Coordinate – the column/row location of a tile in a given TileSet; see this image for more information
  • TileMap – the entire “map”; a collection of TileSets at different scales
  • Bounding Box – the geographic extent of the entire TileMap described by it’s minimum and maximum X/Y coordinates

The next post will provide a simple example of a TileMap and then we will start using TileMaps in XNA.

Continue to part 2