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.

Screenshot 2025-05-08 at 10.42.59 PM.jpg

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 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.

More info on map tours.