This sample demonstrates how to display a BasemapGallery component to allow users to switch between different basemaps.
By default, the BasemapGallery will display a list of basemaps from arcgis.com
.
In an arcgis-map component, only 2D basemaps will be shown.
A 3D arcgis-scene component 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 Portal
.
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.
const customBasemap = new Basemap({
portalItem: {
id: "46a87c20f09e4fc48fa3c38081e0cae6"
}
})
document.querySelector("arcgis-basemap-gallery").source = new LocalBasemapsSource({
basemaps: [Basemap.fromId("topo-vector"), Basemap.fromId("hybrid"), customBasemap]
});