UI

// Setting a single number to this property
ui.padding = 0;
// is the same as setting it on all properties of the object
ui.padding = { top: 0, left: 0, right: 0, bottom: 0 };

let toggle = new BasemapToggle({
  view: view,
  nextBasemap: "hybrid"
});
// Adds an instance of BasemapToggle widget to the
// top right of the view's container.
view.ui.add(toggle, "top-right");

// Adds multiple widgets to the top right of the view
view.ui.add([ compass, toggle ], "top-leading");

// Adds multiple components of different types to the bottom left of the view
view.ui.add([ searchWidget, "infoDiv" ], "bottom-left");

// Adds multiple components of various types to different view positions
view.ui.add([
  {
    component: compassWidget,
    position: "top-left",
    index: 0
  }, {
    component: "infoDiv",
    position: "bottom-trailing"
  }, {
    component: searchWidget,
    position: "top-right",
    index: 0
  }, {
    component: legendWidgetDomNode,
    position: "top-right",
    index: 1
  }
]);

// Removes all of the elements in the top-left of the view's container
// including the default widgets zoom and compass (if working in SceneView)
view.ui.empty("top-left");

let compassWidget = new Compass({
  view: view,
  id: "myCompassWidget" // set an id to get the widget with find
});

// Add the Compass widget to the top left corner of the view
view.ui.add(compassWidget, "top-left");

// Find the Widget with the specified ID
let compassWidgetFind = view.ui.find("myCompassWidget"))

// Display the number of components added to MapView by default.
const view = new MapView({
  map,
  container: "viewDiv",
  zoom: 4,
  center: [-100, 35]
});
await view.when();
const components = view.ui.getComponents();
console.log(`There are ${components.length} components added to MapView.`); // There are 4 components added to MapView.

// Display the label of the first manually placed widget in SceneView.
const view = new SceneView({
  map,
  container: "viewDiv",
  zoom: 4,
  center: [-100, 35]
});
await view.when();
console.log("Widget label is: ${view.ui.getComponents("manual")[0].label}.`); // Widget label is: Attribution.

// Display how many components (i.e. widgets or HTMLElements) are placed in the top-left corner of the View.
const view = new MapView({
  map,
  container: "viewDiv",
  zoom: 4,
  center: [-100, 35]
});
await view.when();
const components = view.ui.getComponents("top-left");
console.log(`There is/are ${components.length} component(s) located in MapView's top-left corner.`);
// There is/are 1 component(s) located in MapView's top-left corner.

// Moves the BasemapToggle widget from the view if added.
// See the example for add() for more context
view.ui.move(toggle, "bottom-leading");

// Moves the default zoom widget to the bottom left corner of the view's container
view.ui.move("zoom", "bottom-left");

// Moves multiple widgets to the bottom right of the view's UI
view.ui.move([ compass, toggle, "zoom" ], "bottom-right");

// Moves the legend to the topmost position in the top-right corner of the view's UI.
view.ui.move({component: legend, position: "top-right", index: 0});

view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
});

// Removes the BasemapToggle widget from the view if added.
// See the example for add() for more context
view.ui.remove(toggle);

// Removes the default zoom widget from the view's container
view.ui.remove("zoom");

// Removes multiple widgets from the view's UI
view.ui.remove([ compass, toggle, "zoom" ]);