LogoLogo
  • About DS Learn
  • Tutorials
    • ¶ Digital Exhibits
      • Getting Started with Digital Exhibits
        • Considerations
        • Basic Steps
          • Site Organization
          • Usability & Accessibility
        • Platforms
    • ¶ Digital Storytelling
      • Introduction to ArcGIS StoryMaps
        • Getting Started
        • Using Content Blocks
        • Importing Maps from David Rumsey
      • Introduction to KnightLab StoryMap JS
      • TimelineJS
    • ¶ 3D Modeling & Immersive Technology
      • Adding 3D Models in Omeka
      • Intro to Photo Processing with Agisoft Metashape for 3D Model Making
      • Tips and Tricks for Taking Photos for 3D Model Creation
      • An Introduction to Apple's Reality Composer AR
      • Importing SketchFab Models into AR for the iPad or iPhone
      • Creating Basic 3D Objects for AR in Blender
      • Introduction to Meshlab
    • ¶ Data Visualization
      • Introduction to Tableau
        • Download and Install Tableau
        • Using Tableau to Visualize COVID-19 Data
        • Tableau DH
        • Resources
      • Beyond Simple Chart in Tableau
        • Beyond Simple chart Examples
      • Google Colab
        • Get Started
        • Data Import
        • Data Wangling
        • Visualization
        • Results Export
      • Out of Box Data Visualization Tools
        • How to use Google Data Studio with Google Sheets
        • Google Data Studio Interface
        • Creating Visualizations in Google Data Studio
    • ¶ Mapping
      • Tiling High-Resolution Images for Knightlab StoryMapJS
      • Hosting and Displaying Zoomable Images on Your Webpage
      • Georectifying Historical Maps using MapWarper
      • Making a Starter Map using Leaflet
    • ¶ REST API
      • How does REST API work?
      • JSON File
      • Get Started with Google Sheets Script Editor
      • Example 1: Extract Data by One Cell
      • Example 2: Extract Data by A Cell Range
    • ¶ Text Analysis
      • Introduction to Text Analysis
        • Step 1: Exercise One
        • Step 2: What is Text Analysis?
        • Step 3: Important Considerations
        • Step 4: Why Voyant and Lexos?
        • Step 5: Exercise Two
      • Text Repositories
      • Text Analysis in JSTOR
        • Overview of Constellate
        • Build A Dataset
        • Create A Stopwords List
        • Word Frequency
  • Digital Scholarship Incubator
    • Schedule
    • Getting Started
    • People
    • Project Guidelines
    • Topics
      • 3D Modeling and Immersive Technologies
        • Part 1: 3D Photogrammetry & Laser Scanning
          • Exercise: Experiment with 3D creation tools
        • Part 2: An Introduction to Apple's Reality Composer AR
          • Exercise: Experiment with Apple RealityComposer AR
      • Anatomy of a DS Project
        • Parts of a DS Project
        • Some DS Project Examples
        • Exercise: Evaluating a DS Project
      • Pedagogy
      • Data and Data Visualization
        • Introduction to Data
        • Introduction to Data Visualization
        • Introduction to Tableau
          • Download and Install Tableau
        • Introduction to Network Visualization
      • Digital Exhibits
        • Exercise 1: Exploring Exhibits
        • Exercise 2: Exhibit.so
      • DS Intro & Methodologies
      • User Experience
        • Usability Exercise
      • Mapping and GIS
        • An Introduction to Mapping, GIS and Vector Data
          • Workshop: Exploring and Creating Vector Data
          • Quick Review: Spatial Data
        • An Introduction to Raster Data and Georeferencing Historical Maps
          • Workshop: Finding and Georeferencing an Historical Map
          • Tutorial: Georectifying Historical Maps using MapWarper
        • Presentation + Workshop: Putting it together in ArcGIS Online
        • Workshop: A Brief Introduction to QGIS
          • Adding Base-maps and Raster Data
          • Adding and Creating Basic Vector Data
          • Styling your data and preparing it for exporting
      • Story Maps
        • Story Map Exercise
      • Text Analysis
        • Exercise 1: Voyant
        • Exercise 2: Python
Powered by GitBook
On this page
  • Creating an Account
  • Making Your First StoryMap
  • Navigating StoryMap
  • Select Options to Choose and Customize Your Map
  • In the Media box, Design Your Cover Page
  • Adding New Slides to Your Presentation
  • Changing Your View
  • Save and Share

Was this helpful?

Export as PDF
  1. Tutorials
  2. ¶ Digital Storytelling

Introduction to KnightLab StoryMap JS

PreviousImporting Maps from David RumseyNextTimelineJS

Last updated 2 years ago

Was this helpful?

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.

Creating an Account

StoryMap requires that you make an account before starting your own project. This account can be connected to your BC Gmail address.

  1. Click on Make a StoryMap

  2. 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.

Making Your First StoryMap

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.

Navigating StoryMap

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.

Select Options to Choose and Customize Your Map

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

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.

In the Media box, Design Your Cover Page

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.

Title Your Project Using the Headline Box

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.

Underneath the Headline Box, Choose the Background for Your Project

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".

Adding New Slides to Your Presentation

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.

Customize the Marker for Your Map

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.

Changing Your View

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.

Save and Share

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.

Questions? Contact the Digital Scholarship Team in O'Neill library (digitalscholarship@bc.edu)!

Go tothe .

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 on importing maps to KnightLab from the David Rumsey collection or our tutorial on using to georectify and import your own image.

Knightlab StoryMap JS home page
this tutorial
MapWarper
Check out the published project!
sas
The Options Pane
In this picture, you can see that the map at the top has changed from the default
Cover Slide
First Slide