beginner
JavaScript
Add points to a web map, Part 3: add interactivity

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 dataset editor, the Mapbox Studio style editor, and Mapbox GL JS. Part 3 focuses on Mapbox GL JS, a JavaScript library that will require writing code. In this tutorial, 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:

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 code. First, you will need to get setup with a development environment to write HTML, CSS, and JavaScript. 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 an HTML file

Create a new HTML file in your text editor in order to initialize a Mapbox GL JS map.

Initialize your map

  1. Open your text editor.
  2. Copy and paste the code below into your text editor to initialize your Mapbox GL JS map.
  3. Replace {access-token} with your own access token.
  4. 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.
  5. Save your file as “index.html.”
  6. Open the file in a browser.
  7. 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 URL
    });
    // 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. 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. 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

  1. Copy and paste the code below into your HTML file after the code that initializes your map, but before the </script> tag.
    • Replace {layer-name} with the name of your layer as seen in the style editor. This is likely chicago-parks if you have been following the earlier tutorials in this series.
    • Make sure that the properties match the name of the properties you would like to display in your popups. In this example, you will display the title and description properties.
  2. Open in your browser and refresh.
  3. You should be able to click on the markers and see titles and descriptions displayed in popups.
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.

Next steps

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 our guide on how Mapbox web applications work.