StoryMap JS by KnightLab

Add a slide: 

• Click “Add Slide”
  • 
• In the location search bar, enter: 
  • A specific address or latitude and longitude

*Note: General place names will not populate. Ensure you use precise coordinates or addresses. To find latitude and longitude using Google, open Google Maps. Type the name of the place directly into the Google Search bar.  Right-click on the location, and the first two numbers will be your latitude and longitude.  

• On StoryMaps, paste the latitude and longitude in the Search Bar.
• The location will then appear on the map as a red tag.
  • 
  • If you hover over it, you can manually adjust its position

• Headline: Title of the slide (text)
• Description: Here, provide textual information, analysis, or narrative ​​​​​​​
  • 

StoryMapJS requires images to have a public URL. You can use images from your computer, but you first need to create a URL by uploading them online. You can also use images from the web, but be sure to follow copyright rules.

Add Image:

To generate a URL for an image on your computer that you want to use in StoryMapJS, you need to first upload the image to an online accessible location such as a web server, Google Drive, Dropbox, or any cloud storage service that allows direct linking. StoryMapJS requires images to be accessible via URL, so simply having the image locally on your computer won't work.

Create a URL for an Image on your Computer:

• Upload your image to a cloud service like Google Drive or Dropbox, or your own web server.
  • Ensure the image is shared publicly or has a direct link accessible to anyone.
• Copy the direct URL link to the image from the service.
• In StoryMapJS, when adding media to a slide, paste the copied image URL in the "URL to your media" field.

Finding the URL for an Image Online:

• Open the webpage with the image in your browser.
• Right-click on the image (or tap and hold on mobile).
• Select "Copy image address" or "Copy image URL" from the menu.

Adding Multiple Images

StoryMap JS by Knighlab allows only one media item per slide. However, you can embed additional images using HTML

• Switch to HTML view in the description box 
• Use the following tag: 
  • <image src= “IMAGE_URL”>
  • Example:
    •  <image src= “https://www.lib.utexas.edu/sites/default/files/styles/utexas_image_style_2280w_1232h/public/2024-07/image2.png?itok=rRGVoz0x”>
• Add a caption to credit the source (ex: Perry Castañeda Scholars Lab)

Add a Video:

• If it’s your own video, you must upload it to YouTube first and then insert that URL

• If it’s a video that has already been created, simply copy and paste the URL into cannot upload video files directly; you can only embed them via URL.

Adding More Slides

• Click “Add Slide” for each new location 
• Repeat the steps above to add location, text, and media

StoryMaps allows you to customize your map by adjusting the map settings

• Click “options”
  • 

• Customize: 
  • Map Type (ex, satellite, terrain)
  • Fonts and layout

*Note: You can create your own maps, but that requires steps that aren’t covered in this research guide. You can schedule a consultation at the Scholars Lab for support.