Add points to a web map Part 1

This is Part 1 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 1 focuses on the Mapbox Studio dataset editor. In this part, you will learn how to upload geospatial data as a dataset, draw additional data in the dataset editor, and save and export your dataset as a tileset.

Getting started

Before you start this tutorial, you will need to download this GeoJSON file, which includes the coordinates and feature properties for 9 different Chicago Parks.

Download GeoJSON

Upload a new dataset

Uploading your data to Mapbox Studio as a dataset lets you store an editable version of your data in your Mapbox account. Having an editable version of your data means that you can add, remove, and edit features (points, lines, and polygons) as well as properties for each feature.

About datasets

Inside the dataset editor you will see your data displayed on a dark base map to help visualize the features. You will be able to alter the style of the map in Part 2 of this series of guides. A feature can have one or more properties containing text. In the dataset editor you can edit both features and properties:

  • Features are the points, lines, and polygons on your map. You can add new features using the draw tools, edit the placement or shape of features using by clicking and dragging features on the map, or remove features all together by clicking on them and hitting the delete key. You can also click on each feature in the dataset editor to view its properties.

  • Properties can be strings, numbers, or booleans. In this example, there are ‘title’ and ‘description’ properties for each point with a unique text string. The dataset editor is where you can edit the properties of each feature. You can also add new properties or delete properties in the dataset editor. Make sure any content that you want to display in popups is included as a property while you are working in the dataset editor.

Create a dataset

  • Navigate to mapbox.com/datasets
  • Click the New dataset button
  • A new window will open. Select the Upload option in the upper right corner
  • Click to select the GeoJSON you just downloaded
  • Once your file has completed uploading, click Start editing
  • The dataset editor will automatically open

Draw data

You can use the geocoder in the dataset editor to search for a place, and use the draw tools to add a new point to your dataset. You can modify the geometry, placement, and properties of existing features with the dataset editor’s draw tools. Read more about draw tools in the Mapbox Studio manual.

Draw a new feature

  • Use the search tool to find Garfield Park Chicago
  • Use the draw tool to create a new point on the map
  • Click on the new feature and use the properties list on the left hand side to:
    • Add the field name ‘title’ and give it the value ‘Garfield Park’
    • Add the field name ‘description’ and give it the value ‘Home of the Garfield Park Conservatory’

Export as a tileset

Next, you will save and export your dataset as a tileset so that it can be added to a Mapbox style.

About tilesets

Web maps are made up of map tiles. In order 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. A collection of tiles is called a tileset. In Mapbox projects, your dataset’s features will be simplified when you convert your dataset to a tileset in order to make your map more performant.

Create a tileset

  • Click Save inside the dataset editor menu on the left to save your changes
  • Click Export in the dataset editor menu
  • Name your tileset and click Export in the open window
  • The uploads window open at the bottom right
  • After your tileset has succeeded, click View all your tilesets

Next steps

After you click on View all your tilesets, you will be sent to your Tilesets page. Head to part 2 to learn how to add your tileset to a map style in the Mapbox Studio style editor and then onto part 3 to add interaction with Mapbox GL JS.

Next article:

Add points to a web map Part 2

Add a tileset to a style

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