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.
For this project we’ll take a look at creating a shortlist like the Austin Shortlist.
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.csv, fun.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:
- Number – the number each location is given on the map. The maximum number of features allowed is 99.
- Title – the name assigned to each location.
- Short_Desc – a short description of the location. This text will appear in the pop-up, and should be kept very short.
- Desc1 – the description for each location that appears in the details panel. See optional additional description fields below.
- Image_URL – the full URL to the photo or graphic to display for each location.
- Desc2 through Desc5 – optional text, displayed in separate paragraphs, that appears in the details panel. These fields can be empty or omitted if not needed.
- Hours – the hours of operation of the business at the location. Can be empty or omitted.
- Website – the website associated with the location. Can be empty or omitted.
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