Intro

The map displays business objects on a map. It can also be used to show points of interest, optimized routing based on business criteria, and other quantitative location-based data.

Usage

Do’s

  • Use the map if you have a location-based dataset where the user needs to access tracking or routing information, monitor business objects, or visualize relationships between business objects.

Don’ts

  • Do not use the map when solely providing a map preview within an application.
  • Do not use the map for non-location-based objects; use a list instead.
  • Do not use the map when the primary goal of a screen is to complete a task, rather than looking at the locations of multiple objects.

Structure

The map consists of a map view, panel, toolbar and add button. The panel may display a list by default, an object detail if an object is selected, or editing controls if the edit mode is active.

A. Map View

The map view displays the user’s current location and annotations.

B. Panel

Panel displays a variety of content types.

C. Toolbar

The toolbar contains the actions that allows users to control the map.

D. “Add” Button

The “add” button allows users to access edit mode where they can add a point or set of points.


Map View

Map view displays all location-based objects such as the user’s location and annotations related to the user. The following annotation types are used in the map view.

A. Current Location

A marker that Indicates the user’s current location. This marker is composed of a blue dot and a radius that occurs at regular intervals.

B. Marker

A marker is used to represent the location of one or more business objects. Use markers to represent jobs, assets, functional locations or workers on the field. If there are many markers on the map, enable clustering to simplify the map interface.

C. Polylines

A polyline is a series of points that represents a linear path. Use polylines to represent linear assets such as roads, gas lines or utility lines. Different polyline types can be identified by their color and stroke treatment.

D. Polygons

A polygon is a series of points and paths that represent an enclosed area. Use polygons to represent areas such as a construction site or maintenance area. Different polygon types can be identified by their color and stroke treatment.


Map Panel

The map panel displays a variety of content such as an object cell list, object detail preview, and edit panel. The following are content types that may be displayed in the panel.


A. List

As the first level of information, the panel should display a list of object cells and filters that allow the user to access that specific object’s detail preview. When designing a list in the panel, follow the content hierarchy defined below:

1) Search – Search narrows down the list resulting in matches that are based on the user’s typed queries. When using the search with the list, use a persistent search on top of the list and make it prominent.

2) Filter Chips – Chips represent values based on time, attribute, and location that filter down the list when selected.

3) Object Cell List – Object cell list presents all objects in a list format and allows users to scroll through and drill-down to an object’s detail page.


B. Object Detail

After selecting an object cell from a list or a marker on the map, an object detail preview will be displayed. The detail page should follow the section hierarchy defined below:

1) Object Header – The object header contains object title, navigation icon as well as optional object name, subheading, tags, and menu icons. The title can accommodate up to 3 lines of text and all other copy would become truncated.

2) Directions Button – Directions button uses Google maps or Esri maps to navigate to an object’s location.

3) Actions Cell – Action cells are used for quick actions that are related to the object and allows users to view details, create object, edit object.


C. Edit

Edit mode allows users to create and control annotations by setting a single point or series of points. The edit mode can be accessed in two ways: tapping the “add” button on the map view, or the “edit” action cell on the object detail preview. The edit mode panel displays controls necessary for the user to add, delete, and reorder points. The edit panel should follow the section hierarchy defined below:

1) App Bar – The app bar contains the “X” icon used to exit the edit mode. The title informs the user that they are in edit mode while the “Save” button allows the user to explicitly save their annotations

2) Choice chip – Use choice chips to represent different types of annotations such as points, polylines, or polygons. Selecting each one will change the type of annotation that the user is applying to the map.

3) Reorder Cell –The reorder cell is a sequence of cells within a list that displays a point’s precise address or location. In order to change a cell’s sequence within a list, drag and drop the cell to the desired position on the list. Cells can be deleted from the list by tapping the “X” icon on the right.



Toolbar

Depending on the user’s needs, the toolbar can be a single action or can be made up of several vertically stacked actions. When in edit mode the toolbar can include up to five actions. By default, the toolbar provides the following four actions:

A. Settings

The “settings” displays a dialog modal with a set of controls. These controls allow users to change the map type, show or hide certain objects on the map, as well as change the units of measurement and the user’s distance.

B. Map Legend

Tapping on the map legend provides detailed information on the symbols and visual elements that appear on the map view.

C. Current Position

Tapping on the current position will readjust the zoom level to show the user’s current location.

D. Zoom Extent

Tapping on the zoom extent readjusts the map zoom level to show all map markers on the screen at once.



“Add” button

The “add” button allows users to create a point or annotation by going into create/edit mode. Tapping on the add button may trigger a menu where the user can select from multiple different object types. If there is only one object type, do not use a menu and simply enable the create/edit mode directly after tapping on the add button.


Behavior & Interactions

The map component has several interactions that help the user navigate through and perform certain tasks.


Map zoom

Pinch-to-zoom allows user to increase or decrease the scale of the map.


Map Pan

Panning or dragging allows the user to move the map up, down, and sideways without changing the scale of the map.


Marker Selection

Selecting annotations such as markers, polylines, polygons, will display that object’s detail preview. A selected marker will double in size from its default size to indicate that the object has been selected. Selected polylines and polygons stroke will double in size to indicate it has been selected.


Marker Clustering

Clustering is a way to control the number of markers by grouping when the user zooms-out and dispersing when the user is zooms-in. Objects that share one single geometry (location) will be displayed as a single marker with the number count. If objects in a cluster are different types, the marker should be set to a neutral color. If objects in a cluster are all the same type, then the marker should reflect the color set for that specific object type.


Panel Dragging

Dragging collapses or expands the panel enabling users to hide or reveal more content. Allow for the top of the panel to be partially visible so that users can expand to half-view. Users can further expand to full-view by dragging up.

Mobile & Tablet

Map Settings

Map settings in tablet is displayed as a modal dialog. On mobile, the settings are displayed as a full-screen dialog.

Map Legend

Map legend in tablet is displayed as a simple dialog anchored to the map toolbar. In phone, the map legend is displayed on the map panel.

Map Panel

The map panel on tablet landscape slides up from the left while in portrait slides up from the bottom. On mobile, the panel slides up from the bottom of the screen.

Specs

Layout

Object Detail
Object Detail
Specifications
Specifications


Map Legend



Actions

Mobile
Mobile
Tablet
Tablet


Reorder Cell

Mobile
Mobile
Tablet
Tablet


Panel

Sample Element Alpha Hex
Background Color #FFFFFF


Toolbar

Sample Element Alpha Hex
Icon #0A6ED1
Background #FFFFFF


Add Button

Sample Element Alpha Hex
Icon #FFFFFF
Background #0A6ED1


Map Legend

Sample Element Alpha Hex
Map Legend Label #32363A
Menu Item Label #32363A
Menu Item 1 #2E4A62
Menu Item 2 #FFA02B
Menu Item 3 #E9573E
Menu Item 4 #00A796


Actions

Sample Element Alpha Hex
Background #FFFFFF
Icon #0A6ED1
Action Label #0A6ED1


Reorder Cell

Sample Element Alpha Hex
Background #FFFFFF
Reorder Cell #F2F2F2
Icons #6A6D70
Address Label #74777A