Blue Dot
Navigating the Map

Blue Dot

What Problem Does This Solve? Mobile users need to see their current location on a map to understand their surroundings. Why Use This Pattern? People that navigate indoor and outdoor spaces rely on their location to make decisions on features around them. From their point of view the world gravitates around them, they are the […]

Read More
Tutorials

Tutorials & Videos

UI/UX Best Practices for Designing Amazing Web Apps 2020 Esri Developer Summit Tech Session, Palm Springs, CA (USA) This video shows Map UI Patterns applied to practical, real-world examples. Patterns described are: Empty State Task Oriented Layout Patterns Visualizing Data Patterns Dealing with complex Data Patterns

Read More
Landing Page
General UX

Landing Page

What Problem Does This Solve? Introduce the user to the application and gather first inputs to optimize the map experience Why Use This Pattern? For years map application developers have chosen (intentionally or not) to start the application with the map at the smallest possible scale, i.e. the initial map extent shows the complete extent […]

Read More
Chart Marker
Dealing with complex Data

Chart Marker

What Problem Does This Solve? Clustering is limited to counts of features without the ability to visualize a second dimension within the data Why Use This Pattern? A common technique to avoid showing too many points on the map is clustering them into bubbles with numbers inside. This mechanism is effective to illustrate the amount […]

Read More
Theme Toggle
Dealing with complex Data

Theme Toggle

What Problem Does This Solve? The map is overloaded with layers and users struggle to reduce the clutter Why Use This Pattern? Interactive maps are collections of layers and each layer that is turned on adds to visual information to the map and if any one of those layers isn’t required or desired it can […]

Read More
Visited Marker
Interacting with Content

Visited Marker

What Problem Does This Solve? Help users to avoid revisiting the same popup repeatedly Why Use This Pattern? A pattern that has been around since the early days of HTML is to show links that have been visited preciously in a different color. This is considered a usability best practice to help users recall which […]

Read More
Search this Area
Exploring Spatial Content

Search this Area

What Problem Does This Solve? Avoid updating features on the map until user has explicitly opted in to do so Why Use This Pattern? Any time a user pans or zooms the map the extent changes and therefore the visible features on the map will change also. Sometimes this behavior is expected but in other […]

Read More
Kitchen Sink
General UX

Kitchen Sink

What Problem Does This Solve? Showcase all conceivable functions and data in one page. Why Use This Pattern? The Kitchen Sink approach, sometimes also referred to as Swiss Army Knife app or data portal, is useful for demo applications which showcase all (or almost all) of the features and is a great way to introduce […]

Read More
Choropleth Map
Visualizing Data

Choropleth Map

What Problem Does This Solve? Visualize how a measurement varies across a geographic area. Why Use This Pattern? Choropleth maps provide an easy way to visualize how a measurement varies across a geographic area or show the level of variability within a region. When to Use This Pattern Choropleth maps are important to support analysis […]

Read More
Introduction

Getting Started

The best way to introduce you to the Map UI Pattern library is by relating it to Atomic Design, which many of you are probably familiar with, and which is the basis of most Design Systems. Map patterns (Navigating the Map,  Orienting Yourself, Visualizing Data, and Views) and Content patterns (Interacting with Content, Exploring Spatial […]

Read More