Traveling from place to place and taking photos in Savannah for my Haunted Savannah story map was not easy. Not to mention the work that went into compiling all of the descriptions for my haunted locations. By the time I made it to the actual story map implementation, I needed it to be a simple process.

My colleague, Jonah Adkins, came to the rescue and showed me StoryMapJS, an open source JavaScript library that takes a JSON file as input and presents a nice story map. The simplicity of implementation combined with the attractive user interface on the resulting story map made this solution just what I was looking for.

StoryMapJS provides an authoring tool to build the JSON file in the proper syntax to define each location’s coordinates, name, description, and media (photo, video, tweet, etc.). The map is built using Leaflet, so the StoryMapJS options allow the use of any custom map tiles. This allowed me to create a custom basemap on MapStack to use in my story map.

Map Stack leverages Open Street Map data and allows users to style datasets in a multitude of ways. Using MapStack’s tools, I was able to generate a pretty cool looking sepia toned imagery basemap to use in my story map.

I really wanted the icons on the map to be something more ghostlike. Sifting through the resulting story map icons and styles, I found the few css classes that I could override to change the icons. All I needed was the icons themselves. Flat Icon is an online database of free vector icons. I was able to search for and find a few ghost icons and add them to my cart. The site made it easy to download the iconfont for the icons and gave me all the files I needed to include for my custom web font.

Implementing this simple story map using these really great and easy tools was just what I needed. Check out my code here.

haunted savannah