Format place descriptions for data driven map tours using HTML

[OwenGeo]

In a previous post, we shared how to use Arcade to combine information from several feature layer fields into a new field that can be used for a map tour description. The process in that blog works well when your tour requires a short description, but you can take this to the next level and use HTML formatting if your tour places need longer descriptions with multiple paragraphs, lists, and links. 

It’s easy to create a nicely formatted description field for your data driven map tour using some basic HTML. There are several ways you can do this. If you are starting with data in a spreadsheet or CSV, you can do the calculations in your favorite spreadsheet app such as Excel or Google Sheets. If you already have a feature layer, you can use the field calculator on the Data tab of the feature layer’s item page.

Anatomy of a description field 

The goal is to produce a single field that includes all the text needed for your description and any required formatting using HTML markup. The HTML will be parsed when your tour is shown, so your readers won’t see the HTML tags, they will see the result of the formatting applied by the markup. 

Here’s a simple example. If you create a description that looks like this: 

<p>This is the first paragraph.</p><p><a href="https://example.com">This is a link</a></p> 

It will look like this in the map tour: 

This is the first paragraph. 

This is a link 

Here's a screenshot of a more robust concatenated description in a map tour. You can view this feature layer and inspect the "Full description" field to see the field information needed for this description:
Great Places Shortlist layer - Data.

Calculating the description 

First, add a new column for your calculated description and give it a name. 

Next, construct the formula you need to calculate the values for your new field. You’ll simply string together information from existing fields along with HTML tags. To calculate values for your description field you can use Arcade functions such as CONCATENATE or the & operator in your favorite spreadsheet tool. 

To structure your description, you can include HTML tags for paragraphs (p), lists (ol, ul, and li), and line breaks (br). For formatting, you can include bold (b or strong), italic (i or em), superscript (sup), subscript (sub), and links (a).  Link tags support the href and target attributes.

You may also need to include spaces or other punctuation, depending on how your existing information is stored or formatted. In a spreadsheet, be sure to use double quotes around any text or HTML markup you add since you’ll want that text to be added as-is to the calculated field. In Arcade, you use single quotes for this. If you are using links and need to include double quotes in your calculated formula, make sure you use extra double quotes as escape characters.

Examples

Below are a few examples of the syntax you’ll need to use. 

In a spreadsheet, combine info from column A and column B (in row 2) as separate paragraphs: 

="<p>"&A2&"</p><p>"&B2"&"</p>" 

In a spreadsheet, combine info from column A and column B as a single paragraph (with a period and space between them) and column C as a second paragraph: 

="<p>"&A2&". "&B2&"</p><p>"&C2&"</p>" 

In a spreadsheet, start with info from column A and add a link using a URL in column B (which opens in a new tab) and has "More info" as the link text.

="<p>"&A2&"<p><a href="""&B2&""" target=""_blank"">More info</a></p>"

Using the field calculator with Arcade, include info in fields named Paragraph1 and Paragraph2 as the first two paragraphs, and include a third paragraph that contains a hyperlink using the text “Website Link” and the URL stored in a field named “URL”. 

Concatenate(['<p>', $feature.Paragraph1, '</p><p>', $feature.Paragraph2, '</p><p><a href=“’, $feature.URL, ‘ >Website Link</a></p>’]) 

Resources 

If you need a primer on basic HTML, here are some good resources. 

• https://www.w3schools.com/html/html_paragraphs.asp 
• https://www.w3schools.com/html/html_lists.asp
• https://www.w3schools.com/html/html_links.asp 
• https://www.w3schools.com/html/html_formatting.asp 

More info on map tours. 

• Use — or create — a feature service to build a map tour in ArcGIS StoryMaps
• Create a data-driven map tour
• Using ArcGIS Arcade to your story's advantage 

[JanetBrewster1]

@OwenGeo 

Hi Owen,

Thanks -- this is interesting and helpful. I wasn't able to get into the Great Places Shortlist, it was restricted. I was hoping to be able to see the Arcade and html used. Any way to get access to that?

Also, as I experiment with Arcade to concatenate text within a new field, I'm finding that my calculated description isn't saved. The new field is updated with the concatenated text, but I can't go back in and adjust it -- when I click on the field header and go to "Calculate", it's empty, what I had initially put in there is gone. Sure would be nice if I didn't have to recreate it every time. Or am I missing something?

Janet

[OwenGeo]

@JanetBrewster1 - Sorry for the difficulty. The sharing of the great places shortlist layer has been updated to make it available again.

I believe that is the currently expected behavior of the field calculator. If you'd like to suggest that your previous Arcade expression is saved, please submit that as an idea on the ArcGIS Online Ideas Board.

[MayraHernandez]

Hello, 

I'm working on a story map that uses the Map Tour block with the Grid layout, and I've run into a snag when trying to include hyperlinks in the place descriptions. I added a new field in my feature layer to hold: <p>This is the first paragraph.</p><p><a href="https://example.com”>This is a link</a></p> 

 However, when the tour displays, it just shows the HTML example instead of rendering as a clickable link. Is this a limitation of the Grid layout? Or am I missing a step in how to enable HTML formatting for these descriptions? Any insight or workarounds would be much appreciated. 

Thank you,

Mayra 

[OwenGeo]

@MayraHernandez -- It looks like you are using curly quotes inside your <a> tag. Be sure to always use straight quotes inside your HTML.

It also looks like there is an error in your screenshot where you have a partial <p> tag.

Hopefully addressing those items will get this to work as you expect.

[MayraHernandez]

Ah, good catch, thanks for pointing that out! I actually copy pasted the HTML from the example given under "Anatomy of a description field", so I didn't notice the curly quotes. I switched them out for straight quotes, and it worked!

Thank you!

Mayra

 

[OwenGeo]

Oof! Thanks for pointing that out! That sample code has been updated.