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 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 blocks Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4