Custom Map Tiles from Illustration

We are currently working on several mapping projects, one of which features a highly stylized tour of a well-known historic town on the East Coast. This post documents how to configure custom artwork as a map layer tile-set.

1. A detailed illustration of the town, roughly one mile wide (East to West) by half a mile tall (North to South)
2. An Open Layers map for mapping behavior
3. Drupal serving information on roughly 100 destinations, each with GPS coordinates and multimedia content

1. First, create your artwork

The file I am working with currently is a 640 meg flattened PSD. I exported the file as a 184 meg hi-res PNG. If the file were much larger, we would need to split it up into multiple sections on the region we are working with.

2. Next, determine your Google Mercator coordinates

Our illustration is based on a Google Map for reference. Right-clicking on Google Maps at the top left corner of our map boundary and choosing "What's Here" gives us the lat/lon position of that point (in our example: 37.274518,-76.704997 for the top left; and 37.269758,-76.692923 for the bottom right). We need to convert these to Google Mercator meters. There is an application that will do that for you, and is part of the PROJ framework. You can download PROJ, along with several other mapping utilities (including the complete GDAL framework) as OSX binaries from http://www.kyngchaos.com/software:frameworks. By default, the frameworks are installed under "/Library/Frameworks".
To create the necessary Google Mercator meters, run the following command in Terminal:

Now, enter your coordinates in the reverse order that Google provided them. From our example, Google provided "37.274518,-76.704997" as the top-left corner, so we type "-76.704997 37.274518" (note the space instead of comma); cs2cs spits out "-8538761.32 4477439.33 0.00", and we record the result (dropping the final 0.00).
Repeat for the opposite corner of the map area. Record both sets of coordinates. Ours were "-8539077.24 4478561.47" and "-8537030.75 4476351.99" for the top-left and bottom-right, respectively. To exit cs2cs, type Ctrl+c.

3. Output the GEO-tiff

Use "gdal_translate", available in the GDAL framework (see reference to same above), to create the GEO-referenced tiff file. The specific command in my case was:

4. Generate the tiles

For this, we'll leave command-line behind and use "MapTiler" -- a custom tile generator available at http://www.maptiler.org. Steps are fairly straight-forward; choose your desired output-type (in my case "Google Maps Compatible"), zoom levels, and destination folder for the tiles.

5. Upload and add to your Open Layers Map

Create a directory in your web root to house the tiles, and upload them. Then add a new layer under the Admin > Structure > OpenLayers, and provide the path to your base directory where the tiles are stored.

6. You're done!

You can add your new layer to map presets (just called "Maps" in the latest version of the Drupal 7 OpenLayers module).