IconMenu

The IconMenu offers an icon-button based menu to open various functionality as cards. This way, obstructive UI can be hidden until the user desires to open it. Please use carefully – users may have issues finding process-relevant buttons/interactions if you hide them here.
Currently, the IconMenu should only be rendered with layoutTag set to NineLayoutTag.TOP_RIGHT.

Scope

It is meant for additional information/functionality (legend, other layers) or power users in non-public clients.

Please note that the average user has never seen the client before and just wants to get done with it, not learn a map client.

Configuration

iconMenu

⚠️ This plugin can't be configured with the mapConfiguration, but is configured during client construction. Currently, no way exists to add plugins to it after the build took place.

For details on the displayComponent attribute, refer to the Global Plugin Parameters section of @polar/core.

fieldName	type	description
layoutTag	enum['TOP_LEFT','TOP_MIDDLE','TOP_RIGHT','MIDDLE_LEFT','MIDDLE_MIDDLE','MIDDLE_RIGHT','BOTTOM_LEFT','BOTTOM_MIDDLE','BOTTOM_RIGHT']	Defines where the icon menu is rendered. Only use `NineLayoutTag.TOP_RIGHT` here for the time being.
menus	menuEntry[]	Defines which plugins should be rendered as part of the icon menu.
buttonComponent	VueConstructor?	Allows overriding the IconMenuButton.vue component for custom design and functionality. Coding knowledge is required to use this feature, as any implementation will have to rely upon the VueX store model and has to implement the same props as the default IconMenuButton.vue. Please refer to the implementation.
initiallyOpen	string?	Id of the plugin which should be open on start; only applicable if the device doesn't have a small display.

Use the configuration during client build.

Example Configuration:

{
  initiallyOpen: 'layerChooser',
  displayComponent: true,
  menus: [
    {
      plugin: PolarPluginLayerChooser({}),
      icon: 'fa-layer-group',
      id: 'layerChooser',
    },
    {
      plugin: PolarPluginDraw({}),
      icon: 'fa-pencil',
      id: 'draw',
      hint: 'Draw or write something on the map'
    },
  ],
  layoutTag: NineLayoutTag.TOP_RIGHT,
}

iconMenu.menuEntry

fieldName	type	description
id	string	Id of the plugin, used to resolve hint locale.
plugin	PolarPlugin	The plugin that should be part of the icon menu.
hint	string?	Overrides the default hint displayed for the icon menu button.
icon	string?	Icon for icon menu button. If given, render a button with the icon. When clicked, open the content of the configured plugin. If not given, render the plugin content as is inside the IconMenu. Current examples for the usage without icon include Zoom and Fullscreen.

Example Configuration:

{
  menus: [
    {
      plugin: PolarPluginLayerChooser({}),
      icon: 'fa-layer-group',
      id: 'layerChooser',
    },
    {
      plugin: PolarPluginDraw({}),
      icon: 'fa-pencil',
      id: 'draw',
      hint: 'Draw or write something on the map'
    },
  ],
}

Modes

When landscape mode is active the IconMenu is oriented horizontally. Currently, the IconMenu works fine only if there is not more than one row of Icons in landscape mode.

Locales

Locale Key	German default	English default
plugins.iconMenu.mobileCloseButton	{{plugin}} schließen	Close {{plugin}}
plugins.iconMenu.hints.attributions	Quellennachweis	Attributions
plugins.iconMenu.hints.draw	Zeichenwerkzeuge	Draw tools
plugins.iconMenu.hints.filter	Filter	Filter
plugins.iconMenu.hints.layerChooser	Kartenauswahl	Choose map
plugins.iconMenu.hints.gfi	Objektliste	Feature list