Embedded map

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.

WHY

Maps have become an increasingly common way to visualize data on web pages, and it’s easier than ever for content providers such as newspapers or blogs to use them. Although site providers often don’t have the time, resources, or technology to create their own data and maps, they rely on third-party providers to produce this content and then simply embed it in their pages.

WHEN

In embedded map layouts, the spatial content becomes part of the article or story and supports basic interactions, such as displaying an info pop-up with additional information about a place, the ability to swipe between two data layers, or calculating route directions. A news site may want to show the location of a recent earthquake as part of its reporting, or a food blog may describe native dishes by highlighting their country of origin on a map.

Another popular use that relies heavily on embedded maps is magazine-style layouts that tell immersive digital stories. The location of events, places of interest, or movement along routes or continents are crucial parts of the big picture.

HOW

Different from a reference map, an embedded map is typically larger, often spanning the full width or even full height of a screen and responds to scroll interactions and swipe gestures. These interactions may trigger actions that tie content and the map display together. For instance, as users scroll down the page, a map comes into view, gets locked into place, becomes active, and optionally media is scrolled either in a side panel or on top of the map.

Cartography and map style are important factors that draw users to look at the map so they can instantly understand key elements. These elements are especially important for sites with high brand awareness, so try to match the color scheme and typography of the layers to the theme of the site.

Work around the following pitfalls to avoid gesture ambiguity and a debilitated experience:

  • Unwanted panning behavior can occur when site visitors use their mouse wheel to scroll through the page, so disable the scroll zoom functionality. Other possible solutions include disabling interactivity with the map until the user clicks it or requiring the user to use two fingers or Ctrl + Scroll to zoom. Both approaches are less common and require further instructions.
  • If the map takes up most of the screen, users may not realize that they can scroll the page. Instead, make the map less than the full height of the current viewport and provide cues that scrolling will reveal more content.
  • Embedded content has the habit of breaking responsive layouts because of the fixed dimensions of the parent container. Whenever possible, use techniques to resize containers when the dimensions of the browser window change.

Externally hosted maps are often embedded in the app using containers such as inline frames or the HTML canvas element. The provider of the map constructs this HTML code so that the author of the app can embed the control through simple copy-and-paste code snippets. In these cases, the cartography of the embedded map will often not match the style of the page.

Embedding a live map is not always the best approach and depends greatly on the nature of the app. For simple tasks such as highlighting the location of an address, consider using a static map image or a reference map instead.

EXAMPLE

An ArcGIS® StoryMaps℠ story is a great example of a site that uses embedded map layout. The Secret Life of Bridges looks at the state of America’s unsung infrastructure heroes. As the user scrolls through the story, media content such as images and maps enriches the storyline and provides context. The author of the map created a custom basemap whose background blends into the site’s background, and the color palette of the map matches the accent colors in the paragraphs and tabs.

The story The Secret Life of Bridges uses the embedded map layout to include maps in the app.
The story The Secret Life of Bridges uses the embedded map layout to include maps in the app.

MORE EXAMPLES

UNHCR Storymap
UNHCR StoryMap showing a sidecar interaction as the user scrolls through the app
Erasmus
Erasmus features an embedded map but indicates that there is more content below the fold

References

[1] ArcGIS StoryMaps, https://storymaps.arcgis.com/ (accessible: 11/10/2020)

[2] McCollin, Rachel: Making Embedded Content Work In A Responsive iFrame – https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

Leave a Reply