What Problem Does This Solve?
Long or interactive content doesn’t fit into the small space of an Info-Popup or must not obstruct the map.
When to Use This Pattern
Use the Info-Panel when the content to be displayed is long or interactive or requires further interaction with the map that would be difficult with Info-Popups that potentially overlap relevant context on the map.
What’s the Solution?
Provide a panel to the left or the right of the map that serves as the container for the content. Panels should be made closable or collapsible to avoid taking up space when not needed (empty state or unrelated to task).
The Info-Panel is typically triggered through a click/tap on the map, on devices with mice it is a nice way to interrogate content on hover since there is no popup that obstructs the movement of the mouse or constantly changes its location.
Why Use This Pattern?
Info-Panel provides a reserved area of the layout to display content that is long, rich, or interactive. This differentiates from the Info-Popup that typically displays fewer data variables, short descriptions and action buttons.
Info-Panel is especially useful when used to further interact with the map because it doesn’t overlap any part of the map and therefore doesn’t require moving the Info-Popup. This is like a Maptip but without being constrained to a small size.
Consider the empty state of the Info-Panel, i.e. before the user has clicked on a feature to display its content. In this case the panel can either serve as a place to display instructions on how to select something, provide a search, or a list of links sorted by relevance, best, or worst. If no such utilization can be identified it is best to keep the Info-Panel closed by default.
If the Info-Panel is closable, either
- overlap the panel as if it was a docked Info-Popup (preferred), or
- push the content of the map to the side – left or right – without re-centering the extent
Both cases will hide or remove a portion of the map, but it is preferred that the map extent and scale don’t change so that users don’t lose their focus or context. It’s easier to pan the map if something got hidden than following the map content that just moved away.