Location- and time-based storytelling: Interactive maps with embedded photo, video and texts

I tested three free map tools to create custom maps that show multiple dimensions of a story: where (location), when (time), what (photos, videos, articles). The three tools are Meograph, StoryMap JS and Google Maps Engine Lite; the test and the reviews may help people choose the right tool to produce location- and time-based interactive stories.

The test project: Obama 2012 campaign stops in Ohio

Assume I’m a digital editor and I want to create an interactive map showing 10 stops Obama made during his campaign in Ohio. For each stop (location), I have some photos, videos and articles that I want to attach to that location on the map.

The 10 stops are selected from a data visualization by Washington Post, Presidential Campaign Stops: Who’s Going Where? That visualization shows the stops on a custom map, without embedded photos, videos or other contents. With some Google searches, I collected photos, videos and articles for each stop, and compiled the photo and video links, along with the location and dates, into an Excel spreadsheet.

The map tools: Meograph, Google Maps Engine, StoryMap JS

Other than photo, video and articles, a location- and time-based story needs a map to show locations and a timeline to show dates. The three map tools in this review, all launched in 2013, can give us what we need.

These map tools are all web-based and free to use. Since it’s web-based, users don’t need to download or install anything onto their computer; all they need to do is to create a free account, log in and start working on the easy-to-follow workspace. No programming skills are needed. The finished stories (maps) can be embedded in another story or be shared via social media networks.

Two of the tools, Meograph and StoryMap JS, are created specifically for location- and time-based storytelling, whereas the other tool, Google Maps Engine Lite, is a general purpose mapping tool.

The review: Pros and cons of each map tool

The three maps are embedded below; each comes with a brief description of how it works, as well as a discussion of its pros and cons.

Google Maps Engine Lite

How it works: the 10 locations are grouped in a list which functions as a timeline; mouse over a list item and the corresponding placemark (if visible on the map) will show a halo; mouse over a placemark on the map, the corresponding list item will be highlighted; click either the list item or the placemark, an information window will appear.

The pros: can insert multiple photos or videos in one placemark – for instance, I added a gallery of three photos to the Cleveland stop; has a larger, standalone version that can be viewed separately (I’ll explain later why this is a pro)

The cons: cannot edit HTML of the information window – I cannot add links that point to selected articles or other web resources; Firefox browser may have video playback issues


How it works: Functions like a video story, click playback button to start/pause/resume the story; each location has one photo or one video, with the corresponding placemark shows on the map (left) and the date on the timeline (underneath); a link points to a related online article; click on right or left arrow on the timeline to jump to next/previous date.

The pros: can specify which portion of a Youtube video be embedded and played back; can add an audio narration track to accompany each photo

The cons: minimal interactivity – other than jumping to next/previous dates, user cannot interact with the map; online workspace may be sluggish and slow in response

StoryMap JS

How it works: click left or right arrow on the timeline, map moves/zooms to the corresponding placemark; click placemark on the map, timeline jumps to the corresponding slide; more control options such as map overview, jump to beginning, hide the map

The pros: can edit HTML such as adding links to external articles or formatting the texts; can embed media assets such as audio, Storify curation

The cons: still in beta and may have browser compatibility issues – some slides may overlap, or video may block the right arrow; the default embedding codes has a height of 800 px, which means some visitors need to scroll up and down to view the story; the larger, standalone version is not a standard feature, you have to dig into the default embedding codes to carve out the web link, such as the one for the embed below.

Additional observations and thoughts

When we examine the three embedded maps in this post, the actual maps are either blocked by placemark list and information window, or are minimized to give way for larger content areas; then what’s the point for having a map element in the first place?

If you would agree with me – the embedded stories in this post are cluttered and don’t offer an optimal reading/viewing experience; an alternative is to embed an image of the map and link it to an external, larger version. That’s why I said earlier that a larger, standalone version is a desirable pro.

An issue with the default zoom-in feature of StoryMap JS – at times, other than showing the name of the location, zooming in on that small embedded map does not tell much about “where this is.” When we examine a location on a regular map, we are not just interested in that location itself, we also want to see the “context,” i.e., in reference to the area and/or surrounding locations.

About the animation that shows a line moving from point A to point B – I feel it’s more of a visual teaser than a functional element that adds to the narrative depth of the story.

A final note: to embed your own photos and videos, you can upload photos to Flickr and videos to Youtube; both are free web hosting services. You may want to read about how to grab Flickr and Youtube links in a previous post for how to embed photo andvideo in Google map.

Want to learn more about digital storytelling? Check out these popular books at Amazon:

Related posts:

About Mu Lin

Dr. Mu Lin is a digital journalism professional and educator in New Jersey, United States. Dr. Lin manages an online marketing company. He also manages MulinBlog Online J-School (www.mulinblog.com/mooc), a free online journalism training program, which offers courses such as Audio Slideshow Storytelling; Introduction to Social Media Marketing; Writing for the Web; Google Mapping for Communicators; Introduction to Data Visualization; Introduction to Web Metrics and Google Analytics.
This entry was posted in Digital tools and tips. Bookmark the permalink.

8 Responses to Location- and time-based storytelling: Interactive maps with embedded photo, video and texts

  1. Pingback: Location- and time-based storytelling: Interact...

  2. Pingback: A.R. Beckert – Creative Writing Tools: Maps

Leave a Reply