beginner
No code
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

Getting started

There are a few resources you will need in order 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 indicate the location of the parks. You will need to download the SVG icon to use in your style.

Download SVG icon

Add data to a style

Web maps are made up of map tiles. To add your data to a web map, it needs to be cut up into tiles so the data can be displayed at various zoom levels. In Mapbox maps, the collection of tiles your data is cut up into is called a tileset. In Add points to a web map, part 1: create a dataset, you converted a dataset into a tileset in order to add it to a new map style.

Create a new 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 Create button next to Basic Template. (To follow along with this tutorial, you need to use the Basic template. If you choose a different template, the options that you see may look slightly different.)

Mapbox Studio create a new style dialog

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.

Mapbox Studio style editor showing how to rename a style

Create a new layer

You will add your tileset as a new layer here:

  1. When the style editor opens, click + Add layer in the upper left.
  2. Next to Source, click on the box and find your chicago-parks tileset. Click the name of the tileset to add it as the source for the layer. screenshot illustrating how to add a new layer in Mapbox Studio
  3. 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.
  4. Select the Symbol layer option so you can create a layer with markers.
  5. Click Create layer.

screenshot illustrating how to create a new layer in Mapbox Studio

Style a layer

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.

Style as a symbol layer

  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 Manage icons in your spritesheet.
  4. This opens the Manage style images option in the debug panel. screenshot demonstrating the upload SVG menu in Mapbox studio
  5. Click the Upload SVG Image button to and choose the marker you downloaded at the beginning of this tutorial from your files.
  6. Once the icon has loaded, choose it from the list. screenshot demonstrating the upload SVG menu in Mapbox studio
  7. 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 of your points.

screenshot showing a style with a custom icon loaded in Mapbox Studio

Publish a style

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

  1. Click the Publish style button in the top right of the editor.
  2. A window will pop up asking you to review your changes.
  3. Click Publish.
  4. Then, click Share, develop, & use your style.

animated gif illustrating how to publish your style

Share, develop, and use

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

Share a style with others

The Share section contains a share URL that allows you to easily share a preview of your style with others.

Screenshot showing the share section for a style in Mapbox Studio

Use this style with Mapbox GL JS

The Develop with this style section contains the style URL for your “Chicago Parks” style and the access token for your Mapbox account. You will need both of these to create an interactive map with Mapbox GL JS in the next section.

Screenshot showing the Develop with this style section in Mapbox Studio

Next Steps

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.