Mapping with TileMill

When we launched our interactive campus map last year, we were using a third party company called CloudMade to generate our custom map tiles from OpenStreetMap data. CloudMade weren't making updates to their map data quite as often as we needed, which is problematic when you've got a big campus expansion project on the go that means new buildings are appearing all the time. So we went looking for a replacement.

Finding a replacement

Ideally a replacement tile provider would give us the same functionality as Cloudmade, just with more frequent updates.

We looked at a lot of alternatives, but nothing was looking too promising. Some of the options we rejected were:

• Google Maps - half the campus is still missing.
• Stamen - beautiful watercolour maps, but too light on details to be practical.
• MapQuest Open - nice enough looking maps, but not enough detail.

The best option was looking like MapBox, which would give us the control and level of detail we needed, but that looked like it could be a bit pricey.

Enter TileMill

My search continued and led me to TileMill, an open source project by MapBox.

TileMill is different to the other options I had been looking at: rather than being a service that provides tiles itself, it's a piece of software that lets you design and publish your own interactive maps.

Campus taking shape in the TileMill interface

TileMill takes all sorts of different data formats as an input: ESRI Shapefile, KML, GeoJSON, GeoTIFF, PostGIS, CSV, and SQLite.

You then have full control over how your data looks through a language called Carto. Carto is similar to CSS but has extras like variables and functions that make it much more powerful.

The map data

If you really wanted to you could download OpenStreetMap's data for the entire planet and work from that, but that's a 250GB XML file that I'm not sure my PC could cope with.

I came across a company called Geofabrik that provides more manageable shapefiles of smaller parts of the world (often down to individual cities), which are updated every few days and can be downloaded for free from http://download.geofabrik.de/. In the end we paid Geofabrik for some extra data to be included in a custom set of shapefiles, so it wasn't completely free.

Making it look nice

Getting started with Carto is easy enough if you already know CSS, but I found the most time consuming part was deciding exactly what to show at all the differing zoom levels. When you've looking at a bird's eye view of the whole campus you only want to see the major landmarks, with more detail being revealed as you zoom in, down to the names of individual buildings and car parks.

Luckily there are a few examples bundled with TileMill that help you get the hang of what works best at different levels.

An example of some of the Carto styling rules used on our map

It also takes a bit of thought to get all of your layers appearing in the correct order. At various points I ended up with bridges going underneath roads and the entire campus looking like it was underwater!

Outputting the tiles

Once you've got your map looking how you want it, it's time to export it. TileMill gives you several formats to choose from for your export.

In order to use this with our existing maps setup (see the previous behind the scenes post), we needed the individual map tiles. TileMill doesn't quite let you do this directly, but you can export to a single MBTiles file, and then use a utility called mbutil to extract the individual tiles from that.

Our map covers central York (up to the outer ring road) at six different zoom levels, which resulted in about 15,000 tiles. You can easily end up generating hundreds of thousands or even millions of tiles if you go down to very high zoom levels for large areas. Be prepared for a wait (and have plenty of spare storage space) if you decide to do that!

Making it live

The final step was to put the tiles on the web and change a single line within the map application code to point to our own tiles instead of Cloudmade's servers.

The interactive map with new tiles in place

We're now able to make much more regular updates to the map, and TileMill looks like it could come in handy if any other projects involving maps come our way.