BasemapGallery widget

This sample demonstrates how to display a BasemapGallery widget to allow users to switch between different basemaps.

By default, the BasemapGallery will display a list of basemaps from In a 2D MapView, only 2D basemaps will be shown. A 3D SceneView will also include 3D basemaps, which are distinguishable with a '3D' tag. If you have a portalUrl defined, then the BasemapGallery will display a list of basemaps defined in your Portal.

To update the list of basemaps displayed, set the source property of the BasemapGallery. This can either point to a different portal source, or a local list of basemaps. See Basemaps with different projections for an example defining a PortalBasemapsSource.

To create a custom list of basemaps from local sources, source should be set to an array of basemaps representing LocalBasemapsSource. This can include basemaps created by referencing their PortalItem, or from a well known basemap ID, as shown in the following code snippet.

Use dark colors for code blocksCopy
const customBasemap = new Basemap({
  portalItem: {
    id: "46a87c20f09e4fc48fa3c38081e0cae6"
const basemapGallery = new BasemapGallery({
   view: view,
   source: [Basemap.fromId("topo-vector"), Basemap.fromId("hybrid"), customBasemap] // autocasts to LocalBasemapsSource

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.