Have you seen “the story maps” created on the ESRI website (http://storymaps.arcgis.com) or for that matter from http://storymap.knightlab.com/ or http://mapstory.org/. They are all frameworks for you to create “a story” with geographic connections, and they achieve this more or less successfully.
Common for all of the above are that they are services, depending on the on-line framework. This makes it possible to present a more user friendly experience when you create the story, but at the same time you loose some flexibility and you need to be on-line.
My storymap is based on three files:
- storymap.html (main file where all necessary changes can be made)
- storymap.css (style for the story with among other things placements and size of elements)
- storymap.js (this is where the magic happens)
The storymap.html file can be renamed to your liking, but you shouldn’t change the other file names, and you need to keep the three files in the same place (or you need to make some changes to the code).
The first line you may want to change is the window title:
<title>A storymap from geosupportsystem.wordpress.com</title>
The main title of the story, that is always shown on the map can also be changed:
<div id="title">The Story Map Title</div>
If you like you can change the text for the “show previous” button:
The comments on each variable should be enough to help you edit the values to your liking. You don’t have to change anything here (except maybe the location), but these are the fewest possible variables that can make the most visible change to your story. The variables are:
- baseMap – you can select from Open Street Map, most Stamen maps and MapBox maps.
- startCoordinate – The center coordinate in latitude and longitude that the story starts with.
- startZoom – Initial zoom level. During the story the user can change this, but it resets as the story restarts.
- titleOpacity – Set transparency of the main title
- storyOpacity – Set transparency of the area holding the story content
- panTime – How many seconds should it take to pan between places
You can also change color of the title text and background, as well as the story text and background.
Separated from the story you can change the starting content of the story area in the variable “startText”. This can hold more or less any html content, but you need to keep two things in mind for it to work. First, no line breaks. Everything should be on a single line (one variable). Second, don’t use double quotations (“) inside the variables, if you need to, use single quotations (’).
The main story is created by three list variables:
- position – each story center coordinate in latitude and longitude.
- bubbleText – a pop-up text for each location (this can be deactivated or hidden/shown as defalt)
- storyText – the main story content with the same type of content as the starting text above.
In the story area I’ve prepared styles for headlines (use the <h1></h1> tag) and images (<img> tag). If you want to include video from YouTube and adapt to the size of the video to the story area the same way as images do, then you must give the embedded code the class name “videoWrapper” and remove any height and width settings (see the example code in the file).
You can download the three files from GitHub (use this link: https://github.com/klakar/mystorymap/archive/master.zip) or you can explore the files “live” if you follow this link: http://geosupportsystem.altervista.org/mystorymap/storymap.html.
Using MapBox – The storymap is prepared for MapBox maps in the background. But it’s not enough to change the baseMap variable to “mapbox”, you also need to supply the “username.mapid” for the map you wish to use. You do this in the “storymap.js” file on row 50 (may change).
Screen Size – The StoryMap will adapt to different screen sizes, but vertical orientations (smart phones for example) and very small screens may appear hard to read and/or navigate.
[This article is a requested translation and development from one of my previously published articles in Swedish]