Skip to Main Content
Chat With Us

Undergraduate Research in History


StoryMap JS

This is a guide for Boston College's undergraduate student population in how to approach historical research.

Your StoryMap JS

For this project, you professor has assigned you the task of creating a StoryMap JS exhibit using digital facsimiles paired with explanatory text. This guide is designed to take you through the process. Let you subject librarian (Dr. Bee Lehman - call them Bee) know if you have questions.

Example Project

What's on This Page

This page has a lot on it. You can use the following anchors (links down the page) to jump straight to a relevant box.

    To go with this guide, we've put together a video to take you through setting up your StoryMap JS. Different people learn different ways and we recommend that you use and refer back to both the text and video as you work on your project. 

    Starting a StoryMap

    link to StoryMarp JS

    Once you have your sources, you need to assemble your project. To start:

    • Go to StoryMap JS
    • Click on "Make a StoryMap"
    • Signin with your BC student Google login
    • Pick a name for your StoryMap (you can rename it later, so you might start with "Modern History" and your last name)

    StoryMap Options


    Before you start adding content, take a moment to explore the StoryMap JS options. To do so, click the "Options" (undefined) button on the upper-left of the screen next to "save" (undefined). This is where you can maniulate your language and font. More importantly, this is also where you can:

    1. Choose the proportions of your StoryMap for your final presentation in Canvas. 
    2. Decide whether you want to treat the background as cartography or an image.
    3. Rename your "call to action" to fit your specific project.
    4. Change the background map type or use a custom map/image relevant to your work (which might dictate what you do with 2). 

    We recommend you play with these options as you assemble your content. 

    StoryMap Slides

    Title Slide

    Once you've taken note of your options, it's time to assemble your content. You should begin with your title slide (although, depending on your preferred workflow, you should likely clean this up last). 

    Content Slides

    Content slides should each include their own piece of media (be it image, letter, or otherwise), the appropriate attribution, and text explaining to the reader how they should understand your chosen object. 

    StoryMap Slides: Media

    undefinedTo properly include your media (the digital facsimile of the painting, letter, or other documents you selected), you need to: 

    1. Insert the media (either as an upload or using a link directly to the digital facsimile).
    2. Include a credit to the institution holding the document.
    3. Put in a caption with the appropriate Chicago full note citation for the document.

    It's important to include the citation in order to acknowledge who created the text and how the reader can find it. It's important to provide that information following an established standard in order to 1) ensure you have all relevant information and 2) make it easier for the reader to engage the material. You can visit BC Libraries' Guide for writing those citations or you can talk to your librarian (Dr. Bee Lehman).

    StoryMap Slides: Text

    The text is where you need to explain how your chosen documents connect to your chosen theme. Here, you need both a headline (1) and text (2). 

    1. The headline should encapsulate what you want your reader to understand about your chosen media (e.g., Tulips in 19th century Amsterdam)
    2. The text should build on the title, explaining what your chosen media says about your theme. 

    Working with that text box, you can format your text or add links using the buttons located above the text bar.

    1. The "B" puts your text in bold. If you use HTML, that would be the <strong> tag. 
    2. The "I" puts your text in italics. Using HTML, that would be the <em> for 'emboss.'
    3. Click the "</>" button if you want to use HTML to code your text. 
    4. The chain icon symbolizes a link. The button is to add a hyperlink to your text. 

    If you have questions about content or formatting, contact your library (Dr. Bee Lehman).

    Change your basemap

    To change the map in the background of your project:

    1. Click on "Options" in the upper-right side of your browser window.
    2. Decide whether you want to treat the background as cartography (a map) or an image. 
    3. Decide if you want to leave your "call to action" with the default or stylize it to your preference. 
    4. Look through the basemap types -or- choose from the last four options to highly specialize your project.
      • If you customize your basemap, we recommend you choose "custom" and select from the georeferenced maps with the David Rumsey Collection. Georeferenced maps are already set up to work with programs like StoryMap JS and easy to plugin.
        1. To do so, pick your map in the Rumsey collection.
        2. Make sure you are looking at "This Map" and not just a preview.
        3. Look for the "Use in GIS apps" information and click "Get Links."
        4. Copy the "XYZ link" under "custom" in StoryMap JS.
    5. Click "Close" to save your changes.

    Share your project

    When you've finished your project, you will want to publish it. There are a couple ways to do this--but this guide will focus on the easiest. 

    1. While on the "Edit" tab, look at the upper right side of your browser window.empty
    2. Click "Share" (undefined).
    3. Scroll down the "Share" pop-up to Embed 
      • undefinedNote - you can also share a link, which emphasizes social media (e.g., twitter, etc.,). This option is going to appear first. Note that you can style the link view with specific thumbnails.
    4. Looking at the "Embed" options, decide whether you want your project to show up with full width (100%) on your host platform (e.g., Canvas) and how heigh you want your project to appear.
      We rarely recommend making it smaller but sometimes making the height larger is ideal. 
    5. undefinedWhen you're ready, highlight the code starting with "<iframe" and ending with </iframe> and copy it. 
      Aside: that the HTML Iframes are used to embed webpages in webpages. You can read more at the W3 school (or other) discussions.
    6. Head to Canvas (or your other hosting platform).
    7. Use the appropriate tools to paste your embed code into your assignment. 


    For Additional Help

    For additional recommendations, contact your History Liaison, Erin, at or schedule an appointment.