#DESIGN / #VISUALIZATION : Mapbox – Create beautiful custom maps

Source : www.mapbox.com

Shared by : Siri Surab

Designers who create maps for their web pages, mobile apps or presentations should give Mapbox a try. This is an open source tool available at www.mapbox.com which allows you to chose from 14 different styles as well as create your own custom ones.

mapbox1
You would first need to ‘Sign up’ (I use the free plan which gives access to all existing styles, tools to create custom styles, unlimited export to jpeg/png and limited hosting space for only one style at a time on Mapbox cloud)

mapbox9
Once you sign up, you are taken to the ‘Projects’ page. If you are not automatically taken there use this link – https://www.mapbox.com/projects/

Here you can create a new project by clicking the ‘+ New Project’ button

mapbox10
You are taken to the ‘Online Editor’, where you can chose from the existing map styles,

mapbox2
Once you have chosen a style, you can click on the ‘Data’ menu and add markers or draw on the map.

mapbox3
mapbox4
You can name your project (using the ‘Project’ menu) and save it to your Mapbox account (‘Save’ button).

The ‘Share’ link or ‘Embed code’ can be used in your web page. Alternatively, you can provide your developer with the ‘MapID’ to use in her JavaScript code.

mapbox5
If you want to tweak the colors and fonts on the basic styles to create your own custom styles, you can download the Mapbox Studio Classic editor.

On a windows PC use  – https://www.mapbox.com/mapbox-studio-classic/#win64

On a Mac use – https://www.mapbox.com/mapbox-studio-classic/#darwin

mapbox6
Using the editor, you can add custom colors, fonts, icons and textures

mapbox7
You can also add custom data as well as minimum and maximum zoom control for you map

mapbox8
Once you are done, you can either upload your style to Mapbox (which gives you a link/embed code/MapboxID to include in you web page) or export the map as a png or jpeg file for your presentation.