Practice English Speaking&Listening with: Introduction to StoryMap

Difficulty: 0

Hi guys!

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

about it.

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."

Ah, no!

The pond is campus!

How nice!

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.

Great image!

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

our description.

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!

The Description of Introduction to StoryMap