Skip to main content

Use Atlas with other Mapbox products

Additional Developer Resources

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:

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 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_apiBaseUri XML attribute to update the map's API endpoint to your local IP address: mapbox:mapbox_apiBaseUri="https://XXX.XXX.XXX.XX:XXXX"

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

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

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

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

  6. 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_NAMEDescription
3d-buildings.html3D buildings with Mapbox GL JS
3d-terrain.html3D terrain with Mapbox GL JS
boundaries-v3.htmlMapbox Boundaries v3
external-geojson.htmlLoad data from an external GeoJSON file
geocoder.htmlAtlas Search with Mapbox GL Geocoder
mapbox-js.htmlMapbox.js with Mapbox Streets
satellite.htmlMapbox GL JS with Mapbox Satellite
streets.htmlMapbox GL JS with Mapbox Streets
style-selector.htmlChange a map's style
vector-tile-source.htmlAdd 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.
Additional Developer Resources
Was this page helpful?