Mapping Lab

Esri Story Maps

For the purposes of this activity, you will create 4 markers with Esri Story Maps, each at a unique geographic location, using images you find from the Internet. If you don’t want to be creative, you can use the following points: Where you were born, your favorite vacation spot, your currently location, and a place you would like to visit in the future.

Logging in to Esri Story Maps

Go to https://storymaps.arcgis.com/en/ and click Sign In. Enter the username and password provided.

Once you have signed in, either click on My Stories or go to https://storymaps.arcgis.com/en/my-stories/.

Creating a new Story Map or Editing an Existing Map

Click on Create Story to start creating a new map. If you have already created a map, locate it in the list and click on it, then click Edit Story to begin editing it.

Creating your First Map

After creating a new Story Map, select the Map Tour option.

The Map Tour Builder will appear. For the purposes of this exercise, you will be uploading your own images, so select I need to upload my images. You will be asked to name the map layer, so call this whatever you want to. Leave Folder alone, then click Create the Layer. You can also connect a Flickr or Picasa (Google Photos) account, or use YouTube if you are using videos.

You will be taken into the Builder Mode at this point, where you will create your points and add media.

Remember to Save often!

Map Title and Subtitle

Click on the pencil/edit icon next to the Title and Subtitle of the map at the top left to change them.

Adding Markers

Click Add to add markers to your map. There are three components to a marker:

  • Media: If uploading your own images, you will need to drag and drop each image here.
  • Information: Add a name and caption for your media here.
  • Location: Drag and drop the marker to place it where your marker goes. You can zoom in and out here. You can also search for locations, or click the target icon to take you to your current GPS location. There are only 4 options for colors with this particular map tour. If you took the images with a phone, they may have EXIF data attached, meaning Story Map will try to locate the images on the map automatically.

Settings

There are a few settings you can adjust in Map Tour.

  • Layout:Pick one of the layout options. Checking the Display a locate button box will put a button on the map that will check your GPS location and take you to your coordinates on the map.
  • Colors: You can change the colors for the header, footer, and content if you want.
  • Header:You can change the logo at the top, add links, and social media sharing.
  • Data:Normally you will not want to adjust these settings.
  • Extent:After all of your markers have been placed, click the Use Map Tour extent option and click Apply. This will make sure your map encompasses all of your points.
  • Zoom level:While this may seem like something to play with, generally you want to leave it alone.

Editing the Map

On the map, click the Change Basemap button and change to a map option you think looks well.

Markers can be moved after you have added your images. To move a marker, click on the image corresponding with the marker at the bottom of the screen, then click and drag the marker to a new location. You can zoom in and out to help place markers, but this will not affect the presentation of the final map.

Marker colors can be changed as well.

Editing Markers

To change the order the markers appear when clicking through, click Organize, then drag and drop the markers in the order you want.

Click on the pencil/edit icon next to the title and description of the marker image to update them. Do not use too much text, as it will force your audience to have to do a lot of scrolling. The default title of the image will be the filename of the image, and the description will say Edit me! until you change it.

Image Orientation, or, Why Doesn’t it Look Right?

Horizontal pictures seem to work best with Story Map. If you image is more vertical than horizontal, you may want to use an image editing software to crop the image in a horizonal/landscape manner. Pixlr is a free, online image editor if you don’t have access to PhotoShop or similar program.

StoryMapJS

For the purposes of this activity, you will annotate an image with 3 markers. You don’t need to know specifics about the image. Pick three different parts on the image you want to highlight and create a slide for each one.

Logging into StoryMapJS

Firefox seems to work best with StoryMapJS, although Chrome works as well.

StoryMapJS requires a Google Account. You can use a Gmail account, or create a Google account for any other email address. After logging into the StoryMap site, click Make a storymap now to sign in, and click Login with your Google account. If this is the first time logging in, click Allow to continue.

How to Create a Gigapixel Image

StoryMapJS is good at allowing you to import images and use them as your map, instead of a traditional map. This lets you annotate historical maps, or even non-map images.

  1. Find a large image, usually several thousand pixels on each side. I’ve found that at least 4000 pixels for both width and height works well. Generally you will want to have Special Collections scan one of their images for you at high resolution, or use something already in their digital collections. The bigger, the better.
  2. Open the image in Photoshop. If you don’t have access to Photoshop, you can use the free version of the Zoomify tool on its own. However, you will still need to find the image size by right-clicking on the original image, selecting Properties, and getting the image size from the details tab.
  3. Go to Image > Image Size. Copy the Height and Width in pixels. Close this window.
  4. Go to File > Export > Zoomify
  5. Set the quality to 12 (maximum). You can change the Basename to something easy, since this will be part of a link, you may want to make it short. You can leave the other options alone. Choose the folder where you will export your files to.
  6. Click Export and wait for the operation to complete.
  7. In the folder location you chose, you will see a new folder called BASENAME_img and an HTML file. You can delete the HTML file. If you open the BASEFILE_img folder, you’ll see more folders and some files. You can delete the ZoomifyViewer file. If you open one of the TileGroup folders, you will see that your image has been divided up into a series of tiles.
  8. Copy the BASENAME_img folder to your Sites public_html folder or another place that it is accessible via the Internet. You can rename this folder to anything you want, but do not change the names of the TileGroup folders.

Creating a New StoryMap

Click New to create a new StoryMap, enter a name for your map, then click Create.

StoryMapJS Options

There are several options for the entire map that you can manage. You will need to change some of these to get your Gigapixel image to display:

  • Map Type: Set this to Gigapixel. Pick one of the images you want to annotate and set the URL and image size.
  • Zoomify URL:The link to the Zoomify image tiles, copy and paste into this field:
    • Starry Night: http://public.gettysburg.edu/~rmiessle/dssf/starrynight_img
    • Civil War Sheet Music: http://public.gettysburg.edu/~rmiessle/dssf/sweeny_img
    • Gettysburg: http://public.gettysburg.edu/~rmiessle/dssf/gettysburg_img
  • Max Image Size:Change the width and height of the image:
    • Starry Night: Width: 2560 Height 1600
    • Civil War Sheet Music: Width 2048 Height 2653
    • Gettysburg: Width 2452 Height 2976
  • Fonts: You can change the fonts for the entire map; this affects all of your slides.
  • Call to Action:When you load the map, it will usually have a button that says “Start Exploring” but you can change that to something else. You can also disable the button by clicking No.
  • Treat As: There are 2 options, Cartography and Image. They both have their quirks; Cartography mode looks a little nicer but there are dotted lines connecting each of your markers; Image mode doesn’t have the lines, but it doesn’t always look as nice. More details are available at the Gigapixel Best Practices Guide but the best thing to do is to is play with each option and see what works best.
  • Map Background Color:You can change this if you want a different color behind your map.
  • Attribution:This is the attribution for the map you chose, do not change these.

StoryMapJS Components

A StoryMap is made up of several components:

  • A Map, which contains your markers, each connected to a corresponding slide. Each slide (other than the title slide) has to be associated with a single marker on the map. You can drag your marker to the appropriate point, and zoom in and out as needed.
  • Slides, which contain your text and media. You have a title slide, which introduces your map and shows all of your markers on the map, and individual slides, which each corresponding to one marker on the map. Each slide has three main parts:
    • The map that contains your markers
    • A text area with a Headlineand Text Box
    • A media area, with a place to either link to media or upload an image, a space for a caption, and a space for credit

In the text area, you can copy/paste text into the box as well as type it in. You can bold and italicize your text, and add links.

Each slide has two tabs: Edit and Preview; suffice it to say, to make changes, you have to be on the Edit tab. To see what you have done, click Preview.

Title Slide

This is the first slide that users will see when they load your map. It displays all of your points at once. This is a good place to introduce your map. You do not add a marker for the title slide.

Individual Slides

Click Add Slide to add a new slide. Once you have more than one slide, you can drag them to rearrange them. To delete a slide, select it, then click the X. Once you have created a new slide, drag the marker on the map to the appropriate location you want to highlight, and zoom in or out as necessary.

Slide Options

These options have to be adjusted for each slide.

  • Background Options: You can adjust the background color of individual slides, or use a background image instead; if you use a background image, you can upload a image file, or add a link.
  • Marker Options: You can use  a custom image for the marker associated with each slide by adding a link, or uploading an image.

Slide Tips

  • Avoid using too much text on the slides, otherwise your users will have to scroll up and down to read all the text.
  • Always add a credit and caption to your media in order to let your users where you got the image from, and what you are displaying.​
  • Save regularly! You will also want to click the Publish Changes button to make sure your edits are pushed to the public version of  your map.

Sharing and embedding your Map

Once you are happy with your map, you can click on the Share button to get a link to your map. Copy and paste this link into a browser to see it live.

To embed your StoryMap into another website, like WordPress, click on Share, then scroll down to Embed, and copy the code in the box. This can be pasted into other sites to embed your map.

Questions

  1. What limitations do each tool have? What advantages? Did you have any frustrations when trying to figure out the tools?
  2. What does each tool do better, at least from your limited exposure to the tools? Was one tool more intuitive than another?
  3. Would it be possible, using StorymapJS and the Gigapixel map feature, to create a more neutral map, that is, one that is free from the constraints of a north/west orientation?
css.php