This sample demonstrates using Calcite components and the ArcGIS Maps SDK for JavaScript to create an application layout suitable for a gallery display or informative map presentation. The map is the focal point of the experience, and supplemental details or information are presented alongside it.
Built using layout components such as Shell and Sheet, this sample illustrates an experience within which users can browse, interact with, and view supplemental information about a gallery item or map display.
Application behavior
In this sample application, the map display is the primary focus of the application. Actions related to the map are presented alongside, and informational details are displayed in a Panel adjacent to the map.
Adaptive behavior
Adaptive design refers to making decisions as to when and how to adjust content at different viewport sizes. This often involves moving content to different slots, changing component properties, or even hiding content altogether. In this sample, a combination of CSS and JavaScript adjustments to component properties create an adaptive experience:
-
Hide the Chip used to show the comment count. The existing Action
indicatorproperty is sufficient to indicate there have been comments. Alternatively, the app could remove the Chip text and keep the comment count, if it is important to the application's use case. -
Move content from a CSS grid-positioned Panel to a contextual Sheet component within the nested Shell's
"sheets"slot. This Sheet is invocable by a user via an Action that is conditionally rendered at smaller viewport sizes.
Implementation details
This application uses CSS to hide the comment detail Chip and support a simple grid layout, alongside JavaScript to detect and react to viewport size changes.
For instance, hiding and displaying two separate components — Panel and Sheet — that contain the same content. In a framework-based application, consider dynamically rendering the content based on application state.