Creating and Customizing a Story Map — From a Non-GISer

Our friends at GISi recently published a great post about how one of their non-GIS people created a story map. One of our writers had just created a Halloween-themed story map and we thought it would be interesting to learn more about his experience.

Guest Post by Robby Deming

As a writer, I never thought I would create a story map. I have some technical knowledge, but the artistry and rich functionality behind some of our story maps just seemed way out of my reach. After creating The Geography of Horror story map, I’m now proud to say that I couldn’t have been more wrong. Not only is it easy to create a story map, but it’s also relatively easy to put your own unique touch on one.

The Geography of Horror

The hardest part about creating this map? Collecting data on nearly 250 movies.


Getting Started

My initial goal was to create a fun map related to Halloween that we could share on social media. After going through a few different ideas, I finally settled on a map showing where some of the most well-known horror films took place. I found a great list on IMDB and I decided to use the Storytelling Shortlist Template since there was going to be a lot of information to show on this map.

Following the steps outlined in Bernie’s walk-through for the Shortlist, I set up several different CSV files (one for each tab in my map) and began digging through IMDB and Wikipedia to collect data and images. With some help from my colleagues (thanks Araceli, Stacey, Amanda, and Cassidy!), and a lot of perseverance, we eventually catalogued some 249 films spanning nearly 100 years.

Building the Map and App

I now turned to ArcGIS Online to start building my map. After logging in and looking at the default basemaps, I realized that none of them really fit the Halloween theme of the map. I started searching through ArcGIS Online for different ideas and I eventually found this elegant, yet spooky, dark gray basemap. I simply saved a copy of the map (rather than trying to recreate it myself) and added in each of my CSV files as a Layer from File. The result was a simple web map with seven different layers and a great basemap. With a web map in place, I could move on to the app itself.

The Geography of Horror Web Map

One of the best things about the story map templates is just how easy it is to convert a relatively plain web map into a polished mapping application. Once I downloaded and installed the template to my inetpub\wwroot folder (again, following the instructions from Bernie’s walkthrough), I navigated to the index.html file for the template and opened it with a text editor (I highly recommend Notepad++). From there, I found the config section of the file and replaced the default WEBMAP_ID with the ID from my map above, and saved. Voila, a perfectly functional story map.

Customizing the App

I received positive feedback on the concept when I showed it around, but people wanted to know if we could tweak the map in subtle ways to really bring out the Halloween theme. Could we change some of the colors? Was there a way to make the images show up larger in the pop-ups? What about a custom banner?

I wanted to say yes, but I really didn’t know how or even if some of those things were possible. After some encouragement from the story maps team and our designers, I created a backup of the app and started to dig in to the application files.

This next part gets a little technical. Proceed, if you dare. *cue evil Halloween laughter*

Since the app works great out-of-the-box, most of my “customization” ended up being cosmetic changes to existing values in either the CSS file (located in the template folder under css/style) or the index.html file noted earlier.  Both of those files can be daunting, but utilities like Chrome’s built-in “Inspect Element” tool can help you understand the link between different lines of code and the components of your story map. In many cases, when I decided I wanted to change something, I would right-click that area of the app and inspect it. Once I figured out how the app referenced that component (for example, the tabs with the years are simply referenced as “tab”), I found them in the CSS or the HTML file and began changing values to see how the app would respond.

Inspect Element in Chrome

Want to change something in your app? Inspect it!

I won’t go through all of the changes I made, but I’ll cover three that had the most impact.

Adding a Custom Banner

Our designers had created an awesome zombie image that I wanted to incorporate in the upper part of the app. Using the Inspect Element tool in Chrome, I determined that I had to edit the header property in the CSS to add the image as a banner. By editing one line of code and adding another (see below), I was able to easily include a custom banner in the app. This same approach should work for your apps, too.

Adding a Custom Banner

Editing two lines of code in the CSS allows anyone to add a custom banner to their story map.

Changing Tab Colors and Size

While the default grays for the tabs are nice, I wanted to emphasize the horror factor of the map by incorporating red throughout the app in specific places. I also needed to adjust the default tab size anyway, so I decided to make changes there. Using the Inspect Element tool again, I was directed to the tab portion of the CSS file. And just like the header, changing two lines of code resulted in a big difference. For the tab size, it was a matter of trial-and-error to see what would best fit the tab names. For the colors, a simple web search for “hex colors” returned a variety of sites dedicated to HTML colors.

Changing Tab Colors and Size

Simple changes to existing values resulted in big changes to the app.

Making Images Bigger in the Pop-ups

After hours of data collection, I was disappointed that the images I had found weren’t showing up larger in the popups. Inspect Element again led me back to the CSS file, though there were actually two different elements that related to the image in the pop-ups. The pop-up is referenced as “details” and the elements that related to the size of the image are “details .pictureFrame” and “details img.” Like the tab sizes, it was a matter of trial and error to see what would best fit the images, but I eventually settled on this:

Making Images Bigger in the Pop-ups

Make your images pop with a few small changes.

That’s it. If you’re familiar with any sort of application like Word or Notepad, you too can make little changes to your apps that really help them stand apart.

Allen Carroll

About Allen Carroll

Allen Carroll is program manager, ArcGIS Online content and heads the Story Maps team. He came to Esri in late 2010 after 27 years at the National Geographic Society, where he told stories with maps in National Geographic magazine, in three editions of its Atlas of the World, and in countless wall maps and websites.
This entry was posted in Storytelling with Maps and tagged , . Bookmark the permalink.

Leave a Reply

6 Comments

  1. surajskoneri says:

    Really innovative idea..

  2. rupertessinger says:

    Here are a couple of other eye-catching story maps created by customizing the same template:City of Seville, Spain:http://sig.urbanismosevilla.org/Sevilla.art/Monumentos/shortlist/index.htmlVisit Mississippi demo by the Esri San Antonio office:http://storymaps.esri.com/stories/visit-mississippi/

  3. mapdoggis says:

    This is great! Thanks for sharing the how-tos for customizing the app.

  4. iamsyukri says:

    May anyone suggest the best dimension for the custom image header? I’ve tried many size but it doesn’t fit to screen well.

  5. sblazey says:

    Fantastic! Thanks so much for posting this. I just started working with the Shortlist application and this is a great help for figuring out how to make a few customizations!