This sample uses Calcite to create an application layout for viewing and editing map bookmarks. The bookmarks remain available alongside the map as the application adapts to different screen sizes.
Using layout components such as Shell, Panel, and Action Bar, offer a configuration experience with access to map tools and bookmarks.
Layout considerations
The map is the focal point of this application. A nested Shell places the map inside the main Panel, with a Shell Panel for bookmarks and a separate configuration Panel alongside the preview.
Application behavior
In this sample application, users can add, edit, filter, and reorder bookmarks using the ArcGIS Bookmarks component. At wider sizes, bookmarks appear in a docked Shell Panel and can be undocked into a draggable Dialog.
The configuration Panel in the parent Shell's panel-start slot contains example controls and an associated set of Actions. A Split Button provides Publish and supplementary commands above the map.
Adaptive behavior
Adaptive design refers to making decisions as to when and how to adjust content at different viewport sizes.
-
At smaller viewport sizes, the configuration Shell Panel changes from a
displayofMode "dock"to"overlay"and collapses. Its Actions can toggle the configuration Panel. -
When the application layout becomes compact, bookmarks move from the Shell Panel or Dialog into a Sheet. A Floating Action Button opens the Sheet when it is closed. An open bookmarks overlay remains open when switching between Sheet and Dialog.
-
The Publish Split Button hides its text in compact layouts while keeping the command available.
-
At smaller viewport sizes, the Navigation Logo
descriptionand Navigation Userfull-nameare hidden.
Accessibility
The application ensures that all interactive elements are keyboard accessible and that focus is managed appropriately when Panels, Dialogs, and Sheets are opened or closed. Focus is shifted to the newly opened overlay or returned to the triggering element when the overlay is closed.
Implementation details
This sample relies on CSS and JavaScript to create an adaptive experience. A single ResizeObserver monitors the outer Shell width to adjust component properties, move content, and set conditional styles. Both breakpoints use this stable width so docking the configuration Panel does not reverse the bookmarks layout. CSS is used to hide and show elements and to adjust the styling of components based on classes assigned with JavaScript.