Full Map

Full Map Layout

What Problem Does This Solve?

Spatial information is the core value of the app.

Why Use This Pattern?

Any app that requires users to perform tasks that are directly related to spatial analytics or geographical location have a high demand for a large map. In these cases users need to see as much geographical context as possible which requires the map to be the focus of the application and large enough to fill the entire page. This is especially true for users that spend long periods of time interacting with the map, like analysist and GIS experts. A Full Map layout therefore helps to maximize the level of detail and minimize the number of external distractions.

When to Use This Pattern

Use Full Map layout when the value to the user is the map itself like performing complex analyses or viewing assets in relation to their current location. Taking over most of the screen real estate helps focus on display and analysis of spatial data in an interactive environment while simultaneously limiting external distractions and interactions.

What’s the Solution?

Provide an interactive map that uses all or most of the screen canvas, usually in the form of a single-page application[1]. Place navigation and interactive tools on top of the map, usually in the corners. Arrange these tools into logical groups and aim to position them in a balanced fashion. Limit the number of tools that float on the map to avoid obstructing important content and to maximize the visible map content.

Adding a title to the map helps people understand the purpose of the map. This can be accomplished by either adding a separate header section (preferred) or by floating text on the map itself. In the latter case, consider adding a drop-shadow or halo effect to ensure enough contrast to the underlying map layers.

Special Considerations

Any element that floats on top of the map obstructs potentially important content, some application especially in the situational awareness realm always require all content to be visible.

Pay extra attention to the cartography, correct and precise data display in Full Map layouts is paramount to the success of the app. Scale-dependent symbology and labeling helps providing the right information at the right scale.

Since advanced mapping capabilities and user interactions are common in this layout type, remember that higher GIS proficiency is generally required to use a map-centric layout and apps geared at that target audience therefore work best.


Full Map
Bay County uses Full Map layout to maximize information display


Single-page application; https://en.wikipedia.org/wiki/Single-page_application (accessible: 11/3/2020)

Leave a Reply