Story maps combine ArcGIS Online web maps with story map template applications that enable you to incorporate text, multimedia, and interactive functions with your map. Story maps inform, educate, entertain, and inspire people about a wide variety of topics.
One of the more popular storytelling with maps templates is the Map Tour, used for A walking tour of the National Mall, Mission Bay Marsh Reserve, and other interesting stories. This template is easy to use, and we’ll show how you can build your own story map using the Map Tour template in just a few simple steps.
For our project we wanted to create a story map version of a printed map included in a visitors guide published by the local newspaper, the Redlands Daily Facts. You can find copies of the guide in the visitor’s lounge in Esri’s reception area, and elsewhere around town. Here’s the printed map:
To create our map tour we’ll need to follow a few simple steps, outlined below. To successfully publish your story map using this template you’ll need to be able to host the application template and the photos you will use on a publicly accessible server, and you’ll also need an ArcGIS Online account to author and save the map used in the tour.
Step 1 – Download the story map template
Download the map tour story map template from the story maps template gallery. The application template is downloaded as a Zip file; extract all the contents into a folder in your inetpub \wwwroot folder. When you look at the extracted files and folders you’ll find the detailed documentation in the Readme files. To complete our story map we’ll be editing the index.html file and also the locations.csv file, which is found in the data folder.
Step 2 – Prepare your photos
For each location on your map, you’ll need two versions of the same photograph. One is a thumbnail that is displayed in the thumbnail gallery, and the other is the larger photo that displays in the photo frame for the selected location, located to the left of the map.
The size of the photos will have an impact on the performance of the application, so keep these to a minimum. For best results we recommend a size of roughly 1000 x 667 pixels for the larger version of each photo, and size of 120 x 80 pixels for the thumbnails (both at 72 DPI). Your photo dimensions don’t need to have these exact dimensions; photos and thumbnails that are different in size or aspect ratio will be “best fit” into the application.
Once you’ve named and edited your photo pairs, upload them to your web location so they can be referenced in the application via their URL. For example, below are the URLs for one of the photos and its corresponding thumbnail used in our application:
Step 3 – Edit your locations file
In the data folder of the downloaded map tour template you will find a locations.csv file. Simply edit this file and replace it with your data. You can use Notepad or any other text editor to make the necessary changes. The field names must remain the same, though they are not case-sensitive. Order is not important, and you can have additional fields. If you are using addresses instead of lat/long locations, see the Readme file for more information.
Field names and contents are:
- Name – the caption for the photo, and the text that will appear under each thumbnail. The name can include multiple words, and will wrap to a second line if necessary.
- Description – A short description of the photo. This should be kept to a single sentence, or a couple of short sentences. Enclose the description in quotes if it includes commas or other punctuation.
- Icon_color – The color of the icon that will be placed on the map at the photo location. Current R (red) and B (blue) are supported.
- Long – Longitude (X) coordinate in decimal degrees.
- Lat – Latitude (Y) coordinate in decimal degress.
- URL – The publicly accessible URL location of the full-size photo.
- Thumb_URL – The publicly accessible URL location of the thumbnail photo.
The first row will be used to provide the intro photo to your map tour. The photo it references will not be shown on the map, but can be used to present introductory information to the user. All fields for this first row should be completed – the lat/long fields will be ignored but must be present, and can be copied from the next row in your file.
See Step 5 below for how to disable this feature if you don’t want an intro photo.
Step 4 – Create your web map
Drag and drop the edited locations.csv file onto a map, or use Add, then Add Layer from File to add the spreadsheet. By default, the template requires that the layer you want to use for the tour be named “locations.” You can change this if you like – see Step 5.
Zoom to where you would like your initial map extent to be, and save your map. The title of your map item will become the title of the application, and the item summary will become the subtitle. Be sure to share your map publicly when finished.
Symbols used in your web map and pop-ups will be ignored by the map tour template, but since the map can be publicly discovered outside the context of the map tour application, it’s a good idea to follow best practices and author a fully finished, and well-documented map. The map used in this example can be found here:
Step 5 – edit the index.html
Using any text editor, edit the index.html to insert your saved web map ID. You’ll find the WEBMAP_ID (and other variables you can change) in the config section, as shown below:
FIRST_RECORD_AS_INTRO can be changed to false if you don’t want to use the first row to include an intro photo (as discussed in Step 3). Change LOCATIONS_LAYER_TITLE if you want to use different layer name to drive the tour (discussed in Step 4).
Step 6 – upload your application
Once you’ve completed the steps above, copy the entire template folder to a publicly accessible server and you’re finished, and ready to share your story map.
Here’s our completed map tour application:
For more information