Add points to a web map Part 2

This is Part 2 of a series of guides that will teach you how to add points to a map using the Mapbox Studio style editor, the Mapbox Studio dataset editor, and Mapbox GL JS. Part 2 focuses on the Mapbox Studio style editor. In this part, you will learn how to create a new style using one of the Mapbox default styles, add a tileset as a layer, style that layer, and 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 Part 1.

  • 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 your 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 projects, the collection of tiles your data is cut up into is called a tileset. In Part 1, you converted your dataset into a tileset in order to add it to a new map style.

Create a new style

First, you will need to create a new style.

  • On your Tilesets page, click on the chicago-parks tileset
  • This will take you to the tileset information page for chicago-parks
  • Click the Add to style button
  • Click on the New style tab in the window that appears
  • Name your style ‘Chicago Parks’ and click Create
  • The style editor will automatically open

gif of tilesets page

Create a new layer

Welcome to the Mapbox Studio style editor! Here you will add your tileset as a new layer in the style.

  • A panel with options for creating your layer will open on the left of the style editor
  • For this project, you’ll select the Symbol layer option because you’re creating a layer with markers
  • Click Create layer

gif of create layer panel

Style your layer

In the Mapbox Studio style editor, you can specify the style properties of each layer, including the layers in the Mapbox default styles and any layers you’ve added with custom data. For this example, you will create a Symbol layer. You can style symbol layers with both text and icons.

gif of style icon panel

Style as a symbol layer

  • Click on the chicago-parks layer you created in the layer list on the left menu in the style editor
  • When the pane opens, click the Style tab if you’re not already there
  • Click the Icon sub tab
  • Click the text box next to Image
  • Click the Add SVG icon button in the pane that opens
  • Choose the SVG icon you downloaded at the beginning of the tutorial and click upload in the open window
  • Once it has loaded, choose the uploaded marker from the icon list, and you should now see the marker icon appear on all of your points
  • If you would like to show all markers, even if they overlap, click on the Placement tab and check the Allow icon overlap option near the bottom

Publish your 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.

  • Click the Publish button in near the top of the left menu
  • A window will pop up asking you to review your changes
  • Click Publish
  • Then, click Preview, develop, & use

gif of style icon panel

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 your style with others

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

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

Next Steps

Head to part 3 to add popups with information about each park to your map using Mapbox GL JS.

Next article:

Add points to a web map Part 3

Add popups with Mapbox GL JS

Additional questions? Ask our support team or learn more about How Mapbox Works.