StoryMapJS

Maps that tell stories.

Make a storymap now

Introducing StoryMapJS

StoryMapJS is a free tool to help you tell stories on the web that highlight the locations of a series of events. It is a new tool, yet stable in our development environment, and it has a friendly authoring tool. It has two significant, related features:

Gigapixel

StoryMapJS can tell stories with large photographs, works of art, historic maps, and other image files. Because it works best with pixel-dense files, we call these "gigapixel" StoryMaps. Learn more.

SnapMap

SnapMap is a tool to help you quickly create a StoryMap. It places your 20 most recent geo-tagged Instagrams on a map that can be shared instantly. You can also edit it in StoryMap's authoring tool, adding media from other sources.

We welcome feedback and bug reports: you can use our support forum to post questions, or email support@knightlab.zendesk.com.

StoryMapJS is open source and offered under the MIT license.

Sign up for updates

Get updates, tips and news by email. No Spam.

Stay connected with us on twitter

Examples

Have you made a StoryMap? Let us know and maybe we'll feature it here.

StoryMap

Gigapixel

Game of Thrones: Arya's Journey

Hieronymus Bosch: Garden of Earthly Delights

Help

As we learn what questions people have, we'll adapt this part of the page into a list of frequently asked questions and answers. Until then, you can post to our support forum or email us at support@knightlab.zendesk.com.

Have a question? Look for it in the FAQ below. No luck there? Try the support forum.

  • Custom sites
  • Wordpress
  • Squarespace
  • Wix

Please let us know if you have tried it on others and it works, so that we can add to the list.

If you receive the message: "This Google Account does not support public Google Drive sharing. Please sign in with a different Google account."

The message should only appear for people using private Google Apps accounts. If you are using a private Google Apps account, do you have administrative control over the private Apps domain?

You need to enable "allow users to publish documents on the web." This would, of course, allow users to publish any documents, so you'd have to choose whether that's acceptable, or whether you just want people to use public Google Drive for this.

First the image must be in the public folder.

To get the image URL change the domain name from the link that dropbox creates.

Incorrect: https://www.dropbox.com/s/38053034/GOT%20Storymap%20images/jon-weirwood-tree.jpg

Correct: https://dl.dropboxusercontent.com/u/38053034/GOT%20Storymap%20images/jon-weirwood-tree.jpg

To disable connecting lines on maps, use the StoryMap option: "Treat as Image" (as opposed to the default, "Treat as Cartography")

You can add a parameter to the URL that is the value of the iframe src attribute, 'start_at_slide'.

Its value should be a number from 0 to one less than the total number of slides in the storymap.

For example: http://s3.amazonaws.com/cdn.knightlab.com/libs/storymapjs/latest/embed/index.html?url=https://ab502fd19d893baee8e6e03e90fbd145f0c62c68.googledrive.com/host/0B1d8oNIpMx53anVuVUFOTXlOVXc/published.json&start_at_slide=5

This should load "Descent of the Divine: Panel 2"

Choose "options" from the top left of the StoryMap window, then from the "map type" menu choose the type you like.

Select "Mapbox" to enter the ID of your Mapbox map.

Select "custom" to enter the URL for a tile server. If the server supports multiple subdomains, enter them as a single string in the Subdomain field (e.g. subdomains "a", "b", and "c" should be entered as "abc").

To keep it simple for most users, we've made some assumptions in the authoring tool which may not universally apply. For example, the first screen is always an "overview" slide. Also, the zoom is affected by the overall size of the map and the relationship between the current and previous points on the map.

It's possible to download the configuration (a JSON file) that the authoring tool makes and edit the JSON yourself. You could then change the first slide to not be an "overview" and manually set a starting lat/lon/zoom.

If that isn't too daunting, you can find the JSON on your Google Drive in the "KnightLabStoryMap/public" folder. Be sure to make a copy when you edit it. We've tried to make the authoring tool gentle so that it doesn't fool around with stuff that might be edited outside of it (although that's not a formal feature) -- but I kind of think that the "overview" setting for the first slide might be something which would get messed up going back and forth between using our authoring tool and editing it outside.

A little more about going outside the authoring tool can be found at /advanced/