Show Sidebar Hide Sidebar

Mapbox in Plotly 2.0

Create an Map with Mapbox in Plotly 2.0

Step 1

Mapbox Access Token

Before you can create a visualisation with mapbox, you must ensure that you have a mapbox token and that it is added to you Plotly account. If you need to do so, check the Mapbox Setup tutorial.

Step 2

Try an Example

You can also use the data featured in this tutorial by clicking on 'Open This Data in Plotly' on the left-hand side. It'll open in your workspace.

Open data

Step 3

Add Your Data to Plotly

Head to Plotly’s new online workspace and add your data. You have the option of typing directly in the grid, uploading your file, or entering a URL of an online dataset. Plotly accepts .xls, .xlsx, or .csv files. For more information on how to enter your data, see this tutorial.

For this tutorial, we are using the USGS Earthquake dataset, which can be added by clicking 'IMPORT' and selecting 'By URL'. Then paste in the URL: https://raw.githubusercontent.com/bcdunbar/datasets/master/earthquake_march_2017.csv

add data

Step 4

Create Chart

After adding the data, go to GRAPH on the left-hand side, then 'Create'. Click 'Chart Type', then choose 'Satellite Maps' in the 'MAPS' column.

chart types

Now, in the panel on the left-hand of the screen you ought to see options to select your variables. Firstly, click the ‘Latitude’ dropdown and select the column name ‘latitude’ and then for the longitude dropdown select the column name ‘longitude’. This ought to have filled scatter points over the map. Additionally, click the ‘Hover Text’ dropdown and select the column variable ‘place’, which will display the column values when a user hovers over a data point. Finally, select the variable ‘mag’ (magnitude) from both the remaining dropdown menus (‘Size’ and ‘Color’).

trace values

Step 5

Style Chart

Now, click ‘Traces’ under ‘STYLE’ and select the color scale you wish to apply to the data points. For this tutorial, select yellow to blue. In addition, to color scales there is the option of reversing the scale and toggling the visibility of the color bar. Here, leave the default values of ‘Hide Color Bar’ and ‘Normal’ scale.

color scale

Immediately below, in ‘Points’, enter ‘0.75’ in the ‘Marker Opacity’ text box to slightly adjust the opacity. Next, enter ‘15’ in the ‘Maximum Marker Size’ text box to significantly reduce each marker size.

style points

In the ‘Values Shown On Hover’ section, uncheck the ‘Lat’ and ‘Lon’ boxes, which will prevent the latitude and longitude being displayed when a viewer interacts with a data point.

show on hover

Next, we can make changes to the current Mapbox features.

For this tutorial, we will make a borderless map with a darker style. To do this, first, click ‘Layout’ under the ‘STYLE’ tab. Now, to change the map style to dark, click ‘Map Style’ and select ‘Dark’ from the ‘Preset Styles’. This ought to have changes your layout from the default light to the darker layout as seen below.

map style

As you may have noticed, majority of the data points – earthquakes – occur around the pacific ring (commonly known as the ‘ring of fire’). Thus, to set a better default position for the viewer, click ‘Map Positioning’ and enter ‘19’ for ‘Center Latitude’, ‘-155’ for ‘Center Longitude’, and finally increase the ‘Zoom Level’ to ‘2’.

map positioning

As previously mentioned, in this tutorial we want to make a borderless map. Thus, select the ‘Margins and Padding’ panel. Here, enter ‘0’ in all the available options (Top, Bottom, Left, and Right).

map margins

No we have finished making changes to the traces and layout, we can add some annotations and notes to provide more information about data source and statistics for the viewer. To add these, click ‘Notes’ under the ‘STYLE’ tab and select the blue ‘+ Annotation’ button. From the dropdown select ‘source to data’.

data source

Next, enter ‘Source: USGS’ in the text box. It will also provide you with the option to enter a URL/link. You can paste in the link https://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php. Finally, change the font by clicking the ‘Typeface’ dropdown and selecting the font ‘Raleway’, then change the ‘Color’ of the text to white.

link data source

Now add a second annotation by clicking the blue ‘+ Annotation’ button again, but this time select ‘caption’ from the options.

add caption

Here, you can enter your caption; for this tutorial, paste in “Earthquakes: 2017/03/04 - 2017/04/04 size and color are representative of magnitude” and make the first section bold. Again, like before, change the ‘Typeface’ and ‘Size’ to ‘Raleway’ and white. It is also important to note that you can adjust the vertical and horizontal position of the caption, however we’ll leave its default value in this tutorial.

style caption

Step 6

Save and Share

Your chart is now done! Click SAVE on the left-hand side.

save plot

After giving your file a name, select your PLOT and DATA as 'Public' or 'Private'. For more information on how sharing works, including the difference between private, public and secret sharing, visit this page.

privacy options

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to our Premium or Enterprise plans.