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.
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.
In order 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.
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.
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 Create.
- You will be taken to the Mapbox Studio style editor, where you will create your map style. Rename your new style so that it will be easy to find later! Click into the title field in the upper left side of the screen and change the title to Meteorites.
To add and style the meteorite strike data as a heatmap layer, you will need to add a new layer to the style you just created.
- At the top of the layer panel, click + Add layer.
- In the list of Data sources, click + Upload, 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.
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.
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) to
- Click Done.
- The next stop is already set at zoom level
22(zoomed in to the maximum extent) with a radius of
30 px. Leave this stop with these settings.
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
- The first stop is set to a mass of
0and a weight of
1. Leave this stop at these settings.
- The next stop is already set to the maximum mass in the dataset. Change the weight to
The intensity of the heatmap layer can be increased as the map zooms in, in order 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 set to a zoom level of
0and an intensity of
1. Leave this as it is.
- Change the second stop to zoom level
22and an intensity of
These images demonstrate 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.
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 of
0. 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
- Click Done.
- Adjust the remaining density stops with the following colors:
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.
When you finish editing your map style, publish your changes by clicking Publish style in the upper right side of the screen. When you click the publish button, a window will appear showing you the difference between the version of this style that was previously published and the current version. 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.
Mapbox Studio gives you a variety of ways to use the new map style you just created. You can use this map directly on a website or in an 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.