Add points to a web map, Part 2: create a map style

Create a map style​

This part of the tutorial series focuses on using the Mapbox Studio style editor, a visual editor you can use to create a custom map style. In this tutorial, you will learn how to:

• Create a new map style
• Add a new layer to your style using a tileset
• Style your new layer
• Publish your style

The final product for this tutorial series is an interactive web map with markers and popups, as shown in Part 3: Add interactivity. The map below shows the map style you will create in this part of the series.

Getting started​

There are a few resources you will need to follow along with this guide:

• Tileset. You will need a tileset containing 10 Chicago parks. You can learn how to create this tileset in Add points to a web map, part 1: create a dataset.
• Custom icon. This tutorial uses a custom icon to show the location of the parks. You will need to download the SVG icon to use in your style.

Create a new style​

After finishing Add points to a web map, part 1: create a dataset, create a new style using the Streets template.

On your Styles page in Mapbox Studio, click the New style button.

The style editor will open automatically. Rename your new style to Chicago Parks using the title field in the upper left side of the screen.

Create a new layer​

Web maps are comprised of map tiles. To add your data to a web map, Mapbox will cut it up into tiles so the data can display at various zoom levels. The collection of tiles that Mapbox cuts your map into is called a tileset. In Add points to a web map, Part 1: create a dataset, you converted a dataset into a tileset to add it to a new map style.

You will add your tileset as a new layer here:

1. When the style editor opens, you will see the Components panel on the left side. Click over to the Layers tab.
2. Click the + button in the upper left corner of the Layers tab & click Custom layer from the Add a new layer or component modal.
3. In the list of Data sources, find your chicago-parks tileset, click the name of the tileset, and then click the source layer that appears to add it as the source for the layer. Zoom to your data.
4. Click the Type option, and then choose the Symbol layer option so you can create a layer with markers.
5. Click back to the Style tab.

Style your symbol layer​

Since you selected Symbol as the type for this layer, you will be styling a symbol layer. You can style symbol layers with both text and icons.

First, upload your custom icon:

1. Click on the chicago-parks layer you created in the layer list on the left side of the style editor.
2. When the style panel opens, click the Style tab if you're not already there.
3. Select the Icon tab and click on Add or remove images.
4. This opens the Images option in the top toolbar.
5. Click the Upload images button and choose the marker you downloaded at the beginning of this tutorial from your files.

Once the icon has loaded, use it in your chicago-parks layer:

1. Choose it from the list.
2. If you would like to show all the markers, even if they overlap, click on the Placement tab. Scroll down to Allow icon overlap and set it to True.

You should now see the marker icon appear on all your points.

Publish your style​

Now that you have finished styling your map, you need to publish your style for those changes to be live on the web.

1. Click the Publish button in the top right of the editor.
2. A window will pop up asking you to review your changes.
3. Click Publish.

Share your style​

The Share modal contains the resources you need to publish your style in a web app, mobile app, or with another third-party tool.

Click Share in the upper right of the style editor. The Share modal contains a share URL that allows you to share a preview of your style with others. The modal also contains a style URL and your access token, both of which you will need in part three of this tutorial.

Next Steps​

Congratulations! You've completed Part 2 of Add points to a web map.

What we've covered​

Next, head to Add points to a web map, Part 3: add interactivity to add popups with information about each park to your map using Mapbox GL JS.