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. StoryMap comes in two variants.
This version of StoryMapJS works with standard web maps. Add a slide for each place in your story--setting the location is as easy as a text search for the name, address, or latitude and longitude. Tell your story in text and easily add rich media -- images, videos, tweets, wikipedia pages, and much more. You can change the visual style of your map with a few presets, or you can use Mapbox to create your own style.
StoryMapJS can also 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.
StoryMapJS is open source and offered under the MIT license.
Get updates, tips and news by email. No Spam.
Have you made a StoryMap? Let us know and maybe we'll feature it here.
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 firstname.lastname@example.org.
Have a question? Look for it in the FAQ below. No luck there? Try the support forum.
Please let us know if you have tried it on others and it works, so that we can add to the list.
First the image must be in the public folder.
To get the image URL change the domain name from the link that dropbox creates.
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.
Be aware that switching back and forth between editing within and outside the authoring tool can get messy, so we suggest using our /advanced/ method to have maximum control over the zoom feature and more.