Map Navigation

Guidelines

Guidelines

Map navigation is a combination of infrastructural components that form a layout structure to present map-like content (geographical maps, P&I diagrams or other plans). It is supported by a collapsible context panel and an overlay can temporarily present additional information. Map navigation does not offer all features the basic navigation offers.
The new application component released February 2024 is even more flexible, has a modular approach and introduces new features. Hence, we highly recommend using the new application frame.

1. App header: Included in the context pane
2. Navigation menu
3. Context pane: Hosts additional information and elements to control the map content
4. Map content: Shows map-like content, P&I diagrams or other plans
5. Context pane icon: Expands and collapses the context pane
6. Overlay: Shows detailed information of selected objects

Application header

The application header (1) hosts the brand logo and the application name. As this space is limited, we recommend short application names without further information. The application header is placed inside the context panel which means it appears and disappears with the context pane.

Behavior

Map navigation does not adapt to breakpoints and should only be used on large screens (desktop size). The navigation menu provides a control at the bottom (5) to expand and collapse the context pane. The overlay’s (6) background appears semi-transparent with background blur to emphasize the overlay character.

Dos and Don’ts

• Don't use map navigation for typical main-detail use cases, instead use application frame
• Don't use map navigation if you want to support mobile use cases

Development

Development

Examples

Basic

PreviewAngularReactVueJavaScript

Custom overlay

PreviewAngularReactVueJavaScript

API (ix-map-navigation)

Properties

Name

Description and specifications

applicationName

Application name

Attribute:

application-name

Type:

string ｜ undefined

hideContextMenu

Hide the sidebar context menu button when set to true

Attribute:

hide-context-menu

Type:

boolean

Default:

true

navigationTitle

Navigation title

Attribute:

navigation-title

Type:

string ｜ undefined

Events

Name

Description and specifications

contextMenuClick

Context menu clicked

Detail:

void

navigationToggled

Navigation toggled

Detail:

boolean

API (ix-map-navigation-overlay)

Properties

Name

Description and specifications

color

Deprecated

since 2.1.0. Use `icon-color`

Color of icon

Attribute:

color

Type:

string ｜ undefined

icon

Icon of overlay

Attribute:

icon

Type:

string ｜ undefined

iconColor

Color of icon

Attribute:

icon-color

Type:

string ｜ undefined

name

Title of overlay

Attribute:

name

Type:

string ｜ undefined

Events

Name

Description and specifications

closeClick

Event closed

Detail:

any