Map UI Patterns

Timeline slider

The timeline slider pattern uses the slider to control the features that correspond to a certain time span. Timeline slider reduces the amount of data to display by showing only the data within that time span.

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 […]

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 […]

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 […]

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

Landing Page

WHAT The landing page is your opportunity to create a great first impression and helps set the tone of the app. It also provides a place for users to input their location so the app can start at an extent that is meaningful and focused. WHY For years, builders have chosen to show a map […]

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 […]

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 […]

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 […]