{"id":1111,"date":"2024-11-13T11:30:41","date_gmt":"2024-11-13T16:30:41","guid":{"rendered":"https:\/\/sites.smith.edu\/project-resources\/?p=1111"},"modified":"2026-04-07T14:15:40","modified_gmt":"2026-04-07T18:15:40","slug":"creating-a-map-with-storymapjs","status":"publish","type":"post","link":"https:\/\/sites.smith.edu\/project-resources\/creating-a-map-with-storymapjs\/","title":{"rendered":"Creating a map with StoryMapJS"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-style-default has-border-color has-custom-black-border-color has-custom-sky-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"border-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);box-shadow:6px 6px 9px rgba(0, 0, 0, 0.2)\">\n<ul style=\"border-style:none;border-width:0px\" class=\"wp-block-list\">\n<li><a href=\"#navigate\">Navigating to StoryMapJS<\/a><\/li>\n\n\n\n<li><a href=\"#create\">Creating a New Map<\/a><\/li>\n\n\n\n<li><a href=\"#add-content\">Adding Content<\/a><\/li>\n\n\n\n<li><a href=\"#add-wordpress\" data-type=\"internal\" data-id=\"#add-wordpress\">Adding a Map to WordPress<\/a><\/li>\n\n\n\n<li><strong>Optional:<\/strong> <a href=\"#formatting\">Formatting your StoryMap<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#image-color\">Background Images and Colors<\/a><\/li>\n\n\n\n<li><a href=\"#format-text\">Entering and Formatting Text<\/a><\/li>\n\n\n\n<li><a href=\"#preview\">Checking Changes<\/a><\/li>\n\n\n\n<li><a href=\"#map-markers\">Custom Map Markers<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#youtube\">Watch a Tutorial from Knightlab<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><strong>Overview<\/strong><\/h2>\n\n\n\n<p>StoryMapJS is a free tool developed by <a href=\"https:\/\/knightlab.northwestern.edu\/\">Knight Lab<\/a> that makes it easy to create and navigate through a sequence of locations, with added images and text.<\/p>\n\n\n\n<div class=\"h5p-content\" data-content-id=\"9\"><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-center\" id=\"navigate\">Navigating to StoryMapJS&nbsp;<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to <a href=\"https:\/\/storymap.knightlab.com\/\">https:\/\/storymap.knightlab.com\/<\/a><\/li>\n\n\n\n<li>Select the green <em>Make a StoryMap <\/em>button.<br><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"270\" class=\"wp-image-1158\" style=\"width: 550px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-23-58.png\" alt=\"The StoryMapJS Landing page with the green Make a StoryMap button\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-23-58.png 1512w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-23-58-300x147.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-23-58-1024x502.png 1024w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-23-58-768x376.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-23-58-940x461.png 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-23-58-400x196.png 400w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/li>\n\n\n\n<li>In the new window, choose <em>Sign In with Google<\/em> to create an account with StoryMapJS<br><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"262\" class=\"wp-image-1159\" style=\"width: 550px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-24-42.png\" alt=\"The Sign in to Google button\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-24-42.png 621w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-24-42-300x143.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-24-42-400x191.png 400w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/>\n<ul class=\"wp-block-list\">\n<li>You will need to sign in with Google to use StoryMapJS. Follow the prompts to link your Smith Google Account with StoryMapJS. The tool does not give StoryMap or Knightlab access to your data, and you can find more about their privacy policy <a href=\"https:\/\/storymap.knightlab.com\/\">on their website<\/a>.&nbsp;<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"create\">Creating a new Map<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the Your StoryMaps window choose <strong>New<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"96\" class=\"wp-image-1160\" style=\"width: 550px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-25-36.png\" alt=\"The new map button circled in red\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-25-36.png 622w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-25-36-300x53.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-25-36-400x70.png 400w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/li>\n\n\n\n<li>In the \u201cGreat! Let&#8217;s make a StoryMap. What do you want to call it?\u201d window, give your StoryMap a title and select <strong><em>Create<\/em><\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"267\" class=\"wp-image-1162\" style=\"width: 550px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-26-49-1.png\" alt=\"The create story map window with the title of the map filled in and indicated by a red arrow and the create button circled in red\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-26-49-1.png 623w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-26-49-1-300x145.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-26-49-1-400x194.png 400w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/li>\n\n\n\n<li>This creates your StoryMap. The map opens to the title card by default.&nbsp;<\/li>\n\n\n\n<li>You can now add a title image, headline, and description to your map.<br><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"317\" class=\"wp-image-1163\" style=\"width: 550px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-33-37.png\" alt=\"The title card of a storymap filled in with some content\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-33-37.png 1522w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-33-37-300x173.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-33-37-1024x591.png 1024w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-33-37-768x443.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-33-37-940x542.png 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-33-37-400x231.png 400w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" id=\"add-content\">Adding Content<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The title card is always the top most card in the list.<\/li>\n\n\n\n<li>To add a new location card, choose +Add Slide<br><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"344\" class=\"wp-image-1164\" style=\"width: 550px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-34-33-copy.png\" alt=\"A section of the storymap with an arrow pointing out the Add Slide button\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-34-33-copy.png 842w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-34-33-copy-300x188.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-34-33-copy-768x481.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-34-33-copy-400x250.png 400w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/li>\n\n\n\n<li>In the new slide, enter your geographical location in the search bar and select it from the dropdown to choose your location<br><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"317\" class=\"wp-image-1165\" style=\"width: 550px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-38-02.png\" alt=\"Searching for a location in the map dropdown\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-38-02.png 1522w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-38-02-300x173.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-38-02-1024x591.png 1024w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-38-02-768x443.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-38-02-940x542.png 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-38-02-400x231.png 400w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/li>\n\n\n\n<li>In the media field, you can upload a photo and add a caption and credit<br><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"322\" class=\"wp-image-1166\" style=\"width: 550px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-34-33-copy-1.png\" alt=\"The Media section of a slide with photo information filled in\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-34-33-copy-1.png 701w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-34-33-copy-1-300x175.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-10-31_11-34-33-copy-1-400x234.png 400w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/li>\n\n\n\n<li>In the Headline field, add a title<\/li>\n\n\n\n<li>In the Description field, add your descriptive content.<\/li>\n\n\n\n<li>Use the zoom buttons to zoom in or out to your location<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"add-wordpress\">Adding a Map to WordPress&nbsp;<\/h2>\n\n\n\n<p>Once you\u2019re ready to add your StoryMap to WordPress, select the share button to get the link to your map. Then navigate to your WordPress site and either create a new post or open the post you\u2019d like to add your map to. Paste your link, and the link will embed automatically.<\/p>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"formatting\">Optional: Formatting Your StoryMap<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"image-color\">Background Images and Colors<\/h3>\n\n\n\n<p>To adjust your visual settings, use the Options button: <strong><\/strong><\/p>\n\n\n\n<p>This option allows you to adjust the size of your StoryMap, change the look of the background map, and change the font or default language.<\/p>\n\n\n\n<p>To add a background image or color to your slide, select the <strong>Background Options<\/strong> button.&nbsp;<\/p>\n\n\n\n<p>To add a background color, in the Slide Background window, enter a <a href=\"http:\/\/www.color-hex.com\/\">CSS hex color value<\/a> in the Background Color field or select the color picker on the left side of the field to choose a color.&nbsp;<\/p>\n\n\n\n<p>To add a background image, enter the URL of the image to link to it, or select Choose File\u2026 to upload an image. The image will be stored in the StoryMap folder on your Google Drive.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"format-text\">Entering and Formatting Text<\/h3>\n\n\n\n<p>Each slide has a title field and simple text editor. If you need to add formatting besides bold, italics, or hyperlinks, you can add additional formatting using HTML. To switch between rich text\u2013the default text option\u2013and html, select the &lt;\/&gt; icon, between the I and link icons.<\/p>\n\n\n\n<p>For more on HTML see <a href=\"http:\/\/www.w3schools.com\/html\/\">W3Schools<\/a>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"preview\">Checking Changes<\/h3>\n\n\n\n<p>Select the Preview tab in a slide to preview changes on a single slide. To view the entire StoryMap, either select the Map Overview button or the Back to the Beginning button.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"map-markers\">Custom Map Markers<\/h3>\n\n\n\n<p>You have the option to add custom map markers to use on your individual slide. To add a custom marker, select the Marker Options button to upload a picture or icon.&nbsp;&nbsp;<\/p>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"youtube\">Watch a Tutorial from Knightlab<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Introducing Knight Lab Tools\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/ZPJeJOGE8rY?start=537&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Overview StoryMapJS is a free tool developed by Knight Lab that makes it easy to create and navigate through a sequence of locations, with added images and text. Navigating to StoryMapJS&nbsp; Creating a new Map Adding Content Adding a Map to WordPress&nbsp; Once you\u2019re ready to add your StoryMap to WordPress, select the share button [&hellip;]<\/p>\n","protected":false},"author":5691,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"instruction-page-template","format":"standard","meta":{"footnotes":""},"categories":[4,34],"tags":[23,25],"class_list":["post-1111","post","type-post","status-publish","format-standard","hentry","category-class-instructions","category-tools","tag-geo102","tag-storymapjs"],"_links":{"self":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/1111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/users\/5691"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/comments?post=1111"}],"version-history":[{"count":33,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/1111\/revisions"}],"predecessor-version":[{"id":2739,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/1111\/revisions\/2739"}],"wp:attachment":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/media?parent=1111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/categories?post=1111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/tags?post=1111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}