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 WebTileLayer is created from a third-party cached service 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
13
14
15
16
17
18
19
20
21
22
23
24
25
// Create a WebTileLayer with a third-party cached service
const mapBaseLayer = new WebTileLayer({
urlTemplate: "https://stamen-tiles-{subDomain}.a.ssl.fastly.net/terrain/{level}/{col}/{row}.png",
subDomains: ["a", "b", "c", "d"],
copyright:
'Map tiles by <a href="http://stamen.com/">Stamen Design</a>, ' +
'under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. ' +
'Data by <a href="http://openstreetmap.org/">OpenStreetMap</a>, ' +
'under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
});
// Create a Basemap with the WebTileLayer. The thumbnailUrl will be used for
// the image in the BasemapToggle widget.
const stamen = new Basemap({
baseLayers: [mapBaseLayer],
title: "Terrain",
id: "terrain",
thumbnailUrl: "https://stamen-tiles.a.ssl.fastly.net/terrain/10/177/409.png"
});
// Add the custom basemap to the map
const map = new Map({
basemap: stamen,
ground: "world-elevation"
});