Use Atlas with other Mapbox products

Join the Mapbox Developers Discord Communityarrow-right

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 Atlas, you can use the following Mapbox APIs offline:

• Vector Tiles API
• Raster Tiles API
• Styles API
• Static Images API
• Static Tiles API
• Tilequery API
• Geocoding API
• Navigation API

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.0 through 2.4.1.

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

Note

Use mapbox.config.API_URL instead of mapbox.baseApiUrl for Mapbox GL JS v0.52 and earlier.

1. Update mapboxgl.accessToken with your Atlas public access token.
2. Set mapboxgl.baseApiUrl = '<your-atlas-url>'; within your application.
3. Add the line Object.defineProperty(mapboxgl.config, 'API_URL_REGEX', { value: new RegExp(mapboxgl.baseApiUrl) }); within your application.
4. Update the mapbox-gl-js library URLs in your HTML:

<script src="<your-atlas-url>/mapbox-gl-js/v2.4.1/mapbox-gl.js"></script>
<link
  href="<your-atlas-url>/mapbox-gl-js/v2.4.1/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.

If you are using Mapbox GL JS with 3D terrain, replace the mapbox.mapbox-terrain-dem-v1 source with the mapbox.terrain-rgb source in your style.

<div id="map"></div>

<script>
  mapboxgl.accessToken = '<your-atlas-public-token>';
  mapboxgl.baseApiUrl = '<your-atlas-url>';
  Object.defineProperty(mapboxgl.config, 'API_URL_REGEX', {
    value: new RegExp(mapboxgl.baseApiUrl)
  });

  var map = new mapboxgl.Map({
    container: 'map',
    center: [-119.328871, 37.802476],
    pitch: 85,
    bearing: 80,
    zoom: 10,
    hash: true,
    style: 'mapbox://styles/mapbox/satellite-v9'
  });

  map.on('load', function () {
    map.addSource('mapbox-dem', {
      type: 'raster-dem',
      url: 'mapbox://mapbox.terrain-rgb',
      tileSize: 512,
      maxzoom: 14
    });
    // add the DEM source as a terrain layer with exaggerated height
    map.setTerrain({ source: 'mapbox-dem', exaggeration: 4 });
  });
</script>

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.0 through 3.3.1. While Mapbox.js is stable, it is not in active development. We recommend that you 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 with your Atlas public access token.
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

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

5. Add xmlns:mapbox="http://schemas.android.com/apk/res-auto" to the top-level parent ViewGroup of the XML file that you've adjusted in step #4 above.

6. Update the project's Mapbox access token with your Atlas public access token. For more information about keeping Mapbox access tokens safe on Android, see our Private access token on mobile guide.

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

8. 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.

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

Static examples

Your Atlas installation comes with several static map examples that you can use for reference. The HTML for all these files are hosted on your Atlas installation at ATLAS_URL/static/EXAMPLE_NAME where ATLAS_URL is the URL of your Atlas installation and EXAMPLE_NAME is one of the following:

EXAMPLE_NAME	Description
3d-buildings.html	3D buildings with Mapbox GL JS
3d-terrain.html	3D terrain with Mapbox GL JS
boundaries-v3.html	Mapbox Boundaries v3
external-geojson.html	Load data from an external GeoJSON file
geocoder.html	Atlas Search with Mapbox GL Geocoder
mapbox-js.html	Mapbox.js with Mapbox Streets
satellite.html	Mapbox GL JS with Mapbox Satellite
streets.html	Mapbox GL JS with Mapbox Streets
style-selector.html	Change a map's style
vector-tile-source.html	Add a vector tile source

1. Navigate to the file in your browser (for example ATLAS_URL/static/3d-buildings.html) and note that nothing appears — this is expected as the file needs placeholder values filled out to correctly point to your Atlas instance.
2. Save the file (HTML only) and open it in your text editor. Replace http://localhost:2999 with your Atlas URL. Replace the value of mapboxgl.accessToken with your Atlas public access token (available at your Atlas instance's URL).
3. Open the edited file in your browser.

Join the Mapbox Developers Discord Communityarrow-right

Was this page helpful?