Add points to a web map Part 3

This is the third and final part in a tutorial series that teaches you how to add points to a map using the Mapbox Studio style editor, the Mapbox Studio dataset editor, and Mapbox GL JS. Part 3 focuses on Mapbox GL JS, a JavaScript library that will require writing code. In this part, you will learn how to add a custom style to a Mapbox GL JS map and add popups when a marker is clicked.

Getting started

There are a few resources you will need in order to follow along with this guide:

  • Chicago parks style. You will need a style containing markers for 10 Chicago parks. You can learn how to create this style in Part 1 and Part 2.
  • Development environment. This guide requires writing code. See Get ready to write code below for tips on how to get started.

Get ready to write code

In order to create an interactive map with popups you will need to use Mapbox GL JS. This will require writing some code. First you will need to get setup with a development environment to write HTML, CSS, and JavaScript code. If you are new to writing code, you may want to explore a resource like Codecademy to learn more about how front-end development works before using Mapbox GL JS. Here’s what you’ll need to do:

  • Download a text editor (for example, Sublime Text or Atom)
  • Familiarize yourself with JavaScript and front-end development concepts

Create a new Mapbox GL JS map

You will need to create a new HTML file in your text editor in order to initialize a Mapbox GL JS map.

Initialize your map

  • Open your text editor
  • Copy and paste the code below into your text editor to initialize your Mapbox GL JS map
  • Replace {access token} with your own access token
    • You can find your access token on your home page when you sign into Mapbox Studio
  • Replace {style URL} with your own style URL
    • You can find your style URL on the Share, develop, and use page for your new style
  • Save your file as index.html
  • Open the file in a browser
  • You should see a map displaying your data in a browser window
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Points on a map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id='map'></div>
    <script>
    mapboxgl.accessToken = '{access token}'; // replace this with your access token
    var map = new mapboxgl.Map({
      container: 'map',
      style: '{style URL}' // replace this with your style
    });
    // code from the next step will go here
    </script>
  </body>
</html>

Add popups

After you have successfully displayed your map, you will need to add a little more code to allow the user to interact with your markers. You will use the queryRenderedFeatures method in Mapbox GL JS to generate a list of all the points on your map and the feature properties associated with each. You will then use mapboxgl.Popup to create popups that show certain feature properties. Finally, you will add an event listener so that popups are only shown when the user clicks a marker.

Add more code

  • Copy and paste the code below the code that initializes your map, but before the </script> tag
    • Replace {layer name} with the name of your layer on your the information page for your tileset
    • Make sure that the properties match the name of the properties you would like to display in your popups. In this example, you will be displaying the title and description properties.
  • Open in your browser and refresh
  • You should be able to click on the markers and see titles and descriptions displayed
map.on('click', function(e) {
  var features = map.queryRenderedFeatures(e.point, {
    layers: ['{layer name}'] // replace this with the name of the layer
  });

  if (!features.length) {
    return;
  }

  var feature = features[0];

  var popup = new mapboxgl.Popup({ offset: [0, -15] })
    .setLngLat(feature.geometry.coordinates)
    .setHTML('<h3>' + feature.properties.title + '</h3><p>' + feature.properties.description + '</p>')
    .setLngLat(feature.geometry.coordinates)
    .addTo(map);
});

Final product

Congratulations! You’ve made a map using the Mapbox Studio dataset editor, Mapbox Studio style editor, and Mapbox GL JS that incorporates custom data and styles and allows for user interaction.

For more things you can do with Mapbox Studio, check out the Mapbox Studio manual. For more information on Mapbox GL JS and how it works, check out the Mapbox GL JS fundamentals guide.

Next article:

Build a store locator using Mapbox GL JS

Let's build a map application with Mapbox GL JS. This guide walks you through all the code that you need to build a store locator.

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