Share Live Location
Special Workflows

Share Live Location

What Problem Does This Solve? Allow other people to track and follow your location. Why Use This Pattern? As people and things move around and change their location, the need to keep track of their exact place in near real-time is important to make appropriate decisions like estimating time of arrival, intercepting or meeting along […]

Read More
Side By Side
Exploring Spatial Content

Side-by-Side

What Problem Does This Solve? Visually inspect and compare two scenarios spatially, temporally or quantitatively. Why Use This Pattern? 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 […]

Read More
Maptip
Interacting with Content

Maptip

What Problem Does This Solve? Helpful content is missing on the map. Why Use This Pattern? A Maptip is an informative message that appears when a user hovers a feature, surface, or raster image. Its purpose is to provide helpful content such as additional attributes, data, or images and therefore giving users direct access to […]

Read More
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