Be a hero in 15 minutes with story map templates

Story map templates provide a quick and easy way to add more value and meaning to your web maps, and deliver them to a wider audience in interesting applications. Even if you don’t know a thing about JavaScript, you can easily configure these templates and become a hero for your organization in just a few minutes. Here’s a recent example using a story map template and a handful of ArcGIS Online web maps to make an application that highlights the demographic characteristics of areas impacted by Hurricane Sandy: This application took five web maps, one story map template, and about 20 minutes total from start to finish. Here’s how you can do something similar. First, author the web maps you want to use in your story. We won’t go into details on web map authoring and configuring pop-ups in this post, but they are well-covered in the ArcGIS Online help and the ArcGIS Online blog. The important point to remember is that the way you author and configure your map, including layer order, appearance, transparency, scale dependencies, and pop-ups, will be reflected in the user experience for your map(s) from within the story map template. You’ll note that each web map has a unique identifier (like your Social Security number or your auto’s license plate) that you can use to reference it uniquely. You can find that ID in the URL when you open your map, or view its details:

Next, capture the IDs for the maps you want to use in your story map. Notepad or something similar provides a handy way to capture and save them. For our story map we made five web maps, so saved the IDs for each.

Next, download the story map template. You can find those by searching ArcGIS Online, or by going directly to the Storytelling With Maps website, and going to the template gallery which can be opened by clicking Download story templates in the right-hand panel.

From the template gallery you can choose from a variety of different options to suit your needs and intended story. We chose the Side Panel template. Click Details and Download to obtain the source for the application.

After unpacking the Zip file download, you’ll find a folder with all the source code and a readme.html which explains the various components. You’ll need to copy the folder to a localhost for editing and testing prior to your deployment. On our system we copied the extracted storytelling_sidePanel folder from our Downloads, and placed it here:


Open the folder and view the contents. You’ve got all the source, so there’s lots you can do, but even if you are not familiar with JavaScript or CSS it’s a snap to use these templates and add your web maps. View the folder contents, and look for index.html:

Review the readme.html file prior to making your changes. The templates are designed such that all of what you need to edit is in one place – the index.html. You’ll only need to edit other files or look in other folders if you want to customize the templates further.

You can edit the index.html in any editor, we’ve used Notepad++ to view the file. Scroll down to find the section that contains the web map IDs, and add the ones you captured earlier to the file (making sure you close the curly braces and brackets properly). Here’s what our index.html looks like with the five web map IDs we want to use inserted:

In this template, there’s another section we need to edit to provide the text for the application tabs (and note these default to the web map titles):

One final place to edit is the title and subtitle. Save your changes, and you can test your application by running it locally – we entered the following in our browser to view our locally hosted application:


When you are satisfied with the results, you can publish the finished application from your own servers, or hand it off to your web team or IT staff to publish.

With a web map or two, a story map template, and few simple edits in Notepad, you can be a hero for your organization and crank out cools apps in  matter of minutes. To see more Story Maps created by the user community, view the Storytelling with Maps community gallery.


This entry was posted in ArcGIS Online, Story Maps and tagged , . Bookmark the permalink.

Leave a Reply