Create a custom basemap

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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
  var 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.
var 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
var map = new Map({
  basemap: stamen,
  ground: "world-elevation"
});