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.

// Create a BasemapGallery widget instance and set
// its container to a div element

var 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
// Use an Esri icon font to represent the content inside
// of the Expand widget

var bgExpand = new Expand({
  view: view,
  content: basemapGallery.domNode,
  expandIconClass: "esri-icon-basemap"
});

// Add the expand instance to the ui

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