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:
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.
I started drawing my map with the pen tool in Inkscape, using the screenshot as a guide.
I created a transparent layer on top of my map to define the bounds of the ‘tiles’ I want to export out of Inkscape.
I batch-exported the tile layer out of inkscape, resulting in 256 x 256px png “tiles”.
I ran this shell script, which automatically assembled the PNG tiles into an MBtiles file.
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.
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.
Saman Bemel Benrud
is a designer at Mapbox. He is involved with the entire lifecycle of our products, from providing strategy and initial concept to consistently polishing the way our applications look and feel.
Follow @samanbb on Twitter