beginner
No code
Add points to a web map, Part 1: create a dataset

This is the first 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 1 focuses on the Mapbox Studio dataset editor. In this tutorial, 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,

  • Mapbox account. Sign up for free at mapbox.com/sign-up.
  • Data. Download this GeoJSON file, which includes the coordinates and feature properties for nine 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, data is displayed on a dark base map to help visualize the features. You will be able to alter the style of the map in Add points to a web map, Part 2. 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. In the dataset editor 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.

animation illustrating how to create a dataset

Create a dataset

  1. Log into Mapbox Studio.
  2. Navigate to the Datasets page.
  3. Click the New dataset button.
  4. A new window will open. Select the Upload option in the upper right corner.
  5. Click to select the GeoJSON you just downloaded.
  6. Once your file has completed uploading, click Start editing.
  7. The dataset editor will automatically open.

Draw data

You can use the geocoder in the dataset editor to search for a place and 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

  1. Click inside the Search places field and type Garfield Park Chicago.
  2. Use the draw tool to create a new point on the map.
  3. 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.

animated gif illustrating how to draw a new feature

Export as a tileset

Next, 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 maps, 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

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

animated gif illustrating how to create a tileset

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.