This is Paige from DigiComm, and I wanted to give you an overview of one of my favorite
free tools for telling stories, which is StoryMap.
StoryMap is out of the Knightlab at Northwestern University, and it's a really interesting
way to create interactive content that your user can click-through and also gives them
options to watch videos or click out to other links that all center around something that
is fundamentally about geographic location: the "map" part of StoryMap.
So let's click on StoryMap JS, and I just want to give you a quick overview of one of
the examples that Knightlab made to showcase what StoryMap can do.
This is a Knightlab StoryMap about the Sochi Olympics, specifically the torch relay highlights.
The first thing you'll notice is this map over here is simply the collection of cards
that they created with the different locations of this torch relay highlights.
So you can't necessarily control this.
You can have some choices over how the map looks, but this is a default collection of
all of the locations to give you that overview.
They've uploaded this image, they've written a title, and then some explanatory text about
And then once you hit the arrow, it zooms you in to the very first location, which is
the kickoff in Moscow.
So they've pulled in this image, and given credit to it, and again, given some details
And then when I hit "next," it then takes me to the North Pole.
And again, we have another image, title, and explanatory text.
So this gives you a basic idea of how a StoryMap can be constructed.
So let's jump back over to StoryMap and hit "Make a StoryMap now."
So it will ask you to log into your Google account, and you have to have a Google account
to use it.
And the first thing it does is ask to view all the files in your Google Drive.
Now I'll be honest, that gave me a bit of pause, so I created a new Gmail account just
for my StoryMap projects.
So let's jump over to those.
So once you log in, I've made a StoryMap about DigiComm, because we help courses all over
campus, so it's very much a geographic story about all of the different areas that we have
But for this, let's just jump into "Demo" so I can show you how to get started.
Now for working with StoryMap, I usually have three web pages always available: Google Maps
and then Google Images.
So let's say the first one we want to make -- I'm going to avoid the intro card for right
now, and just show you how to make an individual card.
So this is a specific location of your story.
So right now it doesn't have a location.
So I want to start with Wilson Hall -- part of James Madison University's campus, and
where DigiComm got our start.
Because the Learning Centers used to be located in Wilson Hall.
So Google Maps is zooming us in to our campus, but I'm going to click out of that and click
on this building (Wilson), and it's going to give me the GPS coordinates for it.
And I'm going to copy and paste those over here.
So that means I get the very -- once I hit enter -- so it's zoomed out a bit, but if
we zoom all the way in, you'll be able to see that it's exactly on the Wilson Building.
Now the way the map is set up, it's not show us the details, so if I go over to "Options"
I can have different choices for the map type.
So let's see what "Watercolor" looks like. ...and then we wait!
Let's hit "Preview."
Watercolor looks like they put us in the pond.
Let's go back to "Edit."
The pond is campus!
So here we are in Wilson Hall, still not as specific as I would like it to be.
Let's do regular Street Map.
Now that I like!
Again: very specific and it looks like campus.
So for this one, I'm just going to title it "Wilson Hall."
And some explanatory text...
And then we have the option to upload an image or do a URL to a media file.
So this would be useful if I wanted to link to a YouTube video or Vimeo video.
But for this I want just an image of Wilson Hall.
So "Wilson Hall JMU" and then I'm going to go over to "Images" and this is a feature
I like a lot about Google: we have these "Search tools" options, and that includes "Usage rights,"
because I don't want to infringe on any copyright issues.
So I'm going to say "Labeled for noncommercial reuse."
This will give me the widest range of images that I can use, because some people -- photographers
who take photos -- are okay with it being shared but they don't necessarily want people
to make a profit off of their images.
So since this is not for commercial purposes, they're more likely to give me rights to their
image -- or, allow me to use it.
So for this one I'm going to go with Wikipedia.
Let's check it out.
And then I'm going to hit the button for "View Image" and this is going to take me to a URL
that's just for the image.
So you can see that says "jpeg" at the end, that means it's what we want.
So I'm going to jump back over to my demo and I'm going to paste that there.
And then for credit, I'm going to say "Image from Wikipedia."
Ok, let's go into "Preview."
So we see where Wilson is on the map, we have the image, we have the credit, and we have
Now what we have is this transparency over the map with the text layered on top.
So one of the things I'd like to do is change the way that slide looks.
So we have a background color that right now is set to transparent, but DigiComm has its
own colors, including this shade of blue.
So I'm going to see how that looks.
Jump back over to "Preview," so we have the dark blue, we have the text over top, and
they sort of do this white text with black outline, so it will work for most [backgrounds],
the readability isn't great, so I might go a darker color and see if I can improve that.
Which is convenient, because DigiComm has an even darker shade of blue that we use.
So let's see... let's go into "Preview."
I like that better.
So it's still a transparency: you can still see the map behind it, but the text is showing
up better, image, and information.
Alright! and that gives you an idea of how the individual cards on StoryMap work -- stay
tuned for the next video that will go over how to put the whole thing together.
Again, I'm Paige from DigiComm: thanks for watching!