Last week we were given a crash course on map making and timeline tools that can be used to enhance our digital history projects. In the past I have used Google Maps to tell a story, and even had to use TimelineJS in History of the Information Age with Dr. McClurken. Even though I have used them, I am not very experienced with either of them. I have used them for various projects in other classes at UMW, particularly Digital Storytelling and Intro to Digital Studies, but I have have a more longterm map project I worked on from high school that tells its own story. I am interested in learning how to use these tools for larger projects, being able to use these tools on a stress-free project seemed like a fun idea!
Experimenting With StoryMapJS
Like many others in this class, I have never used StoryMapJS before. I have used TimelineJS in the past, but I have not had the opportunity to explore all the different tools Knightlab has to offer. Since I had never used this tool before, I decided to try and make a quick an easy StoryMap.
StoryMapJS is pretty simple to use. It has a basic user interface that makes entering addresses or coordinates easy. There are boxes for each of the things you might want to include, such as links, captions, a place to credit media, as well as a box to type in information about the place you have identified. Since this is simply supposed to be practice in using StoryMapJS, I decided to make a quick map of some of the most famous monuments and landmarks around Paris, France. Why did I do this? I took French for five years, and even though I have a love-hate relationship with the language, I love French history and architecture.
As I started to add places I ran into a few problems using StoryMap. To start off, the box that can be used to enter locations glitches quite a bit. I used latitude and longitude coordinates for all of the monuments and landmarks, but the box sometimes got stuck on the page, meaning I could not see where to input the other information. I had to save and refresh the page several times because of this.
My next issue came when I was trying to publish it. I had no issues publishing the map to the web or embedding it in my site, but I found I was not happy with its overall appearance. I originally had images alongside the map markers, but the images sized themselves weirdly and would not stay where I wanted them. This became even more apparent as I resized the embed code, so I simply decided to do away with the photos. I would have liked if you had the option to make them fade into the background without completely obscuring the text, but that’s just me. Also, you may notice my site’s text field only takes up about 60% of the screen. That was something I did on purpose roughly a year ago because this site is optimized for blog posts, and I’m not reconfiguring my entire site for this one map so the map had to be scaled down.
Since this is a rushed practice of StoryMapJS, I’m neither completely happy or unhappy about the finished project. I kind of like the map better without the images, because the map I picked makes it seem as if it is supposed to be used to pinpoint the landmarks on the map, instead of showcasing them. I also like how it’s zoomed in on Paris at the beginning, showcasing all the landmarks before you even explore the map. Despite the pros, I think I like Google Maps a bit better. I like being able to add more than one type of media and being able to change icons and colors. StoryMapJS seems a bit too simplified for my tastes, but I can see the advantages of using it.
Experimenting With TimelineJS
Thankfully I have a little more experience using TimelineJS than StoryMapJS, so experimenting with it was a little easier. This timeline has the exact same information that was on the StoryMap above, only I’ve included some dates and pictures to fill it out.
I mentioned before that I have used TimelineJS before. I rather like it, even though working behind the scenes in a Google Spreadsheet can be frustrating at times. I have to say that I like the layout of the finished project. It looks very tidy and neat, and I think the timeline looks good even when it has been scaled down to fit my website. It looks much better in fullscreen mode, but overall I think it operates better than StoryMap does.
Like StoryMapJS, TimelineJS has a simple layout for information to be included. StoryMap does look better on the backend of things than Timeline does, but I think working with Google Sheets makes using Timeline more accessible, especially if you know how to manipulate HTML and embed codes. To include this timeline on my site, I actually edited a block as HTML and dropped the embed code in. This makes troubleshooting easier to figure out, because you can look at the code and fix it rather having WordPress tell you “no.”
And there you have it! It took me much longer to create the StoryMap than the Timeline, simply because I had never used it before. I finished both of these in about two hours, and the majority of that time was spent testing embed sizes and making sure it wouldn’t break my website. Feel free to let me know what you think in a comment down below! Also, if anyone needs help figuring these things out, I don’t mind! Simply ask me and I’ll do my best!