The technical part of making a Story Map Shortlist℠ is easy. The hard part is deciding what places you want to show, writing useful and engaging descriptive text about them, and getting nice pictures. Although, that's the fun part too.
In the steps below, you'll assemble the places you want to feature in your Shortlist as point layers in a web map. Each point layer in your web map contains the places for one tab in your Shortlist. Alternatively, you also have the option to define all the Shortlist tabs from a single point layer.
For each place, the point layers contain descriptive text and a URL to a picture (such as a JPG or PNG). The picture files can be stored anywhere on the web as long as they are accessible directly via a URL. The recommended image size and shape for best appearance and performance is 280 pixels wide by 210 pixels tall. Shortlists look best when all the images are the same size and shape. You can add your point layers into your web map as CSV files (which you can create using a spreadsheet or by exporting tables from ArcMap), as shapefiles, or as feature services.
You'll then install the template on a publicly accessible website or web server, and configure the template to point to the web map you created.
Follow the steps below to create your Shortlist. If you need help, tips, or complete documentation, see the README PDF file that comes with the template download.
Download the Shortlist template and extract it anywhere on your computer. To test your Shortlist on your computer before deploying it, you can use a local testing server such as Internet Information Services on Windows, in which case you can extract the template into your \wwwroot folder.
In the \Samples folder in the download, use one of the sample files as a template for assembling each of your Shortlist point layers. There are two sets of sample files depending on whether you want to create one point layer to define each of your tabs, or define all your tabs using a single point layer. In both sets you will find different sample files depending on whether you want to use the default Shortlist pop-up style, which only displays a few attributes, or allow users to launch the optional Details panel from the pop-ups, which displays more attributes. To use Excel to assemble a CSV file, choose one of the three Excel files depending on how you want to specify the location of your points (you can specify lat/long coordinates, a street address in a single field, or a street address in four fields). If you have ArcMap, you can edit the Points feature class to create your points and either publish it to ArcGIS Online as a feature service (requires an organizational account) or export that layer's attribute table to a CSV file. There's also a Points shapefile you can edit to create your point layers. You can have a maximum of 200 places in each of your point layers.
Log in to ArcGIS Online using a free public account or an organizational account, and create a new web map. Choose the basemap you want to use.
Add your point layer(s) into your web map. If you are using one point layer per tab, the names of the layers and the order they are listed in your map are used by the Shortlist for your tabs. The screenshot here shows four point layers added to the web map, which will each define one tab in the Shortlist. If you have chosen the option to use one point layer to define all the tabs, the names of the tabs and the order they appear are defined by the TAB_NAME field in that layer. You don't need to symbolize these layers or configure popups for them because the Shortlist template does that automatically.
Optionally, your Shortlist map can contain additional supporting point, line, or polygon layers, such as trolley stations, transit lines, or neighborhood boundaries. If you want users to be able to click the features in these supporting layers to get information about them, create the layers as shapefiles, feature services or CSV files using the files in the \Samples folder as templates, and add them into your web map. The screenshot here shows two supporting layers added into the web map. You don't need to configure pop-ups for these layers because the template handles that, but symbolize them in your web map the way you want them to look in your Shortlist.
Optionally, add bookmarks to your web map. These appear in a menu on the right side of your Shortlist that people can use to zoom to particular areas on your map. Don't use too many bookmarks, and don't add them for areas where there are few or none of your places, because the Shortlist tabs will look empty. If you do not specify any bookmarks, the menu is automatically hidden.
In your web map, zoom and pan to the area you want users to see when they first open your Shortlist, and save your map. The title you save your map as is used as the title of your Shortlist, and the summary is used as the subtitle.
Make your web map public. The Shortlist template expects that the web map you use is publicly accessible.
Copy the contents of the Shortlist template download (minus the \Samples folder, which isn't needed) onto a publicly accessible website or web server. This can be a web server that you or your organization maintains, or it can be a folder on a shared or hosted web server that you use for your website. In an enterprise situation, you can have a system administrator load the files onto a server. The location of the template's index.html file on your website or web server defines the URL that is used to access your Shortlist.
Configure the Shortlist template to use your web map by editing the index.html file. You can open this file in the editor of your choice. In the Config section of the file, edit the WEBMAP_ID variable to be the ID of your web map. You can copy this ID from the URL used to access your web map. If you've chosen to use the separate Details panel for your popups, set the DETAILS_PANEL variable to true. Optionally, you can also edit the BOOKMARKS_ALIAS variable to change the name of the Zoom menu, edit the COLOR_ORDER variable to control which of the four Shortlist point symbol colors are used by each tab, and set the GEOLOCATOR variable to true if you want a button to appear on your Shortlist map that lets users find their current location. In Step 5 above if you added any supporting layers that you want your users to be able to click to get more information, specify the names of those layers in the SUPPORTING_LAYERS_THAT_ARE_CLICKABLE variable. Save the index.html file.
Congratulations, your Shortlist is now operational.