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 UI Patterns & Atomic Design
Map UI Patterns & Atomic Design

Map patterns (Navigating the MapOrienting Yourself, Visualizing Data, and Views) and Content patterns (Interacting with Content, Exploring Spatial Content, Dealing with Complex Data, and Input & Output) are the basic building blocks (the atoms and molecules) of the UI Pattern library, they describe how users interact with the map and deal with spatial content.

Workflow patterns are more complex sections (organisms) that can be found in map applications.

Layout patterns are the skeletons of the page, one can think of them as templates or blueprints.

Above all are General UX patterns that are overarching principles guiding the overall design of the pages of an application.


As a designer one may approach the library top-down, starting from the UX principles and layouts, even applying special workflows to specific end-user needs. Designers working on wireframes need to see the big picture first and foremost, think holistically in the right problem to solve and let layout patterns guide their conceptual design. Only later they start caring for the details of map and content.

As a developer one is probably more interested to build components that are atoms or molecules, i.e. starting from the bottom and understanding the purpose of a Home Button for instance and the considerations on their development.


Next: Tutorials

Leave a Reply