How to Start Branding Maps With Mapbox

Kevin Doherty

Creative Director

Date

Sep. 3, 2014

What is Mapbox?

According to them:

We create tools for anyone to design and publish custom maps. Over the last couple of years, our team has built our platform using open source software and open data. We are based in Washington, DC and San Francisco, funded by Foundry Group, and we’re just getting started.

You can find Mapbox and their tools here.

On pretty much every website we create, there is almost guaranteed to be an embedded map of some kind. Most often than not, its a simple map on a contact page showing where our client’s company is located. Like most things in life we are creatures of habit and all too often do I find myself going to google maps and generating iframe embed code to use in these scenarios.

The Google Map Iframe Embed Way

Now there is nothing wrong with this approach but when you see what a tool/service like Mapbox can do, you may rethink how you integrate your interactive maps into your websites.

Mapbox Showcases

The use case of showing a simple location on a contact map is as basic as it gets. Mapbox can do a heck of a lot more with all sorts of different type of data. When companies like Foursquare, Evernote, Github, and Pinterest are using Mapbox to power their maps, that should tell you something 🙂 check out some of their showcases

Designing your maps

Now, this is where Mapbox separates from the rest. Not only do they have an online map editor/creator with more controls and styling options you could ask for BUT the online editor is actually the lesser of the 2 available design editors they offer. Mapbox actually has a downloadable app called Mapbox Studio which you can download for Mac, PC or Linux which gives you all the styling control you could possibly ask for; fonts, colours, terrains, textures, imagery, and effects!

I admittedly have just scratched the surface on using Mapbox myself and can’t wait to dig a bit deeper. If you have any examples or tips you’d like to share with our web design or web development teams, please leave in the comments!