Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/javascript/latest/view-ui/ below:

Managing UI Layout | Overview | ArcGIS Maps SDK for JavaScript 4.33

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 is often used for positioning elements, for example:

Use dark colors for code blocks Copy

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.

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:

Use dark colors for code blocks Copy

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:

Use dark colors for code blocks Copy

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:

Use dark colors for code blocks Copy

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

view.ui.remove(search);

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

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

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:

Use dark colors for code blocks Copy

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.

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.

Use dark colors for code blocks Copy

1
2
3
4
5
6
7
8
9
10
<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.

• UI class
• DefaultUI class
• View padding

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4