Learn how to add a styled vector basemap layer to a map.
A basemap layer provides the visual context for a map. You can use the default basemap layer styles provided by the basemap layer service or you can create your own custom styles with the ArcGIS Vector Tile Style Editor for specific mapping applications.
In this tutorial you use Mapbox GL JS to display a styled vector basemap layer in a map.
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.
//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]});
Add the vector tile layer
You can access a basemap layer by referencing its item ID. You can find a layer's item ID by accessing it in ArcGIS Online or the ArcGIS Vector Tile Style Editor.