Expand widget


This sample demonstrates how to add a BasemapGallery widget instance to the Expand widget. The Expand widget is helpful for hiding UI elements that otherwise block portions of the view. Click the icon representing the BasemapGallery to view the content inside the Expand widget (in this case the BasemapGallery widget). You can collapse the content by clicking the collapse icon.

When creating an Expand widget instance, you must set the view referenced by the widget and the content to a DOM node. The content in this sample is the DOM node containing the BasemapGallery widget instance.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Create a BasemapGallery widget instance and set
// its container to a div element

const basemapGallery = new BasemapGallery({
  view: view,
  container: document.createElement("div")
});

// Create an Expand instance and set the content
// property to the DOM node of the basemap gallery widget

const bgExpand = new Expand({
  view: view,
  content: basemapGallery
});

// Add the expand instance to the ui

view.ui.add(bgExpand, "top-right");

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

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close