Using custom HTML in Map Journal and Map Series

Owen Evans
Mar 30, 2016 · 3 min read

In the 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:

This article was updated in June 2018.

Story Maps Developers' Corner

Learn best practices, read quick tips, and discover new ways to make your story map stand out from the crowd. Start creating your story at: http://storymaps.arcgis.com

Owen Evans

Written by

Product Engineer on Esri's Story Maps Development Team.

Story Maps Developers' Corner

Learn best practices, read quick tips, and discover new ways to make your story map stand out from the crowd. Start creating your story at: http://storymaps.arcgis.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade