map – Map UI Patterns

Choropleth map

WHAT Visualize how a measurement varies across a geographic area. WHY 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 Choropleth maps are important to support analysis across pre-defined geographic area, e.g. an election map divided by electoral […]

Why Map UI Patterns?

This site provides a language for planning and building map applications. It discusses principles, components of varying complexity, and features that all together inform design decisions for your next project. The elements of this language are entities called user interface (UI) patterns. Each pattern describes a solution to an observed and recurring problem. It explains […]

No map

WHAT The no map pattern does not use a map. It is used when the task doesn’t require a map but still uses the full power of geographic information systems (GIS) in other ways, such as through charts or a dashboard. WHY Of all the UI components, dynamic maps fall into the category of “difficult […]

Mobile map

WHAT Maps on mobile devices are often difficult to manipulate by touch and result in unexpected behavior. WHY Maps are difficult to navigate on touch devices and require special attention to the input capabilities of the users, sometimes referred to as the fat finger syndrome. Data visualizations and interactions created for desktop devices cannot be […]

Embedded map

WHAT In the embedded map pattern, the app requires an interactive map to perform a simple task, and the map is embedded as part of the page flow. Embedded map layouts are commonly used on multipage sites such as company websites, news sites, blogs, and magazines. They highlight locations, relationships between objects, or statistical data. […]

Reference map

WHAT In the reference map pattern, a small map is generally placed next to the other layout components. The map serves as an additional or auxiliary view and is mainly used for contextual purposes. WHY Geography is important for understanding everyday things. How is an object spatially related to another object or landmarks such as […]

Partial map

WHAT In the partial map layout, panels for workflow or content are side by side with the map. Map and content are equally important, and the app is often workflow driven. WHY As outlined in the task-oriented pattern, having clear and well-defined workflows is important for aligning content and features with the goals of users. […]

Full map

WHAT In the full map layout, the map is the focus of the app and large enough to fill the entire screen. The core value of the app is spatial information. WHY Spatial analysis allows people to get insights and discover relationships in geospatial data. The way this rich data is visualized directly impacts how […]