Custom Basemap

Explore in the sandboxView live

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.

// Create a WebTileLayer with a third-party cached service
const mapBaseLayer = new WebTileLayer({
  urlTemplate: "https://stamen-tiles-{subDomain}{level}/{col}/{row}.png",
  subDomains: ["a", "b", "c", "d"],
    'Map tiles by <a href="">Stamen Design</a>, ' +
    'under <a href="">CC BY 3.0</a>. ' +
    'Data by <a href="">OpenStreetMap</a>, ' +
    'under <a href="">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: ""

// Add the custom basemap to the map
const map = new Map({
  basemap: stamen,
  ground: "world-elevation"