There are a variety of different story map templates that you can download and host from your own servers, and even a hosted, configurable version of the Map Tour template available with an ArcGIS Online subscription account.
Another useful and interesting template is the Playlist, also known as the “top ten.” It’s been used for authoring map stories like Smithsonian’s 20 Best Small Towns and others. This template is easy to use, and we’ll show how you can build your own story map using the Playlist template in just a few simple steps.
The project we chose was a story map version of the most visited US National Parks. The list of the most visited parks is publised online as a PDF by the National Park Service. We used the statistics from that report, and also used photos and text from the websites of the top ten parks.
To create a playlist tour 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 and the photos you will use on a publicly accessible server, and you’ll also need an ArcGIS Online account (public or subscription) to author and save the map used in the playlist.
Step 1 - Download the story map template
Download the playlist storymap 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. Later, to complete our story map, we’ll be editing the index.html file.
Step 2 - Make your thumbnails
For each location on your map you’ll need a photo or graphic to use as the thumbnail in the list. The size of the thumbnail is 70 x 70 pixels, larger thumbnails will be resized automatically to fit. To optimize your story map keep the file size to a minimum, and keep a square format to avoid distortion. Shown below is what the thumbnails will look like in the playlist story map:
For our National Parks playlist we also wanted to include a photo in the pop-up for each location. This isn’t a requirement to use the playlist template, but we thought it would make a nice addition.
The optimal size for pop-up photos is 200 x 150 pixels. To save time, and avoid having to save two images for each location, we used a single image of 150 x 150 px for both the thumbnail and pop-up. We chose a square 150 px image for both, since it would avoid thumbnail distortion when resized, and still fit nicely in our pop-up. Here’s both as they appear in our final story map:
Once you’ve named and edited your photos, upload them to your web location so they can be referenced in the application via their URL. For example, below is the URL to one of the photos used in our application:
Step 3 - Create a CSV for your locations and other information
You can use a comma-separated value (CSV) file to add your playlist locations to your web map, and store other information used by the template and the pop-up. You can use Notepad or any other text editor to create one, but it’s often easiest if you use Excel.
There are several required fields:
- Order – the order that the locations in the CSV will appear in the application list, and also the number that will appear on the map icon. This is optional, and only needed if overwriting the default order (e.g., you want the 5th item to be numbered 2), but it’s a good idea to use this field even if not changing the order, just keep things easily to understand and neat in your CSV.
- Name - the title for the playlist item in the side panel. If the field “Name” is not found, the application will use the first text attribute.
- Color – use if two icon colors are desired. Using “b” will display a blue icon, otherwise red will be used. If the field is not present all icons will be red.
- Thumb_URL – URL location of the image used as the side panel thumbnail. If not present, the app will look for the first attribute that has a string with an image type as a file extension (.gif, .jpg, .png, etc.).
- Latitude, Longitude - location of each park.
- Description – a text string with a brief description of each park used in the pop-up window.
- Website_URL – the park website to open when the photo in the pop-up is clicked.
- Visits – the number of visitors in 2012 that the park received, also used in the pop-up.
Step 4 - Author and configure the web map
Open a new map and drag and drop the completed CSV file onto the map, or click Add, then Add Layer from File to add the CSV. Change the basemap and add additional layers as desired.
Symbols used in your web map will be ignored by the playlist template, a red or blue icon with the order number will automatically be substituted. But since the map can be publicly discovered outside the context of the playlist application, it’s a good idea to follow best practices and author a complete and well-documented map.
Configure the pop-up for each location. For our project we wanted to include the number of visitors in 2012, a short description, and a photo the user can click that links to the park website.
Zoom to where you would like your initial map extent to be, and save your map.
By default, the title of your map item will be used as title of the application, the item summary will become the subtitle, and the map item description will appear in the top left panel. These can be overridden by editing the index.html, see Step 5 below.
Be sure to share your map publicly when finished. The map used in this example can be found here:
Step 5 - Add the map ID to the playlist index.html
Using any text editor, edit the playlist index.html (see Step 1) to insert your saved web map ID. You’ll find the id (and other variables you can change) in the configOptions section, beginning partway down the index.html (line 28) as shown below:
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 NPS Top 10 playlist application.
For more information
View the Readme file that is included with the playlist template download for more details and options, or visit the Esri Storytelling with Maps website. Help topics you may want to review include: