Adding links to captions in your Map Tour

The Storytelling Map Tour template is one of the most popular story map templates, combiningĀ an interactive map, a photo and text panel, and a thumbnail carousel to create a compelling virtual tour. A recent example is the Palm Springs Map Tour, but there’s lots of others; Treasures of Redlands, Mission Bay Marsh Reserve Tour, National Mall Tour, and more.

In a previous post we covered how to use the Map Tour template to build a tour of your own. A question we were asked was – how can I add a link to the caption under the photo? Here’s how.

Step 3 of the previous post explains the contents of the locations file – the CSV file you use to create the layer that appears on the map and drives the rest of the template. The Description is what appears as the caption underneath each photo in the photo and text panel, as shown below:

To add a link to the caption under a photo, you can use the <a> tag and href attribute in the description text in your CSV file. You can add this using a text editor or by editing the field contents in Excel. Note that if you’re quoting the caption string that you’ll need to use double quotes to get the single quotes needed in the <a> tag attributes.

You may also want to change the color of the link, and open the link in a new tab or window. Here’s an example caption which creates a yellow link and opens it in a new window:

“A map tour of historic locations and places of interest in Redlands, California. Click the arrow to advance to the next tour location, or click a thumbnail or location on the map for more information. <a href=”"”" style=”"color:yellow”" target=”"_blank”">Redlands Area Historical Society</a>”

Here’s the sample map tour using the description above. Note the link in the photo caption:

For more information and examples, visit the Storytelling with Maps website.

This entry was posted in ArcGIS Online, Story Maps and tagged , , , . Bookmark the permalink.

Leave a Reply

One Comment

  1. so.rasch says:

    From my experience it is not necessary (anymore?) to set double quotes inside the tag attributes.