Make a heatmap with Mapbox Studio

Getting started​

To complete this tutorial, you will need:

• A Mapbox account and access token. Sign up for a free account. You can find your access tokens on the Access Tokens page of your Developer Console.
• 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.

arrow-downDownload CSV

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:

1. Go to your Tilesets page.
2. Click the New tileset button.
3. Import meteorites.csv. To do so, you can either:

• Click Select a file and select the file.
• Drag the file into the uploader.

4. 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.

1. Go to your Styles page in Mapbox Studio.
2. Click the New style button. Find the Basic Template style and click Customize Basic Template.
3. 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.

1. When the style editor opens, you will see the Components panel on the left side. Click over to the Layers tab.
2. At the top of the layer panel, click + to add a layer.
3. In the list of Data sources, search for "meteorites" and select the meteorite strike tileset.
4. Click the Type option, and select the Heatmap option.

5. Click the Style tab at the top of the panel.
6. The meteorite strike tileset is now a heatmap Mapbox 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.

1. Select the Radius tab in the heatmap layer.
2. Choose Style across zoom range.
3. For the first stop, change the radius at zoom level 0 (zoomed out to the maximum extent) to 5 px.
4. Click Done.
5. 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.

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.

1. Select the Weight tab.
2. Click on Style across data range.
3. You will be prompted to choose a numeric data field on which to base the property's styling. Choose mass(g).
   
   

4. The first stop is at a mass of 0 and a weight of 1. Leave this stop at these settings.
5. The next stop is already set to the maximum mass in the dataset. Change the weight to 25.
6. 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.

1. Select the layer's Intensity tab.
2. Click on Style across zoom range.
3. The first stop is at zoom level 0 and an intensity of 1. Leave this as it is.
4. Change the second stop to zoom level 22 and an intensity of 10.

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.

1. Select the Color tab in the heatmap layer.
2. The first stop has a density of 0 and 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.
3. Click on the second stop, which has a density of 0.1. Change the color to #ffffb2.
4. Click Done.
5. Adjust the remaining density stops with the following colors:

• 0.3: #feb24c
• 0.5: #fd8d3c
• 0.7: #fc4e2a
• 1.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:

1. Select the Opacity layer.
2. 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​

Congratulations on completing this tutorial! You have created a heatmap layer in a Mapbox map style that displays meteorite strike data from around the world.

What we covered​

Learn more​

• Take a look at the Publish style section of the Mapbox Studio Manual to learn about the different ways you can use your style.
• Understand the different layer types available in Mapbox map styles in the Mapbox Style Specification.