Story Maps

Using the Storytelling Shortlist template

One of the more popular storytelling with maps templates is the Shortlist, used for the Los Angeles ShortlistDC ShortlistPalm Springs ShortlistSan Diego Shortlist, and many others.

The template is a great way to present different categorized locations via tabs, and results are filtered based on the map extent as you pan and zoom. This popular template is easy to use, and we’ll take you through the steps to create your very own shortlist.

The project

For this project we’ll take a look at creating a shortlist like the Austin Shortlist.

The Steps

We’ll need to follow a few simple steps, outlined below. To successfully publish your shortlist 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 (public or subscription) to author and save the map used in the shortlist.

Step 1 – Download the shortlist template

Download the shortlist 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. More details about using the shortlist template are found in the Readme documents, and the sample folder contains source files for the shortlist (we’re streamlining things a bit in this tutorial). To complete our story map we’ll be editing the index.html file later.

Step 2 – Collect photos for each tab category

The shortlist organizes the content you want to display in tabs. These are actually layers in your map that you will turn on to view a particular topic. For example, the Austin Shortlist includes tabs to display places to visit for fun, food, and design.

You’ll need a thumbnail photograph or some other graphic image for each location on your map, for each tab category. These should be JPEG or PNG files sized 200 x 150 pixels (the generally recommended size for all pop-ups). A smaller version of your original will display in the thumbnail gallery for each tab, and the larger size will display in the details pop-up for each location.

Upload the photos to your web location so they can be referenced in the application via their URL. For example, below is the URL for one of those used in the shortlist in the Food tab:

Step 3 – Create a CSV file for each set of locations

In this example, we’ll use comma-separated value (CSV) files to store the information needed for each set of locations.  The CSV files will be used to create point layers in our map, and each layer will automatically become a tab in the shortlist. The template supports a maximum of 4 tabs. We’ll organize our CSVs by topic, and for our version of the Austin Shortlist we used three; food.csvfun.csv, and design.csv.

Note: The name of the CSV will be the text displayed in each tab, and cannot be changed after the CSV has been added to your map. Make sure that the name of each CSV is what is desired for each of the shortlist category tabs.

You can use Excel or any text editor to create the CSV files. 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 want. You can use addresses or lat/long locations, just add the appropriate fields as needed.

Required field names in each CSV are as follows:

Optional Fields:

Remember that you’ll also need the fields that contain either the lat/long or address for each location so that they can be added to your map.

Step 4 – Author your web map

Drag and drop the edited CSV files onto a map, or use Add, then Add Layer from File to add them. The order of the layers in your map will determine the order of the displayed tabs in the shortlist template (remember that there is a max of 4 tabs). Layers cannot be renamed, and the layer name must match the name of the CSV.

Zoom to your desired map extent, 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.

You can optionally add bookmarks to your map to enable users to zoom to specific locations, for example an area near downtown, a theater district, along a riverfront, etc. Bookmarks aren’t a requirement, but may be a nice addition to your shortlist. By default they will appear in the shortlist under “Zoom,” but the title can be change in the index.html (Step 5).

Symbols used in your web map and pop-ups will be ignored by the shortlist template, but since the map can be publicly discovered outside the context of the shortlist application, it’s a good idea to follow best practices and author a fully finished, and well-documented map.

Be sure to share your map publicly when finished. 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:

BOOKMARKS_ALIAS is the name of the choice that is displayed in the shortlist app if you have saved bookmarks in your web map. Change COLOR_ORDER if you want to alter the default colors for the tabbed locations in your map.

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 Austin Shortlist sample:

For more information

View the Readme file that is included with the map tour template download for more details and options, or visit the Esri Storytelling with Maps website.

About the author

Tech evangelist and product strategist at Esri, focusing on ways to broaden access to geographic information and helping users succeed with the ArcGIS Platform. On a good day I'm making a map, on a great day I'm on one. Follow @bernszukalski or email


Next Article

PerfTools (Build 122) for ArcGIS Pro 2.x is now available for download

Read this article