This sample demonstrates using Calcite components and the ArcGIS Maps SDK for JavaScript to create a common application layout — a main map or spatial area with overlaying content.
Layouts like this are often used to show contextual information about selected map features, or to provide access to configuration or filtering options — while keeping the map as the focal point of the experience.
Layout considerations
The main content — an arcgis-map — is slotted in the Shell component's default slot.
The overlay in this sample is comprised of a display-mode="float" Shell Panel that houses a Panel containing multiple Blocks.
Configure the width of the Shell Panel with the width property or custom CSS properties to ensure the display is suitable for the use case, and the placement does not conflict with map content. Consider how the content within the overlay should be displayed on different screen sizes, and make adjustments to map properties or display to accommodate the overlay content.