Map Tiles (2) – Sample TileMap

July 24th, 2007

Our last post introduced the concept of map tiles and the benefits for using them in a desktop application. Before using map tiles in XNA, we need to create a sample “TileMap”. Normally, tile maps would be created automatically using some GIS or Mapping program. To gain a better understanding though, we will manually create a set of map tiles using this world map that we have used before:

World Map

The original image from the Wikimedia Commons is over 8 MB in size so we can cut it up in a graphics program and create each tile individually. All tiles will be the same size – 800 pixels wide by 400 pixels tall. Our sample TileMap will have 3 TileSets each a different scale (also referred to as “zoom levels”). They will be numbered from 0 to 2 with 0 being the farthest from ground level.

Tile Coordinates

The OSGeo tile map standards document includes an image showing how the tiles are named (see here). Each tile has a set of tile coordinates that describe the tiles column (X) and row (Y) position within the TileSet. It is important to note the a tile’s coordinates are based on the lower left corner of the tile.

Understanding the concept of tile coordinates is crucial to everything we will do with map tiles. They make working with tiles much easier than if we were to use geographic coordinates. In fact, as long as we know some geographic information about each TileSet, we can convert any tile coordinate to it’s corresponding “real-world” location (all of our examples will continue to use only longitude/latitude locations to keep things simple).

TileSet 0

The first zoom level will be the entire world and contain only 1 tile. It’s tile coordinate is then obviously 0,0. Remember a tile coordinate of 0,0 means the lower left corner is 0,0 so if we were convert the origin to longitude/latitude, the origin would be -180, -90.

TileSet 0

TileSet 1

The second TileSet zooms in closer (2x), resulting in 4 tiles. The center of the TileSet (0,0) is placed in the middle so in this case it corresponds with the longitude/latitude origin.

TileMap 1

TileSet 2

The third and final set zooms in 2x again, resulting in 16 tiles.

TileMap 2

Tile Naming Convention

We will name each tile image using the convention: “Map Name” + “Zoom Level” + “Column(x)” + “Row(y)”. So TileSet 1 has these file names:

  • WorldMap_1_0_0.jpg
  • WorldMap_1_0_-1.jpg
  • WorldMap_1_-1_-1.jpg
  • WorldMap_1_-1_0.jpg

Click here to download all the map tiles that will we use next time to start making an XNA “tile mapping” program.

Continue to part 3