Custom Basemap

This sample demonstrates how to create a custom basemap and add it to the BasemapToggle widget in a SceneView. The basemap is a simple container of baseLayers and reference layers.

A VectorTileLayer is created from a style URL and added to a new basemap's baseLayers property so it can be used as an alternate basemap.

1
2
3
4
5
6
7
8
9
10
11
12
// Create a VectorTileLayer from a style URL
const mapBaseLayer = new VectorTileLayer({
  url: "https://arcgis.com/sharing/rest/content/items/b5676525747f499687f12746441101ef/resources/styles/root.json"
});
// Create a Basemap with the VectorTileLayer. The thumbnailUrl will be used for
// the image in the BasemapToggle widget.
const customBasemap = new Basemap({
  baseLayers: [mapBaseLayer],
  title: "Terrain",
  id: "terrain",
  thumbnailUrl: "https://arcgis.com/sharing/rest/content/items/b5676525747f499687f12746441101ef/info/thumbnail/ago_downloaded.png"
});

This VectorTileLayer was created using the Vector Tile Style Editor which allows you to interactively design, update, and save custom basemap styles.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close