Make your maps explorable using the Google Maps API (work in progress)

Welcome!

The Cartographers’ Guild is a forum created by and for map makers and aficionados, a place where every aspect of cartography can be admired, examined, learned, and discussed. Our membership consists of professional designers and artists, hobbyists, and amateurs—all are welcome to join and participate in the quest for cartographic skill and knowledge.

Although we specialize in maps of fictional realms, as commonly used in both novels and games (both tabletop and role-playing), many Guild members are also proficient in historical and contemporary maps. Likewise, we specialize in computer-assisted cartography (such as with GIMP, Adobe apps, Campaign Cartographer, Dundjinni, etc.), although many members here also have interest in maps drafted by hand.

If this is your first visit, be sure to check out the FAQ. You will have to register before you can post or view full size images in the forums.

Make your maps explorable using the Google Maps API (work in progress)

Hi guys. I'm a ridiculously horrible artists, but I am a pretty decent web developer. So, I'm going to write up a tutorial on how to make your maps explorable with the Google Maps API. You can see a working example on my website. As I learn more about creating more advanced maps, etc I'll update this thread. Without further ado, let's jump right in and get started.

Your Map

Your map should be pretty big and it needs to have a height and width in pixels that are divisible by 256. I personally created a map that was 3072 x 3072 and it works pretty well. However; the bigger the better. At 100% the map should be clear and of good quality or it will look pretty crappy when zoomed in. If you've ever used Google Maps, and I know you all have, you know that there are zoom levels that you can control. For what I know so far, the map will be a 256 x 256 pixel image at zoom 0. At zoom 1 it will be a 2 x 2 matrix of 256 x 256 pixel images. Basically, for every zoom level the map will consist of 2*(2^zoom) 256 pixel images. I'm working with other tile makers, including a command line one that will automatically cut up an uploaded map, but so far the following one works best for what I've been doing:

It's a windows app, so sorry if you have a Mac or use Linux. I'll find other options eventually as I play around more. To split your map you run it like so:

TilesGenerator.exe [maxzoom] [filename]

It will go to work creating all of the necessary tiles from zoom levels 0 through whatever zoom level you specified for [maxzoom]. Remember, if your map is 3072 x 3072 like mine and you specify a [maxzoom] of 4 you will end up with a fully zoomed image that is 4096 x 4096 (256*(2^4)). So, a 4096 x 4096 image would actually be perfect for a map with a [maxzoom] of 4. A smaller map will end up stretching the tiles and become distorted. How much it distorts depends on the size difference and the quality of the image of course.

The command line app will create an "output" directory with images named something like tile_0_0-0.png. Basically, tile_[zoom]_[x]-[y].png. You'll need to upload all of those images to a directory on a web server if you're going to use them via the Google Maps API.

The Code

I put up a basic page with only what's required for the map here. I documented the **** out of it so it should be pretty self explanatory. You could literally copy and paste the source of that page, change the path to your map tiles, modify or remove the marker information, and have everything work out pretty well. Depending on the size of the map you might need to tweak the min and max zoom levels, but that's pretty much it.

Here's is the HTML and javascript code with comments (let me know if you have any questions):

// We need to trap the click event for th emarker so we can pop up an info bubble.
google.maps.event.addListener(marker, 'click', function()
{
this.infoBubble.open(map, this);
});

activeMarkers.push(marker);
}

// This is dumb. We only want the markers to display at certain zoom levels so this handled that.
// Google should have a way to specify zoom levels for markers. Maybe they do but I could not find them.
google.maps.event.addListener(map, 'zoom_changed', function()
{
var currentZoom = map.getZoom();

With IE9, I see a mostly off-white map. If I zoom in two mousewheel clicks, I can see two markers. I don't know if it's missing map data, or just a demonstration of how to do markers at varying levels. The JavaScript of the site is interesting in how it handles the markers, though. One of these years I need to get that sort of functionality working for my own projects.

Hmm. It's running on a micro instance at Amazon AWS. Sometimes those things get loaded down and don't perform too well. If you refresh it should hopefully load the tiles of the map.

Edit: IE issues and issues with map tiles loading should be resolved. IE was affected by some bootstrap CSS that I needed to override. Other tile loading issues I believe were related to CloudFlare CDN / caching stuff.