Convert a single large image overlay to tiles for Google Maps

15
votes

I have a large high-resolution image that I am using for an overlay using Google Maps v3 API. This works fine for desktop and laptop computers with a reasonable network connection, but unsurprisingly it does not work so well for mobile users.

What's the best/easiest way to break the image up into 2D tiles at the various zoom levels so I can act as a tile server for Google Maps via the API?

Is there a program that will reliably generate the tiles for me and provide me with the necessary zoom and coordinates for each resulting tile and/or give me the correct tile if I provide the zoom and coordinates?

Is it pretty easy to write a tile server to do it on the fly once you gather the right info? Perhaps there's source code out there that I can use as a model? (I found a tile server at http://blog.gmapify.fr/a-map-tile-server-part-2-understanding-google-maps-tile-overlays-and-building-up-a-tile-server which is certainly helpful, but it doesn't serve tiles from a source image, so I'd have to at least figure that part out...)

Or perhaps there is step-by-step algorithm that I can manually follow if that's more straightforward? (Since it's only one image and it covers an area on the map of maybe a square mile, manually doing it like that is perhaps feasible if not preferable.)

3
google-mapsgoogle-maps-api-3tile

3 Answers

13
votes

you can check MapTiler http://code.google.com/p/maptiler/. It can generate the tiles you need.

Tile server is really easy to write. The easiest way is just to host static files (your tiles) in a directory structure. The directory structure is then usually servername/zoom/x/y.png (or zoom/y/x.png). Such structure is also produced by MapTiler. MapTiler also generates an example web page using the tiles (but I guess it uses Google Maps API v2).

Information about using your tiles in Google Maps API v3 can be found here: http://code.google.com/apis/maps/documentation/javascript/maptypes.html#CustomMapTypese

5
votes

You can do the entire thing clientside without tile pre-cutting

See https://github.com/Murtnowski/GMap-JSlicer

slicer = new JSlicer(document.getElementById('map'), 'myImage.png');
slicer.init();

Very simple.

2
votes

There's a really good video tutorial on making maps with maptiler, which can be found here:
Mobile Maps That Aren't Terrible

It focuses on mobile maps, but also covers maptiler and other basics. I found that very helpful.