DH Toolkit : StoryMapJS

The user does not have to have a strong degree of technical literacy to make a StoryMap as the standard interface and optional modifications to your slides are very straight forward. For those with some degree of html, you can also add more complicated formatting options to each slide. There is an option to run in advance mode if you want maximum control over your StoryMap, however for an entry level user experience use the standard authoring tool.

In order to begin your StoryMap you must select “Create New StoryMap”. Give it a name and you will be brought to the main StoryMapJS authoring tool.

Authoring Tool Layout

Authoring Tool

  1. Options for general map settings including type of basemap/layer
  2. Editing view
  3. Preview option allows you to preview your slide / StoryMap progress. This section will appear on the left column in your display.
  4. Basemap view where you will select your points and locations.
  5. Slide options allow you to control background images and colours and the degree of opacity associated with it for the right column in your display.
  6. Media panel controls type of media that will appear on top of your right slide column.
  • Insert media links and URLs, or upload from own desktop
  • Media Credit
  • Caption your media content
  1. Title of slide.
  2. Information panel. You can also insert additional media in this section if you are familiar with html. This information panel also has some basic formatting options (bold, italics, inserting links) and also a html view.
  3. Help and FAQ available here.
  4. Sharing your StoryMap using embedding/link options. Here you can also assign particular preview images and text descriptions to improve the visibility of your StoryMap.

Your title slide is used to give a basic introduction or explanation of the project. From here you will select what type of project or map types. Here you can decide to run your StoryMap as Classic or Gigapixel.


StoryMap styles and basemaps.

You will notice that there is no map visible on your title slide. The map will be applied in your next slide after you assign your first point. Once your StoryMap is complete the main title slide will show an overall view of the research area taking in all your predefined points.

StoryMap Basics


Classic layout utilises a set of standard basemaps from OSM to terrain models, that appear on every slide. You can assign points relating to your area of research manually or you can assign them using the search bar provided. Enrich the user experience by adding additional media content such as, videos, sound bites and text. Custom maps can be added to the Classic layout by utilising the “Mapbox” option.


This project types uses a single image as a basemap for your project. It functions much in the same way as Classic as you will assign points and add content. . If you are having problems with the standard basemaps or mapbox, this is a very easy way to create a StoryMap using a siple image. You may also wish to use a particular map as a scanned image and assign your points in Gigapixel however it will not be spatially located. The extents of the image will also be limited by the image extents. In order to utilise the Gigapixel style you will need an image URL.


The Mapbox extension is a GIS tool that you can use to create your own distribution map that can be assigned to your background. The StoryMap “Options” tab gives you a relatively simple collection of basemaps to use however they may not suit your research objectives.


Sample of StoryMap basemaps shows inconsistencies in site presentation

In my case a number of the basemaps at the site of Lough Hyne in West Cork, show the site as a lake feature that is not connected to the sea. On the OSM base-map you see the presence of what is known as “The Rapids” through which the lake enters into the sea making it a melting pot of marine ecology. Some basemaps will be missing little details like these so be prepared if you are looking for site specific presentations and consider using a predesigned and georeferenced map. Failing this, if you have a high quality scanned map you can use that in Gigapixel mode.

Storybord your StoryMap

If my career with tech has taught me anything at this stage it is to have a backup of your data in as many places as possible. This is no exception. I have a long history of launching into a program or new technology without reading manuals or designing my projects in advance. I like the process to be organic and when I hit a bump in the road, I pull up a manual or a YouTube video. You make more mistakes this way for sure, but it wouldn’t be much of a tutorial is I did not have any mistakes to correct. If you can write all of your cells in advance and assign images and links where necessary, do this (as I type this I am all of a sudden reminded that I am typing this freehand). This will mean that if you lose any data along the way or if, like in my case, the StoryMap glitches and you cannot retrieve it, you have not lost that much time and you can replicate your process effectively. That is after-all, the point of the dreaded “methodology”.


Fullmetal Alchemist key animation cuts

File Formats (.txt and .docx )

So what file formats should you use for your StoryMap? Does it matter? The answer is  ambiguous and it relates to some of your predefined formatting options. Of course. What you copy in Microsoft Word also replicates in your StoryMap so you in essence are copying over the html with the text. It is however limited and the results inconsistent. I found that when copying into the standard information box (not the html view), italicised and bold text will copy across but none of the font variations such as the colour or size will. Generally speaking, it will also bring in your line spacing.

If you paste your text into the html view, these features will not show up in standard view or preview mode. Consider your approach to this if you are formatting things within the text and opt for basics. If you do choose Word, be sure to watch your spacing as it will take up more of your StoryMap slide and may result in poor aesthetics.

Notepad files do not have any of the options to italicise etc. so you are pulling in a very basic piece of text with the only real formatting being the paragraph breaks (assigned in StoryMap as <div> however it will also read the standard <br>).  This means of course that no line-spacing elements are brought in as you can see below.


Line spacing in notepad (L) and Word (R).

To Mark-Up or Not?

Where do I even start. This is a yes and no answer (sort of). As StoryMap allows you to apply html tags to your information and control how your StoryMap is viewed one would think it would be a great example of foresight to mark-up text before pasting it into your information window. It is, but not (generally) in this instance. The results are always inconsistent.

As we have seen above notepad can be used to bring in simple plain text information with no line spacing attributes or text attributes such as bold or italics. In theory it is a good starting point in that respect for assigning tags and formatting prior to pasting into your document. This did not translate into fact. Having marked up a piece of prose from Patrick Kavanagh’s “The Great Hunger” I quickly ran into some frustrating results. In the first instance StoryMap would not assign the formatting options in the standard information box, and once it went to preview you are greeted with an empty slide. Return to edit mode and there is nothing there as it automatically deletes your entry.

I ran this test using http://www.w3schools.ie to ensure it was not in fact my rudimentary skills that were causing the problem and had the same result with the tags verified. A similar problem occurred in Microsoft Word. Thinking it might be down to placing the text directly into the html view first, I pasted a piece of text directly to the html view in StoryMap with no html tags and the text loaded during preview mode without any trouble.

I repeated the process again and removed some html elements such as <text colour=”?”> or <p align=”?”> and low and behold, this problem did not occur from .txt or .docx file extensions. So it would appear that simple commands such as <strong></strong> and <br> can be marked up but anything else can crash delete the text in preview mode. Ultimately as we have seen above the simple formatting options can be brought in when copied from Word so there is nothing useful in this.

I say above the results of these errors are inconsistent also because in some instances where other more complicated tags were included, the text appeared in preview mode with the tags simply being deleted by the html viewer. It would appear that any clever thought about pre-formatting my text with tags was short-lived.

download (1)

This all started of course because I had some issues when trying to format a piece of poetry so expect some painful html if you, like me, prefer to justify your text, and you, like me, are shit at html. I decried the fact that StoryMap had not installed a simple alignment tool when transcribing a local poem for a research project…..in a very adult kind of way. I resolved to leave the poem as it was citing loyalty to its original (albeit typed) form. Yeah. I went there.

Coming Full Circle

One thing that I found very frustrating about the tool related to the edit features so be sure to have your content backed up. In the first instance I found that if you had to go back and edit any content in your StoryMap, the html would also be deleted. This was quite frustrating as it meant that you had to re-type your formatting selections. One way around this of course is to have your storymap finalized with your html tags selected before pasting into the document however this is not very useful if you have to edit at a later date with newer content. Copying and pasting content was also an issue as it was haphazard at times in where it placed the text and would sometimes delete pieces of text at random. This was particularly the case where I wanted to copy in html tags or embedding links. Another reason to keep that storyboard in mind.


All that being said, it is in fact a great tool to have in your tool kit. While it offers a very (I feel) linear exploration of a concept or task, it is aesthetically pleasing and allows some user engagement and editing which I like. There are some short-cuts I think it could benefit from implementing but as is, I intend to use it in the future. It offers a very basic user friendly template and you can build on this with some basic html tags (sobs into pillow). Hopefully some of this has helped you in avoiding certain things or in designing your strategy for creating your StoryMap. This tool goes a very long way in creating a beautiful presentation of results so enjoy it.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s