Timeline slider pattern

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.

Read More
Share Live Location

Share live location

WHAT Allow other people to track and follow your location. WHY 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 the route, and making sure everything is […]

Read More
Side By Side

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

Read More
Maptip

MapTip

WHAT A MapTip is an informative message that appears when a user hovers the pointer over a feature, surface, or raster image. The purpose of a MapTip is to provide helpful content such as additional attributes, data, or images and therefore give users direct access to attribute information for that feature. WHY The map provides […]

Read More
Blue Dot

Blue dot

WHAT The blue dot pattern allows mobile users to see their current location in a map to understand their surroundings. Blue dot is specific to mobile apps where movement and change in position of the user’s device is expected. Tracking this movement means that the user can focus on their task without expending energy to […]

Read More

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

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

Read More
Chart Marker

Chart marker

WHAT The chart marker pattern uses charts to enrich aggregated data or to visualize a second attribute of clustered data. Adding tiny charts to the map is a powerful visualization technique to communicate additional aspects of the data. WHY It’s easy to symbolize a single observation through color, shape, or size, but as soon as […]

Read More
Theme Toggle

Theme toggle

WHAT The map is overloaded with layers and users struggle to reduce the clutter WHY 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 be considered clutter to the user. Being […]

Read More