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.

Use dark colors for code blocksCopy
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.