Convert a single large image overlay to tiles for Google Maps

Question

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.)

Calchas

Answer 1

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

Ramiform

Answer 2

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.

Dett

This kind of defeats the object of having tiles as the client will have to download the entire image before it can be rendered into tiles. It may e useful for some applications though. – Goingson

Here is an alternative, using tiles: omarriott.com/aux/leaflet-js-non-geographical-imagery (thanks to @DavidRR at https://mcmap.net/q/384438/-is-leaflet-a-good-tool-for-non-map-images-closed) – Khabarovsk

Answer 3

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.

Starve

A link to a solution is welcome, but please ensure your answer is useful without it: add context around the link so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. Answers that are little more than a link may be deleted. – Cleaver