Learn how to display a map with a basemap layer using Mapbox GL JS.
You can display a map in Mapbox GL JS by using a vector tile basemap layer from the basemap layer services. A vector tile basemap layer is a Mapbox GL style containing a source, layers, font glyphs, and icons to render the layers.
In this tutorial, you display a map of the Santa Monica Mountains using the streets basemap layer from the Basemap layer service.
This tutorial is the starting point for the other Mapbox tutorials.
Prerequisites
You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.
Steps
Create a new pen
Go to CodePen to create a new pen for your mapping application.
Add HTML
Define an HTML page to create a map that is the full width and height of the browser window.
In CodePen > HTML, add HTML and CSS to create a page with a div element called map.
The HTML will create a page with a map that is the full width and height. The map div is the element used to display the map. The CSS resets any browser settings so the map can consume the full width and height of the browser.
<!DOCTYPE html><html><head><metacharset="utf-8" /><metaname="viewport"content="initial-scale=1, maximum-scale=1, user-scalable=no" /><title>Mapbox GL JS Tutorials: Display a map</title><style>html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style><scriptsrc="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script><linkhref="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css"rel="stylesheet" /></head><body><divid="map"></div><script>const apiKey = "YOUR-API-KEY";
const basemapEnum = "ArcGIS:Streets";
const map = new mapboxgl.Map({
container: "map", // the id of the div element style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
zoom: 12, // starting zoom center: [-118.805, 34.027] // starting location [longitude, latitude] });
</script></body></html>
Reference the API
In the <head> tag, add references to the Mapbox GL JS CSS and JS library.
Add line.Add line.
<!DOCTYPE html><html><head><metacharset="utf-8" /><metaname="viewport"content="initial-scale=1, maximum-scale=1, user-scalable=no" /><title>Mapbox GL JS Tutorials: Display a map</title><style>html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style><scriptsrc="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script><linkhref="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css"rel="stylesheet" /></head><body><divid="map"></div><script>const apiKey = "YOUR-API-KEY";
const basemapEnum = "ArcGIS:Streets";
const map = new mapboxgl.Map({
container: "map", // the id of the div element style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
zoom: 12, // starting zoom center: [-118.805, 34.027] // starting location [longitude, latitude] });
</script></body></html>
Go to your dashboard to get your API key. You will use it in the next step.
Create a map
Use a Map to add a map to your div with the basemap you specify.
The Map class uses the map HTML element to display the contents of the map and to provide a user interface to interact with. It supports clicking, zooming, panning, rotating, and tilting the perspective of the map. It also allows you to interact with and discover information about the map data such as finding features where the mouse is clicked. You can also use it to modify the data displayed, by adding new sources or changing layer properties.
Add a <script>...</script> section at the end of the <body>...</body> section.
Add line.Add line.Add line.
<!DOCTYPE html><html><head><metacharset="utf-8" /><metaname="viewport"content="initial-scale=1, maximum-scale=1, user-scalable=no" /><title>Mapbox GL JS Tutorials: Display a map</title><style>html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style><scriptsrc="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script><linkhref="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css"rel="stylesheet" /></head><body><divid="map"></div><script>const apiKey = "YOUR-API-KEY";
const basemapEnum = "ArcGIS:Streets";
const map = new mapboxgl.Map({
container: "map", // the id of the div element style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
zoom: 12, // starting zoom center: [-118.805, 34.027] // starting location [longitude, latitude] });
</script></body></html>
Create an apiKey variable to store your API key. Replace YOUR-API-KEY with the API key you previously copied from the developer dashboard. You will need to include this in the URL of each ArcGIS service you are accessing. You do not need to set mapboxgl.accessToken. Create a basemapEnum variable to store the basemap identifier, ArcGIS:Streets.
Add line.Add line.
<!DOCTYPE html><html><head><metacharset="utf-8" /><metaname="viewport"content="initial-scale=1, maximum-scale=1, user-scalable=no" /><title>Mapbox GL JS Tutorials: Display a map</title><style>html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style><scriptsrc="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script><linkhref="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css"rel="stylesheet" /></head><body><divid="map"></div><script>const apiKey = "YOUR-API-KEY";
const basemapEnum = "ArcGIS:Streets";
const map = new mapboxgl.Map({
container: "map", // the id of the div element style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
zoom: 12, // starting zoom center: [-118.805, 34.027] // starting location [longitude, latitude] });
</script></body></html>
Create a Map with options to control its display and behavior. Set the container property to the map id of the div you created. The style property references the location of the basemap layer service and contains the basemap identifier and your API key.
