The map container includes the following components:

• A map (geomap or analytic map)
• Transparent toolbar containing the following buttons:
  • View switch (optional), such as between geomaps and analytic maps
  • Selection menu (optional)
  • Personalization/settings (optional)
  • Full-screen mode
  • Overflow toolbar (generic)
• A list panel stack, which can be used for a legend or other application-specific content
• Navigation tools such as:
  • Measure
  • Scale
  • Zoom in/zoom out, including rectangular zoom
  • Home Button

View switches are optional. They allow the user to switch between different map types, charts, and table layouts. You should consider using a view switch for accessibility reasons. For example, users with visual impairments might have a hard time working with subtle color differences or specific color gradients, and might prefer switching to a table view instead.

We recommend using no more than three types of alternate visualization. The segmented button control is used to display the types of visualization available in the view switch, and highlights the type of visualization that is being currently displayed.

The menu for selection modes enables the user to switch between the available selection modes: single, rectangular, and lasso. The button can be hidden.

A personalization button is provided and can be enabled/disabled by the app developer. The corresponding popover and details need to be implemented by the app developer.

The personalization/settings button can be used to show or hide a legend and labels, for example.

The map container can be viewed on full-screen mode (property: fullScreen). For desktop and tablet, the full-screen button is always placed at the top right of the transparent toolbar.

The user can toggle between embedded and full-screen mode via the maximize full-screen toggle button. In full-screen mode, the map container occupies the entire width and height. The toolbar replaces the page header bar, and the minimize icon appears.

For smartphones, the full-screen button is disabled as the map container is used in full-screen mode by default.

The overflow is activated if there is not enough space on the screen for all the chart bar actions. It is generated automatically.

When the user clicks or taps the overflow button, a popover appears. In this action sheet, all icon buttons are labeled with text.

All buttons go into the overflow from right to left.

You can also prioritize the actions in the toolbar by applying one of five different statuses to them:

• Always overflow: The action will always move into the overflow.
• Disappear: This applies to actions that are not very relevant for the user, and which can disappear if space is limited.
• Low: This applies to actions that the user seldom needs; these actions then move first into the overflow.
• High: These actions remain visible until all actions that are tagged ‘disappear’, ‘low’, or that are untagged, have moved into the overflow.
• Never overflow: These actions will always visible in the toolbar.

All items have equal priority by default. If two items have the same priority, the one on the right overflows first.

Items can overflow together, even if they are in different positions. Elements that belong to a group should not have ‘always overflow’ or ‘never overflow’ statuses as these priorities force the items to remain either in the toolbar or in the overflow area. When group elements have different statuses, the priority of the group is defined by the highest priority of its elements.

The list panel stack is aligned to the left in the toolbar. It can be used for a legend and other application-specific content. The list panel stack can be collapsed in a way that only the icons of the different list panels will be seen. We recommend using icons that are easy to understand for each panel, as these icons will be the only visible element when the panels are collapsed. The collapsed list panels serve as quick access to the clicked panel icon.

If you are not using icons for the panels, do not allow the panels to collapse.

The default width of the list panel stack is auto. We recommend defining a precise width to avoid having the width permanently change according to the content. The list panel stack will remain visible on the map, whereas the toolbar buttons will be hidden.

As a general rule, avoid using too many panels as too much scrolling will increase the complexity of the application.

The list panel provides the same features as the standard list item:

• Grouping
• Select items
• Include Icons/color markers or pictures
• Show counter

The width and height of the map container are defined by the surrounding application layout.

The map container uses the overflow toolbar control. This control is based on the sap.m.Toolbar and provides overflow when the contents do not fit in the visible area.