Make a heatmap with Mapbox Studio
A heatmap is a way of representing data that allows you to visualize both data point density as well as the relative differences between points based on data properties. They are a visually engaging way to encourage your audience to explore the data displayed on your map.
In this tutorial, you will use Mapbox Studio to create a heatmap that displays the location of meteorite strikes around the world, based on data collected by NASA. You will also use the weight of each meteorite in grams to display the relative size of each meteorite.
Getting started
To complete this tutorial, you will need:
- A Mapbox account and access token. Sign up for an account at mapbox.com/signup. You can find your access tokens on your Account page.
- Meteorite strike data. In this tutorial, you will be using information about meteorite strikes from NASA's open data portal. Download this CSV file to your computer so that you can access it in the first step of the tutorial.
Upload your data
To add the meteorite strike information to a style in Mapbox Studio, you need to upload it to your account first. To upload this file to Mapbox Studio:
- Go to your Tilesets page.
- Click the New tileset button.
- Import
meteorites.csv. To do so, you can either:
- Click Select a file and select the file.
- Drag the file into the uploader.
- Click Confirm to upload the file to your account.
When the upload is complete, there will be a notification icon in the lower right corner of the screen.
Create a new style
Now that you have uploaded the meteorite strike information as a tileset, you can add it to a new map style.
- Go to your Styles page in Mapbox Studio.
- Click the New style button. Find the Basic Template style and click Customize Basic Template.
- Now in the Mapbox Studio style editor, you will create your map style. Rename your new style so that you can find it later! Click into the title field in the upper left side of the screen and change the title to Meteorites.
Add a heatmap layer
To add and style the meteorite strike data as a heatmap layer, you will need to add a new layer to the style you created.
- When the style editor opens, you will see the Components panel on the left side. Click over to the Layers tab.
- At the top of the layer panel, click + to add a layer.
- In the list of Data sources, search for "meteorites" and select the meteorite strike tileset.
- Click the Type option, and select the Heatmap option.
- Click the Style tab at the top of the panel.
- The meteorite strike tileset is now a heatmap layer in your style. Click on the layer name and change it to "meteorite strikes".
Configure layer properties
A heatmap layer in Mapbox Studio has several different layer property options. Understanding what these properties mean is key to creating a heatmap that accurately represents your data and strikes the right balance between showing too much detail and being a large colorful blob!
- Color: Defines the heatmap’s color gradient, from a minimum value to a maximum value. You can adjust the density and color of each stop individually, as well as add and delete stops.
- Opacity: Controls the global opacity of the heatmap layer.
- Radius: Sets the radius for each point in pixels. As the radius number increases, the heatmap will get smoother and less detailed.
- Weight: Measures how much each individual point contributes to the appearance of your heatmap. Heatmap layers have a weight of one by default, which means that all points are weighted equally. Increasing the weight property to five has the same effect as placing five points in the same location. You can use the Style across data range and Style with data conditions options to set the weight of your points based on specified properties.
- Intensity: A multiplier on top of the weight property. Intensity is primarily used as a convenient way to adjust the appearance of the heatmap based on zoom level.
Radius
In a heatmap, the radius of the points should increase as the zoom level increases to preserve the smoothness of the heatmap as the points become more spread out. For this tutorial, you will change the default (a radius of 30 px at all zoom levels) so that the radius increases as the map is zoomed in.
- Select the Radius tab in the heatmap layer.
- Choose Style across zoom range.
- For the first stop, change the radius at zoom level
0(zoomed out to the maximum extent) to5 px. - Click Done.
- The next stop is already set at zoom level
22(zoomed in to the maximum extent) with a radius of30 px. Leave this stop with these settings.
Weight
In the tileset you uploaded, the mass(g) property ranges from 1-60000000 grams. That's a wide range of meteorite sizes! Give more weight in your heatmap to the larger meteorites by setting stops that increase the weight of a point as the mass increases.
- Select the Weight tab.
- Click on Style across data range.
- You will be prompted to choose a numeric data field on which to base the property's styling. Choose
mass(g).
- The first stop is at a mass of
0and a weight of1. Leave this stop at these settings. - The next stop is already set to the maximum mass in the dataset. Change the weight to
25. - Click
Done.
Intensity
The intensity of the heatmap layer can be increased as the map zooms in, to preserve a similar appearance throughout the zoom range.
- Select the layer's Intensity tab.
- Click on Style across zoom range.
- The first stop is at zoom level
0and an intensity of1. Leave this as it is. - Change the second stop to zoom level
22and an intensity of10.
These images show the impact of intensity on your style's appearance. The image on the right shows intensity that uses the default of 1, while the image on the left shows intensity that increases with zoom level.
Color
Heatmap layers in Mapbox Studio come with a vibrant set of preset colors with which to represent the density of the data points. For this tutorial, though, we will change the color scheme. We've taken these colors from a color recommendation site that's specifically for cartography, Color Brewer.
- Select the Color tab in the heatmap layer.
- The first stop has a density of
0and an opacity of0. Without these settings, the meteorite layer would be opaque, obscuring the rest of the map. Leave this stop at these settings. - Click on the second stop, which has a density of
0.1. Change the color to#ffffb2. - Click Done.
- Adjust the remaining density stops with the following colors:
0.3:#feb24c0.5:#fd8d3c0.7:#fc4e2a1.0:#e31a1c
Opacity
Your heatmap is looking good, but it's difficult to read location labels since the meteorite strike points obscure them. Adjust the heatmap layer's opacity so that you can read the labels:
- Select the Opacity layer.
- Change the opacity to
0.7, either by using the slider bar or by typing the number in directly.
Publish
When you finish editing your map style, publish your changes by clicking Publish in the upper right side of the screen. When you click the publish button, a window will display the difference between the previous and current version of this style. If you're happy with the changes, click Publish. Your style will now be available to share from a variety of tools and applications.
If you go back to your Styles page, you will see your new style at the top of the list.
Finished product
You have created a style that displays meteorite strike data from around the world, in a way that also allows you to show the relative mass of each meteorite.
Next steps
Mapbox Studio gives you a variety of ways to use the new map style you created. You can use this map directly on a website or in a web or mobile application. Take a look at the Publish style section of the Mapbox Studio Manual to learn about the different ways you can use your style.