Make a choropleth map, part 1: create a style

Prerequisites​

To follow along with this guide you'll need:

• Mapbox account: Sign up or login to a free account.
• GeoJSON File: Download the provided GeoJSON file, which includes spatial data on population density across US states, by clicking the download button below.
  • This file is borrowed from the Leaflet choropleth tutorial.

Upload your data​

To add the population density data to a style in Mapbox Studio, you need to upload it to your account. Follow these steps to upload the data:

1. If you haven't already, download the provided GeoJSON, which includes spatial data on population density across US states by clicking the download button below.

2. Go to your Tilesets page in Mapbox Studio.
3. On your Tilesets page, click the New tileset button and select the file stateData.geojson you downloaded.
4. Once the upload is complete, click on the arrow next to the filename to open the tileset in the Tileset explorer.

Now you will be able to inspect the data as seen in the next step.

Inspect data in the Tileset explorer​

When you upload vector data to your Mapbox account, our servers convert it to a vector tileset so it can be rendered quickly and efficiently in the Mapbox Studio style editor and with Mapbox GL JS. The Tileset explorer shows some useful information about the tileset that was created from your uploaded data:

1. Under layers Vector layers, you can see the properties from the original GeoJSON file: density and name. The uploaded tileset maintains the properties from the original data file, which you can use when adding style rules for the tileset.
2. The bounding box viewport provides a visual overview of the geographic extent of your dataset, as well as the bounds of the current map view.
3. Click the Share & use menu to find the tileset ID. You can also toggle the tileset's visibility from Private to Public.

Now that you've inspected your dataset, you can move onto creating a style in the next step.

Create a new style​

To put your data on a map, you'll first need to create a style that will reference the data. To create a style, follow these steps:

1. Go to your Styles page.
2. Click the dropdown next to the New style button.
3. Select Classic Template.
4. Select Mapbox Streets.
5. Mapbox Studio will create a new style based on Mapbox Streets and open it in editor. Once opened, rename the style by clicking into the title field in the upper left side of the screen to change the title.

Excellent! Welcome to the Mapbox Studio style editor. This is where you will make changes to your new map style.

Add a new layer​

Now you will add and style the population density data, by adding a new layer to the map:

1. Make sure you have the Layers tab selected.
2. Click the + button and select layers Custom layer...
3. Add the data from your tileset.
   • The editor is now showing your map in x-ray mode. X-ray mode shows all the data in the sources added to the style, regardless of whether there is a layer to style it.
   • In the New layer panel, click the dropdown under Source and select the statedata source you created.
4. Once the layer is created, double click on the layer name in the Style tab and rename the layer to statedata.

Your new layer will now be highlighted on the x-ray map.

Style the layer​

Click the Style tab and the map will switch back to style mode displaying your new layer. You will see the state data on the map with a default style (black with 100% opacity).

On the original Leaflet map, the data is styled based on the population density of each state:

Data-driven styling​

In the Mapbox Studio style editor, you can assign a color to each state based on its population density by following these steps:

1. Click on the statedata layer and make sure you're on the Style tab.
2. Next, click Style across data range towards the bottom of the tab.
3. In the popup, select density.
   • This will allow you to style each state according to its population density.
4. Make sure rate of change is linear

Now you can start breaking down the population density into ranges in the next step.

Adding stops and colors to group data​

Now you can add stops and colors to break states up into groups with similar population densities. By default this will start with two stops (the max and min values of the data), but you can add more stops between them.

1. Color the starting value.
   • The first stop is fixed at 1.264, based on the information in the data set you uploaded so you don't need to change the value.
   • Click on the black box and select the HSL dropdown and select HEX.
   • Copy and paste #FFEDA0 into the color value.
2. Add the second stop.
   • Click the + Add another stop button.
   • Set the numeric value of the second stop to 10.
   • Change the color to #FFEDA0 as well.
3. Add the rest of the stops.
   • Add in the following stops as you did in the previous step:
     • 20: #FED976
     • 50: #FEB24C
     • 100: #FD8D3C
     • 200: #FC4E2A
     • 500: #E31A1C
     • 1000: #BD0026
   • As you add stops, you will see the map reflect the changes, as different states change colors. In this case, all states with a population density between 0-10 will be assigned the color #FFEDA0, all states with population density from 10-20 will be assigned the color #FED976, and so on.
4. Add an outline to each of the states and reduce their opacity to help your readers distinguish between neighboring states.
   • Change the Opacity to 0.6.
   • Next, change the 1px stroke style property to #FFFFFF.

Now that your data is colored, you can add labels to your data in the next step.

Put labels on top of data​

After you've created and styled your layer, your map should look something like this:

Everything looks good, except for one thing - the labels are under the data layer. The Mapbox Studio style editor allows you to reorder layers on the map and put country labels, city labels , state labels, etc., on top of your data by following these steps:

Drag your statedata layer below the Place labels, place labels group of layers.

Turn off lower level labels​

Now that the labels are on top of the population density data, when you zoom in, city labels are appearing above the more important state labels making the view noisy. To clean up the map, you can turn off the city labels like so:

1. Click on the Place labels layer and open the Place labels tab.
2. Toggle Settlements off.
3. Toggle Settlement subdivisions off.

Change view from Globe to Mercator​

You can change the projection of your map to several options, including Mercator, which will show a flat map as opposed to a globe.

To change the map's projection, follow these steps:

1. Click the Global tab.
2. Click on Projection
3. Open the dropdown under Projection name, scroll down and select Mercator.

Your map will now appear as a flat, 2D map in the Mercator style.

Publish the style​

Now that you have your map looking good, it's time to publish! Click the Publish button in the top right of the screen, then click Publish again on the next prompt.

Your style is now accessible and can be used in your applications or websites! If you go back to your Styles page, you will see your new style at the top of the list.

Next steps​

Congratulation! You've finished Part 1 of this tutorial series.

What we covered​

Head to part 2 to learn how add interactive elements to your map and publish it to the web with Mapbox GL JS.