CSS, data, data journalism, data visualization, HTML, Javascript, maps

How to: build and customise interactive maps on Mapbox

Mapbox is an open source platform that allows users to create, customise and embed maps on websites and visualisations. Their developing tools such as APIs and libraries offer a great interactivity for experienced and beginners developers.

output_8iEyPG

Here I explain how to build and share the above map in 6 steps:

1. Login in on Mapbox Studio Classic 

2. Create a new project 

newproject.jpg

3. Go to Data -> Draw or import data

Files can be imported as Geojson, CSV, KML or GPX.

importdata

4. Choose map features such as the title, description or style.

output_HGC7s4.gif

Once the data has been imported correctly, it will be displayed on the map and stored in the data section. This information can still be modified introducing new descriptions or removing features:

dataimported

5. Save the map

6. Export the data or use the Map ID

Data can be downloaded as KML or GeoJSON and placed in the HTML code. However, the Map ID makes maps with large databases and a basic level of interactivity easier to customise.

The ID goes between the <script> tags, as the below picture shows:

Mapbox on Atom-editing.png

Do you have more examples? Let me know in the comments or on Twitter at @mcrosasb

 

Advertisements
Standard

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s