Styling Map Tour text with HTML and CSS

Have you worked with Map Tour and noticed that everything is plain text? Would you like to insert line breaks, tweak the font size and color, maybe add a hyperlink?

While Map Tour is designed to encourage simple storytelling, it has a secret: The text editor also supports HTML and CSS. This means that for title and body text (and the cover page if you’re using the new side-panel layout) you can add some custom flair.

Left: Plain body text; Right: HTML/CSS styled body text.

So, you can keep it simple with plain text such as in this clear and concise Kilkieran Bay Marine Life Map Tour (left above); or if your story requires a little more flexibility you can style the text such as in this Palm Springs Map Tour (right above).

Example code snippet

Let’s look at the Seven Wonders Map Tours. We styled the text in three distinct sections:

  • A small line of text for factoids in the format “Country | Date | Civilization”
  • A standard size description paragraph
  • A small, gray image credit line with a link to the image source and license

We separated each section with a line break of white space; the title text remains unadorned and appears according to the default style.

The Seven Wonders Map Tours use HTML and CSS to apply unique text styling.

In its code form, the HTML and CSS styling looks like this:

<div style=”font-size:90%”>China | 220 BC | Qin, Ming Chinese</div> <br>
<p>Once called the “long walls,” the Great Wall extends over 5,500 miles, from the Yellow Sea in the east to the Taklamakan Desert in the West. It was so extensive, in fact, that new segments are still being revealed. Built for transportation and customs control as much as for defense, the walls were joined into a unified system under the Qin Dynasty in the 3rd century BC, but most of the present-day remains were constructed during the Ming Dynasty in the 14th century AD. Modern travelers can find the most iconic sections of restored wall about two hours from Beijing.</p>
<br>
<div style=”font-size:90%; color:#a9a9a9">Image: Adapted from <a href=”https://unsplash.com/photos/hB_nkwIw5f4" style=”color:#b3c7df”>William Christen</a> (Unsplash).</div>

To build this story, I can copy the above snippet as-is and paste it into the text editor of Map Tour’s builder. While the text editor is activated I’m able to see the attribute tags written out, but when I close the text editor the coded attributes are applied as visual styling.

Allowed HTML tags and other caveats

There’s a few things to keep in mind while working with custom styling in Map Tour.

  • Check ArcGIS Online Help’s page of Supported HTML attributes to avoid errors of unsupported (or incorrect) HTML. While Map Tour may initially save unsupported HTML, it could be removed without notice in the future.
  • Map Tour’s text editor enforces a limit of 968 characters; this applies equally to HTML/CSS attribute tags as it does to body text.
  • To future proof your stories, try and stick with only those attributes supported in HTML5. W3Schools.com is a fantastic resource for keeping track of current and deprecated HTML attributes.

If you’re looking for additional resources, we’ve previously blogged about adding links to captions in Story Maps, and we’ve discussed tour captions in our FAQs.