Use Atlas with other Mapbox products

To build with Mapbox GL JS and other Mapbox products and to serve your Atlas maps, you will need the Atlas token that you created as part of the installation process. This Atlas public token is unique to your Atlas instance, and will not work on Mapbox.com.

Available Mapbox APIs

With Mapbox Atlas, you can use the following Mapbox APIs offline:

Right now, Atlas only supports calls to these APIs that require public access (pk) tokens. For example, it's not possible to programmatically create, edit, or delete map styles using the Styles API since these calls require a secret access (sk) token, but you can do all these functions with the Atlas instance of Mapbox Studio.

Use Mapbox GL JS with Atlas

Note: Atlas supports Mapbox GL JS versions 0.40 through 0.54.

To use a Mapbox GL JS application with Atlas, make the following changes to the relevant files:

  1. Update mapboxgl.accessToken to a public access token created on your Atlas Studio Account page.
  2. Set mapboxgl.config.API_URL = '<your-atlas-url>'; within your application.
  3. Update the mapbox-gl-js library URLs in your HTML:
<script src='<your-atlas-url>/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
<link href='<your-atlas-url>/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />

If you use additional APIs in your application, you need to make sure that all APIs have been updated to the appropriate Atlas URL instead of the default api.mapbox.com.

Looking for inspiration? You can use Mapbox GL JS examples as a baseline to build off of, then make the above changes for working with Atlas.

Use Mapbox.js with Atlas

Note: Atlas supports Mapbox.js versions 2.0 through 3.1. While Mapbox.js is stable, it is not in active development. We recommend you to use Mapbox GL JS instead if possible.

Mapbox Studio styles with L.mapbox.styleLayer are supported when you use Mapbox.js with Atlas. Mapbox Studio Classic styles are not supported.

To use a Mapbox.js application with Atlas, make the following changes to your file:

  1. Update L.mapbox.accessToken to a public access token created on your Atlas Studio Account page.
  2. Update L.mapbox.config.HTTPS_URL to set the appropriate hostname and port for your Atlas installation.
  3. Use L.mapbox.styleLayer to set the style.

    • For example: L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v10').addTo(map);
  4. Update the mapbox.js library URLs in your HTML:
<script src='https://<your-atlas-url>/mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://<your-atlas-url>/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />

If you use additional APIs in your application, you need to make sure that all APIs have been updated to the appropriate Atlas URL instead of the default api.mapbox.com.

Use mobile and AR SDKs with Atlas

Atlas maps can also be used in mobile apps that use the Mapbox Android Maps SDK or the iOS Maps SDK, or in AR apps that use the Mapbox Unity SDK. You can make all apps that work on Mapbox.com also work with Atlas using the proper app configuration.

Use the Mapbox Maps SDK for Android with Atlas

  1. Install and launch your local Atlas instance by following the Atlas installation instructions.

  2. Log into your Mapbox Studio account and use the bundled Studio to create a new style. Copy the map style's ID.

  3. Add a new Style object to the map with the style ID that you've copied above:

    mapboxMap.setStyle(new Style.Builder().fromUri(uniqueStyleUrl), new Style.OnStyleLoaded() {
        @Override
        public void onStyleLoaded(@NonNull Style style) {
     
     
        }
    });
    

For more information about changing the map style on Android, see Changing the map style

  1. Use the Maps SDK's mapbox_apiBaseUrl XML attribute to update the map's API endpoint to your local IP address: app:mapbox_apiBaseUrl="https://XXX.XXX.XXX.XX:XXXX"

  2. Update the project's Mapbox access token with a token from your Mapbox account's token page. For more information about keeping Mapbox access tokens safe on Android, see our Private access token on mobile guide.

  3. Create a new class that extends your app's Application class and then override its onCreate() method.

  4. Use an OkHttpClient that trusts an SSL certificate.

    • Update the OkHttpClient client to accept the self-signed certificate when your project is in development.

    • Set up a regular certificate that would be accepted by a regular OkHttpClient instance when your project is live in production.

  5. Navigate to your app to successfully view Mapbox map tiles.

Static examples

Your Atlas installation comes with two static map examples that you can use for reference as you create your own Atlas maps. There is a vector map example used in a webpage powered by Mapbox GL JS, and a raster map example in a page powered by Mapbox.js. The HTML for both of these files is in the /static directory. To view these examples:

  1. Open the example HTML file in a text editor like Atom or Sublime.

    • For Mapbox GL JS: /atlas-server/static/index.html
    • For Mapbox.js: /atlas-server/static/mapbox-js.html
  2. In the JavaScript and CSS scripts in the header of the HTML file, update http://localhost:2999 to match your Atlas configuration.
  3. Remove the token placeholder text (your-atlas-studio-token) and replace it with your public pk access token. (Your public token is located on your Atlas account dashboard.) The token should be in quotation marks.
  1. Open the sample file in a browser to view the static map example.
Was this page helpful?