A Versatile Layout for Full-screen Maps

Every Planning Labs web app is made with a mobile-first approach. Typically in responsive design, layouts change depending on screen size — often one column on small screens and multiple columns on screens large enough for content to appear side-by-side. However, full-screen maps can make responsive layout more troublesome.

It’s common for web maps to take up 100% of the width and height of page. That works well if all you have is a map. But what about large areas of content to go along with the map? If your map needs to show detailed info about places (more than fits into a popup), you’ll find this layout approach helpful.

Full-screen Mapping App Layout, with Dismissible Content Area

You can do a lot with five simple components.

I’ve used this versatile layout approach to create mapping applications for zoning & land use, bike share, public safety, idea submission…

1. Site Header
2. Search
3. Map
4. Sidebar (complex map controls, lists of supplementary content, etc…)
5. Content Area (a dismissible pane for displaying large pieces of content)

On small screens, these five components simply stack vertically on top of each other. The Map is set to height: 60vh; which keeps it shorter than the window so that users can scroll the page to access either the Sidebar or Content Area.

On medium screens, the Sidebar appears alongside the map, matching its height and scrolling independently. Search is also positioned at the top of the Sidebar. The entire page still scrolls for access to the Content Area.

On large screens, the app is explicitly sized to the height of the window. The Map, Sidebar, and Content Area are full-height and scroll independently.

Requirements

There are a couple requirements to make sure that the map fills the screen properly on medium and large screens.

Explicit heights

Some elements need explicit heights which are used to calculate the size of full-height components. The Site Header can have a fluid height on small and medium screens, but on large screens, its height is subtracted from the other components so that the whole page totals 100vh.

Similarly, Search can have a fluid height on small screens. On medium and large screens, Search is position:absolute; and its explicit height is used to adjust the height of the Sidebar. When search results are visible, they can push other content further down the page on small screens and overflow the Search container on medium/large screens.

Application state (JavaScript)

When the Content Area is toggled, the .has-content-open class is toggled on the layout. This allows the Map and Sidebar to be full-height on medium screens unless the Content Area is present. Also, since the Map size changes when the Content Area is toggled, this window resize event needs to be triggered so that the map renders in the newly allotted space:

window.dispatchEvent(new Event(‘resize’));

Let’s see the code!

The following CodePen shows how this responsive layout is achieved using the Foundation Sites framework (you could just as easily do this with Bootstrap or your favorite grid system). It’s best viewed with a device on which you can resize your window.