This sample demonstrates how to create a custom basemap and add it to the Basemap Toggle component in a Scene component. The basemap is a simple container of base and reference layers.
A VectorTileLayer is created from a style URL and added to a new basemap's base property so it can be used as an alternate basemap.
// 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",
});
// get the arcgis-basemap-toggle component
// and set the nextBasemap property to the custom basemap
const toggleElement = document.querySelector("arcgis-basemap-toggle");
toggleElement.nextBasemap = customBasemap;This VectorTileLayer was created using the Vector Tile Style Editor which allows you to interactively design, update, and save custom basemap styles.