Archived version of the User Experience Toolkit for Insights Hub and Industrial IoT website, version 2.8.1

# Map

##### Use a map to display a geographic map based on OpenStreetMap..

## Usage

### When to use

Use a map in the following cases:

- Use a map to find a place.
- Use a map to locate an object, e.g. an asset.
- Use a map to get directions.

### General construction

A map consists of the following elements:

1. Zoom function, 2. Reset to initial view, 3. Marker, 4. Map

### Custom markers

Map markers can be customized with custom markers:

Custom marker examples

### Behavior

#### Zoom in - Zoom out

The Zoom control displays "+" and "-" buttons for adjusting the zoom level of a map.

#### Panning

Panning lets users navigate within a view while keeping the current zoom level, to display content that does not fit within the viewport.

#### Reset to initial view

This control is only present if the view state changed (zoom level changed, viewport changed due to panning or e.g. browser resize).

The 'reset to initial view' control navigates the user back to where he/she started: viewport and zoom level.

## Map component

Please note: The map component(s) will not work in the archive/offline version of the User Experience Toolkit website due to map key restrictions.

### Simple map

### Map with custom marker

### Documentation

Detailed information can be found at the Web Components documentation.

Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top