View UI

The ArcGIS Maps SDK for JavaScript provides an interface for setting up simple UI layouts. Views provide a UI API that allows placing components (widgets or DOM elements) into corners.

Take the following application for example:

It is common to see the following CSS for positioning:

1
2
3
4
5
6
7
8
9
10
11
12
13
.search,
.logo {
  position: absolute;
  right: 15px;
}

.search {
  top: 15px;
}

.logo {
  bottom: 30px;
}

This works, but can become cumbersome to maintain when having more components or if changes to the widget or view dimensions require the positioning CSS to be updated.

The UI API makes this easier by taking these positioning concerns away from you. The CSS from the previous snippet is not required if using the UI API and would be replaced by the following:

1
2
view.ui.add(search, "top-right");
view.ui.add(logo, "bottom-right");

This places the components in the top and bottom-right corners. More components can be added and the positioning and spacing will be taken care of automatically. See the add() method for more information.

By default, some widget components are available in either a MapView or a SceneView. The default widgets are represented as an array of strings, documented in the components property of the DefaultUI class. The array can be modified to show only the widgets you want to be visible in your application:

1
2
3
view.ui.components = (["attribution", "compass", "zoom"]);

view.ui.components = (["attribution"]);

If component positions need to change dynamically in your application, the UI also allows you to move and remove components:

1
2
3
4
5
view.ui.move(logo, "bottom-left");

view.ui.remove(search);

view.ui.remove([compass, "zoom"]);

Additional information

• UI class
• DefaultUI class
• Simple UI
• View padding