Making a custom tile map

I always wanted to do customs maps, and with the mapping web system never was so easy.

Picture of Double Perseus Cluster by Luis Buenrostro courtesy of

How it works
We can't display a large image map at once and then load in a web page. This is very inefficient, heavy to download and given the size of our screen / web page, we will never see the whole big image.

So what we do here in order to load a map image is to cut the big image in smaller images of size of 256px width by 256px height called map tiles . We're going to load the tiles of a specific region, and then when we drag the map to another location we are going to load the tiles that correspond to the selected map section.

Each zoom level will be composed by a number of 2 zoom level tiles:
Zoom Level 0 : 2 0 = 1 tile of 256px ( total size = 256px width X 256px height )
Zoom Level 1 : 2 1 = (2 w x 2 h) = 4 tiles of 256px ( total size = 512px width X 512px height )
Zoom Level 2 : 2 2 = (4 w x 4 h) = 16 tiles of 256px ( total size = 1024px width X 1024px height )
Zoom Level 3 : 2 3 = (8 w x 8 h) = 64 tiles of 256px ( total size = 2048px width X 2048px height )
Zoom Level 4 : 2 4 = (16 w x 16 h) = 256 tiles of 256px ( total size = 4096px width X 4096px height )

Building your map

To set up your map, you need the following component:
1. A mapping Javascript library. I recommend to use OpenLayers

2. A tile generator to transform your images maps in tiles. Here are some options:
- Map Tiler
This is a payed tool but you can use it for free to make some test.
- I coded a example that takes your zoom level 5 file image and automatically generates all the lower levels just to 0:

Download Java class
Download for PHP
Download Windows Forms ( c# )
3. Setting up all the stuff together
The tile generators are going to create a series of directories, one per zoom level. Each one of this directories have the image tiles.
The only thing to do is to create the openlayers html file that will use it and put it on the root directory. You can download an example here.