Map Tiles

Using MapServer (2) – Generating Map Tiles

Wednesday, November 14th, 2007

This post is the second in a series on using MapServer. First-time visitors are encouraged to read part 1 which details how to download, setup, and create a web mapping site using MapServer. Additionally, the topic of map tiles has already been introduced in a previous series.

Once the MapServer for Windows (MS4W) package with ka-Map is installed on your local machine, some new mapping functionality becomes available. One area that interests us is the ability to automatically generate a set of map tiles.

ka-Map Configuration

The first step in creating a set of map tiles is to configure ka-Map to point to a valid MapServer mapfile (see here for more on a mapfile). Navigate to this directory: C:\ms4w\apps\ka-map-1.0\include and open the file named config.php in any text editor.

This configuration file contains several parameters which you should be familiar with before creating our map tiles. We won’t change any of their values yet but it is important to understand what they do. First, on lines 73 and 74, the pixel size of each tile to be generated is defined:


$tileWidth = 256;
$tileHeight = 256;


Lines 106 through 110 define the most important parameters:


$aszGMap = array (
         'title' => 'GMap 75',
         'path' => '../../gmap/htdocs/',
         'scales' => array( 40000000, 25000000, 12000000,
                                 7500000, 3000000, 1000000 ),
         'format' =>'PNG'



Map Tiles (4) – XNA Program

Monday, August 13th, 2007

The last three posts discussed map tiles in some detail but without getting into programming. First, we described terminology surrounding map tiles. Then we setup a sample TileMap from an image of the world. And finally, we covered some “tile math” examples. Now we will wrap everything up by developing a mapping program that uses map tiles.

The program we created was built off one of our previous projects (see World Mapper parts 1,2,3) and, as always, the XNA framework. This project turned out to be much more complex than any of our previous programs so it would be impossible to cover all the source code in detail. Instead, this post will provide an overview of the program’s structure and then provide the source code for you to download and explore on your own.

Map Tiles (3) – Tile Math

Monday, August 6th, 2007

Before using our Tile Map we created in the last post, a quick discussion on “tile math” might be helpful. More specifically, we need be able to easily switch between tile coordinates and real-world coordinates to create a complete tile mapping program.

We will use this map tile as an example:

Map Tile Sample

Map Tiles (2) – Sample TileMap

Tuesday, 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.

Map Tiles (1) – Introduction

Sunday, 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.