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 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:
mapbox.config.API_URL
instead of mapbox.baseApiUrl
for Mapbox GL JS v0.52 and earlier.- Update
mapboxgl.accessToken
with your Atlas public access token. - Set
mapboxgl.baseApiUrl = '<your-atlas-url>';
within your application. - Add the line
Object.defineProperty(mapboxgl.config, 'API_URL_REGEX', { value: new RegExp(mapboxgl.baseApiUrl) });
within your application. - 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
-
Install and launch your local Atlas instance by following the Atlas installation instructions.
-
Log into your Mapbox Studio account and use the bundled Studio to create a new style. Copy the map style's ID.
-
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
-
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"
-
Add
xmlns:mapbox="http://schemas.android.com/apk/res-auto"
to the top-level parentViewGroup
of the XML file that you've adjusted in step #4 above. -
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.
-
Create a new class that extends your app's
Application
class and then override itsonCreate()
method. -
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.
-
-
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 |
- 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. - Save the file (HTML only) and open it in your text editor. Replace
http://localhost:2999
with your Atlas URL. Replace the value ofmapboxgl.accessToken
with your Atlas public access token (available at your Atlas instance's URL). - Open the edited file in your browser.