What Problem Does This Solve?
Users need to see more detailed content of features displayed on the map.
Why Use This Pattern?
Markers and lists both have their unique advantages and disadvantages. Markers are meant to show the location of an object but are limited to displaying one or two fields through color or size. Adding labels may be an option but quick to clutter the map. Lists are great for displaying and manipulating tabular data but as such lack the spatial component.
Displaying the list side-by-side with the map and visually relating the two fills that gap. Users can use either control to identify their relevant content and interact with it.
When to Use This Pattern
Marker List is very common in consumer apps that allow users to search for locations like hotels, restaurants, or stores. The latter case is so widely used that it warranted its own pattern, the Store Locator.
Enterprise applications utilize Marker List so that users gain access to their data through alternatives paths. Analysts, managers, and operators are used to working with spreadsheets and benefit greatly from sorting, filtering and sifting through rows of data content. Being able to identify objects or clusters of objects on the map is a powerful alternative workflow.
What’s the Solution?
The list can be either superposed to the map for Full Map layouts or juxtaposed for Partial Map layouts. Oftentimes the list mimics a tabular grid, but complex row layouts are possible and visually more pleasing.
Contents of the list are
- Marker fields like names, links, or addresses
- Status indicators, often related to steps in a workflow, e.g. pending, assigned, rejected
- Metrics or indicators that support the users in deciding, e.g. acres burnt, wildfire percent contained, miles to user’s current location
- Actions for
- zooming to the item
- viewing its details
- editing the fields of the item
Zooming will zoom the map to the area of the marker plus some margin so that users can identify the object and orient themselves. The exact margin depends on the type of feature, the user task and the scale, e.g. zooming to a parcel boundary to identify details of the property may not have any margin while zooming to a traffic incident will benefit from seeing its surrounding infrastructure and emergency facilities.
Items in the Marker List should have a visual relation to the markers on the map. This can be established by
- hovering a row will highlight the marker and vice versa. If either pendant is not currently in view nothing will be highlighted and no further action – e.g. automatic pan to – is necessary.
- Establishing a key like alphanumerical characters that is part of the marker as well as the list row. This is a common practice for marker lists that display few objects and where the relation is of high importance, e.g. in a Store Locator
The following patterns help to further explain interactions that commonly occur when having a Marker List:
- Extent-driven Content: answers the question whether changing the map extent should modify the results shown in the list.
- List & Details: explains the intricacies of viewing and manipulating complex data.
- Store Locator: describes a use case that is widely used on retail applications.
- Spatial Filter: illustrates how filtering by geography will affect the map and the list.
- Feature Selection: compiling a collection of features