Introduction to KnightLab StoryMap JS
Last updated
Last updated
StoryMap JS allows presenters to tell a story or present an idea through interactive maps and images. Tutorial created by Emma Grimm, BC Class of 2022.
StoryMap requires that you make an account before starting your own project. This account can be connected to your BC Gmail address.
Go to the Knightlab StoryMap JS home page.
Click on Make a StoryMap
Before you can make a StoryMap, you will be directed to sign into your Google account. By doing this, all of your information will be saved and you can easily edit any of your projects.
Once you have created your account, you will be able to make your first StoryMap or choose from one of your existing projects to edit. If you would like to start a new project, click the button in the bottom right-hand corner.
As you can see, I have two projects already started. Since I am starting a new project, I will press "new" in the corner.
Then, you will have to title your project before you can continue. In my example, I will title my project "Boston," as I will be creating an interactive map that displays different locations in Boston, Massachusetts.
Once you have named your new project, you will be ready to customize your map. Press "create" to start. Below, you can find more information about how to navigate StoryMap and customize your project.
Once you create a new story map, the standard display seen below will appear. It is from here that you will begin to create your story.
By clicking on Options in the top left corner, you can choose the map you would like to use for your presentation. As shown above, you can customize your map by selecting the
StoryMap size
Language
Fonts
Call to Action
The Call to Action is the phrase that will be displayed on your cover slide as a guide for your reader to start viewing. The default Call to Action is "Start Exploring".
Map Type
StoryMap offers some maps for you to use to get started with your project, including a Watercolor Map. By clicking on Map Type, you can choose one of the maps that they have included or you can also upload your own map. Check out this tutorial on importing maps to KnightLab from the David Rumsey collection or our tutorial on using MapWarper to georectify and import your own image.
In my example, I will choose the "Stamen Maps: Watercolor" as the map for my project. The font that I chose for my project was "Clicker & Garamond". I will also define my call to action as "Start Your Tour". All of the other settings I left as the default.
For your cover page, you can choose to either upload an image from your computer or insert a URL address from online. Then, you can insert credit for your image and a caption.
The Cover Page image serves as the cover to introduce your viewer to the topic. This image is not necessarily the same image as your map, but you can choose to use the same image.
In my example, I chose to upload a picture of the skyline of Boston that I had saved to my computer in "Downloads". Then, I gave credit to my source by providing the URL in the designated box. My changes are shown below.
The headline for the first slide will serve as the title for your project. For each subsequent slide, the headline will act as the subtitle for each section of your presentation. You can provide a brief description in the box below the title box to describe your slide and the point on the map that you are describing.
In my example, I chose my headline to be "Tour of Boston". I also provided a brief caption to describe my presentation, which says "Through this presentation, I will show you some of my favorite places in Boston, Massachusetts!". You can view my changes below.
You can customize the color and image that will be displayed in the background of each slide.
In my example, I chose an image of the skyline of Boston as my background image. I chose not to change my background color, though it is an option.
Now that you have finished your Cover Slide, press "Preview" at the top of the screen to view your work and make edits as you see fit.
Notice in my presentation, some of the map that we selected under "Options" is displayed on the left side. Then, on the right side, my background image of the Boston skyline is shown in the back. The street view of Boston is then shown on top as the media image. The title of my presentation is also presented with my caption, as well as my "Call to Action".
On the left hand side of the screen, you can add new slides to your presentation. Just like a PowerPoint or Google Slides presentation, each slide shows the new place on the map that you would like to focus on.
Knight Lab's StoryMap functions similarly to a Google Slides or Powerpoint presentation with its use of slides. This way, you can present your ideas and stories in an organized manner.
Once you establish what map you will be choosing, on each slide you can decide where you want the map to focus on by typing in a location or coordinate from that map, or by placing the marker over the area you want to focus on.
In my example below, I searched for "Boston" on the map and it gave me locations throughout the world. You can also choose more specific locations or terms, such as "Boston College".
For each slide, you can customize the background and media, just like with your Cover Slide. Additionally, you can choose to customize the Marker.
On each slide, you can choose an image URL or upload a file from your computer to act as the marker for the areas you have designated on the map. The default marker is a red tag.
On the cover slide, it will show which areas of your map have been selected by displaying your marker, such as the one in the image below.
In my project, I chose to customize my marker to the location I was describing in the slide. As you can see below, I chose to talk about Faneuil Hall Marketplace as my first destination in Boston and I chose the marker that displayed the market.
Once you have selected multiple places on the map, the locations will appear connected by a red dotted line. This way, you can display how your story will travel through the different locations. See how my locations connect down below.
You can switch between the editing view or preview by clicking on the tabs at the top of the screen. By doing this, you can see the progress that you have made on your StoryMap, and view your project from the reader’s perspective.
The preview of my presentation displays each slide. The viewer of your presentation can click the arrow on each slide to move through your presentation.
When you have finished your project, make sure to save and share! When you click on share in the upper right hand corner, it will provide a link which you can copy and send through email, text, or other platforms of social media. You can also provide a description and featured image that will be viewed first when clicking on the link.
Check out the published project!
Questions? Contact the Digital Scholarship Team in O'Neill library (digitalscholarship@bc.edu)!
