Managing UI Layout

The ArcGIS Maps SDK for JavaScript provides a simple and flexible way to manage UI layout using the Views. You can position widgets and web components within your application without relying heavily on custom CSS.

CSS Positioning

CSS is often used for positioning elements. Take the following application for example:

In basic implementations, CSS is often used for positioning widgets:

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;
}

While effective for simple cases, this approach becomes harder to maintain when more widgets are involved or when changes to the widget or view dimensions require updates to the positioning CSS.

View UI layout for widgets

The View UI functionality simplifies positioning by removing the need for custom CSS. Instead of using CSS for layout, widgets can be placed using the view.ui.add() method:

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

This positions widgets automatically in the specified corners. As more widgets are added, the API handles the spacing and layout. See the add() method for more information.

By default, some widgets are available in either a MapView or a SceneView. They are represented as an array of strings, documented in the widget 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"]);

The UI also enables dynamic adjustment of widget positions within your application using the move and remove methods:

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

view.ui.remove(search);

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

Component positioning

Similar to the widgets, you can also manage the layout of components in your application.

Position property

In addition to using the UI API, you can use component's position property to manage UI layout. This property determines where the component will be displayed in relation to the map.

For example, you can position the arcgis-bookmarks component in the top-right corner like this:

1
2
3
<arcgis-map item-id="d5dda743788a4b0688fe48f43ae7beb9">
  <arcgis-bookmarks position="top-right"></arcgis-bookmarks>
</arcgis-map>

The position property accepts the following values: 'top-right', 'top-left', 'bottom-right', and 'bottom-left'. This allows for intuitive and flexible placement of UI components within your map view.

Custom position components

When you need more control over the placement of components, you can use CSS for custom positioning. You can set the position attribute of the component to "manual", which tells the component not to use its default positioning, and then apply custom CSS styles.

1
2
3
4
5
6
7
8
9
10
11
<style>

.esri-basemap-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
}
</style>

<arcgis-basemap-toggle position="manual"></arcgis-basemap-toggle>

The CSS targets the .esri-basemap-toggle class to position the component within the application.

Additional information

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