int2e blog

Want to make a site similar to our World of Warcraft Google Maps mashup? The process has two main steps. First you’ll need to create properly formatted images for the map. Then you can integrate the images in to a map using the Google Maps API.

Creating the Images
Although you probably have your map as one large image file, we’ll need to cut the large image file up in to many smaller images so that it can be used with the API. We’ll also have to create different images for each zoom level of the map. MapWoW is composed of over 300,000 image files.

Each image file has to be 256 pixels by 256 pixels. Each image when zoomed in to the next zoom level represents four images at the next zoomed in level. For example, the image below of an A at zoom level 0 is one 256×256 image:

At zoom level 1, the same A now spans four images, each of which are 256×256 images:

This process of zooming in or out on the original image, and then cutting the zoomed image in to smaller images it typically automated. An example script for automating this process is available at Mapki.

Creating the Map
Starting with a typical map created with the Google Maps API, you’ll need to add three main sections of code. First you’ll have to create a custom tile layer, then you’ll have to define the custom getTileUrl function, and finally you’ll have to add the tile layer to your map.

The following line of code will create a new GTileLayer object:
var tilelayers = [new GTileLayer(copyCollect,0,15)];
In this case 0 is the most zoomed-out level and 15 is the most zoomed-in level available.

Next we’ll have to define the function that tells the GTileLayer object where the custom images are located:
tilelayers[0].getTileUrl = function (point, zoom){
return “/images/”+point.x+”-”+point.y+”-”+zoom+”.jpg”;
};
The values point.x and point.y do not refer to latitude and longitude values, but rather to the image tile numbering used by the Google Maps API. point.x increments going East, and point.y increments going South.

Now that we have our customized GTileLayer object, we’ll use it to create a custom GMapType and add it to our GMap2:

var custommap = new GMapType(
tilelayers,
new GMercatorProjection(16),
"MyCustomMap",
{errorMessage:"No Data Available"}
);
map.addMapType(custommap); //map is your GMap2 object

The argument to GMercatorProjection, 16, is the total number of zoom levels.

Further Reading
Mapki, a wiki on the Google Maps API, also has a tutorial on creating your own custom map. Mike Williams also discusses a few things to watch for while creating a custom map. In the future, we’ll also be posting some advanced tips on how to improve your Google Maps mashup so that it can withstand high loads and lots of visitors. You can subscribe to our blog if you’d like to read our future advanced tips.

This entry was posted on Monday, April 9th, 2007 at 3:51 pm and is filed under Web 2.0. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.