With a new apartment comes new projects! There’s a spare wall near the build space that could do with something useful on it. We decided a map would be good. Now to render the map!

I used the excellent Google Static Maps API, the JS API, some CoffeeScript and a static website to create the map.

Getting the tiles

Google provide a scale control for their static maps, which means we can get nice large images that are viewable from a distance. Cranking the scale to 2 gives us double the DPI. The API docs mention 4 is available for business customers. This feature was introduced for hi-res handsets and the like.

Requesting scale=2&size=640x640 (the maximum size for free-use), we get a 1280x1280 image of the target area.

Click on the image below to see the full sized tile.

Pan-tiling in Javascript

There are mathematically nice ways of doing things and easy ways to do things. The fastest route was to use the Google Maps Javascript API to do the geo-math for us. Specifically, we’re able to pan by pixel amounts rather than degrees. We also get a nice UI for defining the approximate poster bounds.

Here’s the demo :D

The green overlays drawn are the frames for our tiles. We worked out where the tiles should be by zooming in (to the detail zoom level), panning pixel distances (to the next tile) which now fills the map window, then fetching the map bounds to get our tile image coordinates.

You can now run this generated convert command (if you have ImageMagick) to fetch and combine the images.

Source for WallMap is available on GitHub.

Tile zoom level

The detail zoom level controls the size of features like roads, building boundaries and areas. Scale controls the size of map text, symbols, stroke line widths and other details.

Figuring out which zoom level is desired requires some experimentation balancing desired coverage area and available wall space. Printed out, the first batch of tiles looked like this.

Printing it…

Once the PNG is built, the next step is to use software like posterazor to cut it up and print it out. It’s a work in progress. More to come.