• Home
  • UI Design & Patterns
  • Patterns
  • Map

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:

map control elements

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

Custom markers

Map markers can be customized with custom markers:

custom markers on a map

Custom marker examples

Behavior

Zoom in - Zoom out

Map zoom controls

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

Panning

Panning functionality of a map

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).

Reset map to initial view

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