This sample demonstrates using Calcite components and the ArcGIS Maps SDK for JavaScript to create a dashboard-style application layout — with a header, map, and various panels to display information and controls.
Dashboards are commonly used for displaying important data points alongside a map, and providing controls for users to configure the display or information shown.
Often, a map is only one part of the experience, and in some cases may not be present at all. The flexibility of the Shell and other layout components helps support a variety of dashboard-style layouts, with the map as the focal point, or as a supporting element to other content.
Layout considerations
This application demonstrates the display of configuration options and data points alongside a map. The map is the focal point of the application, so the other elements should take only as much room as necessary.
This dashboard display is comprised of a variety of Panels, used to display key metrics, configuration options, and the map. Shell Panels are placed in the Shell's default slot, and CSS grid is used to position the Panels in a way that makes the most of the available space while keeping the map as the focal point.
When resizing the screen, the orientation and order of the Panels change to stack on top of each other to make the most use of the available space.
Responsive behavior
While responsive behaviors are built into many Calcite components, this sample application uses custom CSS to change the orientation of components based on the width of the viewport. For smaller viewports, the "Dashboard options" component is accessible via Navigation's "action" button, and the "Metric Panel 1," "Metric Panel 2," and Map components are stacked vertically. On wider viewports, all components are visible and arranged in such a way that each component has the appropriate amount of space.
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.
The "Dashboard options" component is within a visible Panel on wider viewports. On smaller viewports, the same component is housed with a Sheet, which is out of view by default.