Inkscape and MapBox for Interactive, Illustrated maps

We recently relaunched the MapBox product tour, and part of that redesign includes a custom map showing off our server infrastructure:

Even though this map began its life as a vector illustration in Inkscape, it’s actually a fully-functional tile-based slippy map. This allows us to do cool things like add markers based on lat/lon coordinates, and add panning and zooming, that would be impossible with just a static image.

It’s surprisingly easy to do this kind of thing with MapBox. Here’s how I made the map:

1. I started by importing a screenshot of MapBox Streets at zoom level 2 into Inkscape, to use as a guide, ensuring my illustration will be geo-rectified with latitude and longitude coordinates once I upload it to MapBox.

2. I started drawing my map with the pen tool in Inkscape, using the screenshot as a guide.

3. I created a transparent layer on top of my map to define the bounds of the ‘tiles’ I want to export out of Inkscape.

4. I batch-exported the tile layer out of inkscape, resulting in 256 x 256px png “tiles”.

5. I ran this shell script, which automatically assembled the PNG tiles into an MBtiles file.

6. I uploaded the MBtiles file to my MapBox account. It’s now treated like any MapBox map - ready to be shared. Here it is in my account.

7. Finally, using mapbox.js (and the assisance of Garrett), I added an interactive layer of markers with custom popups. Here’s the end result.

If you’d like to make your own illustrated map with Inkscape and MapBox, here’s a starter kit I put together that includes an Inkscape template and the shell script for assembling your MBtiles file from multiple PNGs. With a bit of experimentation you can do a lot of interesting things with images as maps. For further background, check out Tom MacWright’s blogpost on images as maps.