The location list pattern consists of a list of locations, often referred to as sites, and is visualized by markers on a map. A key, like a legend, establishes a relationship between locations on the list and in the map.
Both elements, the list and the map, have their strengths and limitations, respectively. Map markers show the location of an object in relation to other geographic features. Providing spatial context is their main strength but they are limited to displaying only one or two attributes through color and size. One way to solve this limitation is to add labels, but this contributes to undesired clutter in the map. Lists, on the other hand, are great for displaying and manipulating tabular data but lack the spatial context. Displaying the list side by side with the map and providing a key that relates the two eliminates many of these shortcomings. Users can use either component to explore the sites and interact with the locations.
Location list is a pattern commonly seen in consumer apps that allow users to search for places such as hotels, restaurants, or stores. It’s an integral piece of any locator app. The store locator is a specific and widely used variant of the locator app.
Analysts, managers, and operators are used to working with spreadsheets. Location list helps them sort, filter, and parse through rows of tabular data while simultaneously identifying objects or clusters of objects on the map.
Location list works best for apps with few sites and where the distance from the user’s location is of high importance, such as a store locator. Provide a list and a map in which the list component can be either superposed to the map for full map layouts or juxtaposed for partial map layouts. Establish a relationship between the list item and the marker by using a unique key, such as a number or alphanumeric character, for each item. Use data brushing that lets users interact with a data item in one view while the corresponding item in another view lights up simultaneously. In the case of the location list, hovering over a data row in the list will highlight the marker, and vice versa. If the corresponding item isn’t visible in the current view, nothing will be highlighted.
The list component often follows the appearance of a multicolumn, tabular grid, but simpler, single-column layouts are possible and often visually more pleasing. Regardless of the design, content should include one or more of the following elements:
- Attribute values: Names, links, addresses
- Status indicators that are often related to workflows: Pending, assigned, open, closed, rejected
- Metrics or indicators that support the user in planning: Acres burned, wildfire percentage contained, miles to the user’s current location
- Actions: Zoom to the item, view item details, edit attributes
The following common interaction patterns are related to the location list and can be found throughout the book:
- Extent-driven content: Answers the question whether changing the map extent should modify the results shown in the list
- List and details: Explains the intricacies of interacting with a list item, viewing and manipulating complex data
- Store locator: Describes a use case that is widely used in retail applications
- Spatial filter: Illustrates how filtering by geography will affect the map and the list
- Feature selection: Creates a collection of features to be displayed
The Geospatial Insurance Consortium (GIC) Virtual Inspection Studio app shows insurance claims that require review by a virtual adjuster. The claims are shown as a list in a panel on the left side and by using round markers on the map on the right. Data brushing establishes a visual relationship between the two so that hovering over a claim will add a gray background to the list item and a blue circle around the marker on the map. Each list item indicates the claim status, the owner name, claim ID, property value, and actions to see details or delete the claim. An example of the claim details view can be seen in the focus on the subject pattern. The app makes smart use of extent-driven content, in which a check box labeled Visible On Map allows users to opt out of the default behavior to show only claims that are currently visible in the map.