Add points to a web map, part 2: create a style
This is the second in a series of tutorials that will teach you how to add points to a map using the Mapbox Studio dataset editor, the Mapbox Studio style editor, and Mapbox GL JS.
Part 2 focuses on the Mapbox Studio style editor. In this tutorial, you will learn how to:
- Create a new style using one of the Mapbox default styles
- Add a tileset as a layer
- Style the new layer
- Publish your style
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.
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.
After finishing Add points to a web map, part 1: create a dataset, create a new style using the Basic template. On your Styles page in Mapbox Studio, click the New style button. Find the Basic Template style and click Customize Basic Template.
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.
You will add your tileset as a new layer here:
- When the style editor opens, you will see the Components panel on the left side. Click over to the Layers tab.
- Click + in the upper left.
- 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.
- Mapbox Studio recognizes that the data you have uploaded is focused on a different location, so it displays the message "This tileset isn't available from your map view." Click Go to data, and the map view will refocus on Chicago.
- Click the Type option, and then choose the Symbol layer option so you can create a layer with markers.
- Click back to the Style tab.
In the Mapbox Studio style editor, you can specify the style properties of each layer. This includes the layers in the Mapbox default styles and any layers you’ve added with custom data. For this example, you will style a symbol layer. You can style symbol layers with both text and icons.
First, upload your custom icon:
- Click on the chicago-parks layer you created in the layer list on the left side of the style editor.
- When the style panel opens, click the Style tab if you're not already there.
- Select the Icon tab and click on Manage icons in your spritesheet.
- This opens the Images option in the top toolbar.
- 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:
- Choose it from the list.
- 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
You should now see the marker icon appear on all your points.
Now that you have finished styling your map, you need to publish your style for those changes to be live on the web.
- Click the Publish button in the top right of the editor.
- A window will pop up asking you to review your changes.
- Click Publish.
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.
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.