Updated: September 25, 2018

Map

Intro

The map floorplan 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.

With the map floorplan, users can:

  • Quickly access geospatial and business data from the field.
  • Search for business objects.
  • See an overview of business objects and their locations.
  • Quickly access previews of business objects.
  • Get directions to business objects from their current location.
  • Show and hide different map view and feature layers.

Usage

Dos

  • Use the map floorplan 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 floorplan when solely providing a map preview within an application.
  • Do not use the map floorplan for non-location-based objects; use the list report floorplan instead.
  • Do not use the map floorplan when the primary goal of a screen is to complete a task, rather than looking at the locations of multiple objects.

Structure

A. Map Search

Search is an optional component found on the top-left corner of the map.

There are two types of Search panels: one with a list of business objects displayed, and one with only the Search bar. When using the Search panel with the list, the items should be presented as object cells, and the list can be filtered. Please refer to the object cell and filter guidelines for more details.

B1. Map Settings

Map settings appears as a modal window when the user taps on the information icon.

The content that appears within the settings modal depends on each app’s specific needs. Some examples for settings are Map View Options, Feature Layers Options, Near Me Radius and Map Unit Measure.

B2. Current Position

Current position displays the user’s current location when s/he taps the button while the device’s GPS setting is turned on. The user’s current location is highlighted on the map. There are two states of the current position icon: on and off.

B3. Show/Hide Panels

Tapping this button will move all panels (including the search box) off the screen. Tapping the button again will return the panels to their previous positions.

B4. Map Legend

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

B5. Zoom Extents

This resets the map zoom to a level where all currently-available markers appear on the screen at once.

C. Map Markers

Map markers typically represent either single or multiple business object(s) on a map. They can be represented by points, polylines, or polygons.

Types

Points are used to represent one or more business objects at a specific location. Point markers can be shown with icons, images, numbers, and letters to give additional information about the business object.

Polylines can represent linear assets, such as pipelines or water-distribution networks.

Polygons are used to represent areas, such as functional locations or regional boundaries.

 

 

 

 

 

Clustering

Objects that are close together will cluster together or apart depending on the zoom level of the map. As the user zooms out, markers will merge into a single marker with a number count displaying how many objects are located with in the cluster. As the user zooms in, the marker will break apart into the individual objects. 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.

Users can select a cluster marker by tapping it and a list panel showing each object within the cluster should be displayed. Selecting one of the objects from the list will open the detail panel for that object.

D. Detail Panel

When a user selects a map marker, either a point, polyline or polygon, a detail panel will come in to reveal additional information.

This panel will display information about the selected business object such as general details, navigation information, analytics, quick actions, and so on. This panel is constructed in a modularized fashion, so the specific combination of content types will vary across applications.

When designing the detail panel, please follow the section hierarchy defined below:

D1. Title (Mandatory)

Include the object’s name with an optional subtitle. Use tint color for the title when it’s possible to drill down further to see more details about the object.

D2. Additional Information

Use this section to display additional information about the object. Short strings of text, status icons, and system-generated tags may be used.

D3. Directions Button

A directions button with or without the address may be used.

D4. Actions Cell

Use this section to display quick actions related to the object.

Compact & Regular

The map floorplan is supported in both compact and regular widths, but the display of certain components will differ.

Example 1 – Map settings in compact is a full screen modal. In regular, settings is a modal window.

Example 2 – Map legend in compact is displayed at the bottom of the screen. When in landscape mode, the legend is anchored in the top left of the screen. In regular view, it always appears as a pop-over anchored to the floating toolbar.

Example 3 – The detail panel in compact slides up from the bottom of the screen. In regular, the detail panel slides in from the left and floats along the left side of the screen.

Edit Mode

From the map view, edit mode can be initiated two ways depending on if you are creating a new object or editing an existing object. The transition to edit mode will happen in place and preserve any filters and/or settings that have been set. 

 

Edit Existing Object

When editing an existing object, edit mode will be triggered from the action cell in the detail panel of the selected object. In edit mode, the selected object (point, polyline or polygon) will be displayed and can be edited as needed. Once the object’s new geometry is saved, the user will return to the previous map view.

Edit: Create New Object

When creating a new object, the edit mode is initiated from the ‘Add’ icon in the navigation bar. The user will be able to choose from a list what type of object they want to create. Point, polyline and polygon are supported. The transition to edit mode will happen in place and preserve any filters and/or settings that have been set. 

Once in edit mode, the user can tap on the locations where they want a point, or series of points, to be placed. Point locations can be changed with a tap and drag gesture, or via the address fields in the edit panel. After the object is created and saved, the user will return to the map view from where they started.

 

Note: The images shown represent the target design. For the first release, the edit panel implementation will look slightly different.