> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/ja/atlas/llms.txt)

# 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](https://docs.mapbox.com/help/dive-deeper/access-tokens/#public-tokens). With Atlas v3, instead of using a Mapbox access token, use the Atlas license key available at [https://atlas.mapbox.com/](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.

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.

```html
<!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](https://docs.mapbox.com/ja/atlas/guides/styles/) guide.