explore – Map UI Patterns

Side by side

WHAT Visually inspect and compare two scenarios spatially, temporally or quantitatively. WHY Comparing spatial-temporal data is a common analytical task to detect changes over time or identify patterns between variables. Providing two synchronized maps helps to see differences at a glance without the need to constantly swipe or toggle. WHEN The main advantage of Side-by-Side […]

Visited marker

WHAT The visited marker pattern uses markers symbolized to show users which marker has already been visited, helping them avoid revisiting the same info pop-up repeatedly. WHY A pattern that has been around since the early days of HTML is to change the color of hyperlinks that have been visited previously. This is considered a […]

Search this area

WHAT The search this area pattern allows the user to search various points of an area, giving the user control over when to update features in the map. Search this area avoids updating features in the map until the user instructs the app to do so. It can avoid confusion and frustration for the user. […]

Small multiples

WHAT Comparing changes, patterns or differences in data is difficult to impossible with interactive controls on a single map view. WHY Small Multiples is sometimes also called trellis maps or tile maps. It is a series of similar maps using the same size and scale, allowing them to be easily compared. Our brain is great […]

Sparkmaps

WHAT It’s not always feasible to show a full-blown map or even only an image of a map as a figure on the side. Needed is to show the spatial information right where it is needed and without being taken out of the context. WHY Any geographic feature (=piece of information that has location information) […]

Swipe

WHAT Interactively reveal content by peeling back a layer to see the content underneath it. This method provides a temporary view of the data without the specified layer. WHY It is often useful to see how certain layers overlay other layers for the purpose of comparison. This comparison is important to make decisions based on visual cues. […]

Buffer

WHAT Analyze an area surrounding an object or point of interest. WHY It is difficult and sometimes even misleading to rely on visual analysis on the map to identify relevant features. Calculating distances and buffers are standard GIS tools and using the generated buffer polygon can be used to further intersect and analyze other layers. […]

Nearby

WHAT Show objects that are in close proximity to your current location or a place of interest. WHY Users have a deep interest to know what is happening around them. Showing them the location of nearby objects has therefore immediate impact on decisions they may want to take, e.g. if a friend is nearby they may want […]