Experience Design

Custom maps with MapBox

mapbox-dcA couple of years ago I was working on a small project where the client wanted to visualize data from their field operations on a map. Nothing overly complex – just locations, custom icons, radius of operation for that location, etc. Easy, I thought. We’ll use a system like Google Maps. Except the client wanted the maps branded with their own color schemes, to blend in visually with the rest of their site. I tried for a week to find a solution that used modern, open web technologies. In the end I admitted defeat and the client went with a set of custom-designed maps in Flash.

That experience has led me to search for mapping solutions wherever possible. The fantastic OpenStreetMap resource has been revelatory in bringing custom maps within reach. But with the addition of tools from MapBox we can really bring interactive, custom designed maps to everyone, complete with powerful data visualization.

Styled map of Scotland, with custom markers on the Isle of Skye

Styled map of Scotland, with custom markers on the Isle of Skye

I encourage everyone to go create an account on mapbox.com. It’s free, and it’ll give you an idea of the kinds of things you can do with the tools. As an example, here’s a map I created, in less than 10 minutes. It shows Scotland, with the terrain map option (colored a little brighter green than the default, with the surrounding sea a little lighter blue than default), and a few custom markers on the Isle of Skye.
This simple demo only scratches the surface of what MapBox can do. With their open source tool, TileMill, MapBox offer the ability to create truly custom maps, using a CSS-like language that we as designers and developers are already familiar with. And with downloadable templates to create truly interactive mapping solutions, the possibilities are pretty much endless.
My only complaint? That MapBox wasn’t available in 2010 when I needed it on that project!
Do you have any go-to mapping tools? Something even more impressive than MapBox, maybe? Let me know in the comments.

About the Author

More from this Author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up