Skip to main content

Mapbox GL JS

Atlas v3 requires Mapbox GL JS version 3.18.0 or later.

The Atlas installer downloads Mapbox GL JS to your atlas-server directory. This enables you to use Mapbox GL JS without loading it from the Mapbox CDN.

Access tokens​

Mapbox GL JS with Mapbox.com requires a Mapbox public access token. With Atlas v3, instead of using a Mapbox access token, use the Atlas license key available at https://atlas.mapbox.com/.

This is a read-only license key with no sensitive information, so it can be safely exposed in Mapbox GL JS code.

Updating your Atlas license

Your Mapbox Account Manager handles updating your license expiration date whenever you renew with Atlas.

Once your Atlas license is renewed, you must update Mapbox GL JS with the new Atlas license key, otherwise Atlas will stop working. Update Mapbox GL JS with your new Atlas license to make sure Atlas continues to work.

Mapbox GL JS example code​

In the atlas-server directory, create a new index.html file with the following HTML and JavaScript code. This example sets up the Mapbox Streets style.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Atlas v3</title>
    <link rel="stylesheet" href="./mapbox-gl.css" />
    <script src="./mapbox-gl.js"></script>
    <style>
      html, body, #map { height: 100%; margin: 0; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = '<your-atlas-v3-license>';

      mapboxgl.baseApiUrl = '<your-atlas-url>';

      const map = new mapboxgl.Map({
        container: 'map',
        // Use HTTP or HTTPS
        style: 'http://<your-atlas-url>/data/styles/mapbox/streets-v12.json',
        center: [-74.5, 40],
        zoom: 9
      });
    </script>
  </body>
</html>

Configure Mapbox GL JS​

Update the example code above to configure Mapbox GL JS with your Atlas v3 deployment:

  1. Replace mapboxgl.accessToken with your Atlas v3 license.
  2. Set mapboxgl.baseApiUrl to the URL of your Atlas deployment.
  3. Updated the style for mapboxgl.Map with the URL of your Atlas deployment. With Atlas v3, the style URL must use must use HTTP or HTTPS instead of the mapbox:// protocol.

Configure map styles​

The example above configures the Mapbox Streets style with Atlas v3. To set up other default Mapbox styles or custom styles, see the map styles guide.

Was this page helpful?