Using custom HTML in classic Map Journal and Map Series

This article covers a topic related to the classic Esri Story Maps templates. Story authors are encouraged to use the current-generation ArcGIS StoryMaps to create stories. However, Esri will continue to maintain the classic templates for your use. For more information, see the Product road map.

In the classic Map Journal and Map Series builders, there is a Source button that allows an author to view and edit the HTML for the side panel. Using this feature, you can add your own HTML to style parts of the story.

The builders’ text editor source views only authorize HTML for elements that can be created through the editor’s toolbar buttons and a few other whitelisted tags and properties.

See the end of this article for a complete list of authorized tags and links to other articles with examples and ideas for how to use HTML to style your stories.

What can you do?

It’s important to know that when you save a section any unsupported tags and their content will be deleted or converted and replaced by a generic <p> tag. Since the editor has the potential to alter your code we suggest that you keep a copy of your markup in another text document.

Here are some guidelines to follow that can help you form code that will be allowed by the editor:

• You can create a class then define the appearance of the class using the <style> tag as shown below. There’s also another example of using classes in this blog post. You can also use the style attribute on any HTML element.

<p class=”p1">foo</p>
<style>.p1 { color: red; }</style>

• There are no limitations in term of CSS rules that are supported in the <style> tag.
• Using vector markup language via HTML will not work for creating graphics.
• CSS rules created with <style> tag are global, so it’s not necessary to duplicate them in every section; however, you can limit styles to specific sections. In the example below, a style is specified for the second section of the story.

 .section:nth-child(2) .p1 { }

Authorized Tags

The authorized tags for ArcGIS Online as of June 2018 are listed below. Note that tags for formatting supported by the builder editor are authorized and there are some differences between Journal and Series (e.g., strike-through and block quotes are supported in Journal, but not Series).

Most valid HTML can be pasted into the source view except for <script> tags. If there is another tag that you would like us to consider whitelisting in a future release, please submit an issue on GitHub with the tag name and how you are planning to use it.

• Formatting: <a>, <b>, <br>, <em>, <i>, <strong>, <s>, <sub>, <sup>, <style>, <u>
• Organization: <p>, <span>, <div>, <caption> (see usage notes)
• Heading: <h1> through <h6>
• Lists: <ol>, <ul>, <li>
• Tables: <table>, <tbody>, <tr>, <th>, <td>
• Menus/actions: <select>, <option>, <button> (Map Journal only)
• Images: <img>, <figure>, <figcaption> (see usage notes)
• Embeds: <iframe>, <audio>, <video> (see usage notes)

Usage notes:

• Although tags for lists, images, and embeds are supported, it is recommended that you add these types of content through the text editor insert tools, when possible.
• While the <div> tag is supported, the <p> tag should be used when possible since it is the editor’s preferred tag. Using a <div> tag inside a <p> tag (and vice versa) is known to cause issues.

Here are some articles with ways to use HTML to customize your story:

Create Buttons for Story Actions in Map Journal or Map Series

Move or Style the Story Action <BACK button in Map Journal or Map Series

This article was updated in June 2018.