Enhancing ArcGIS Online Story Maps with HTML

Posted on Updated on

Share your story with a map, on a map. Then make it great.

This post is for those who have dabbled in the world of Esri’s ArcGIS Online, specifically the Story Map templates, and perhaps beginning to explore ways in which to enhance the presentation of your maps. This article demonstrates some simple strategies to enhance your Story Map web applications using simple HTML constructs.

Background

This post assumes that:

  1. you have an ArcGIS Online Account
  2. you have published at least one web application through ArcGIS Online and therefore familiar with working with ArcGIS Online Story Maps.

For this article a Story Map was created using the popular Map Tour Template. To get going straight away, the Map Tour Template “Builder” can be launched directly from here:

What this does is create a web map using the default base map and immediately “publishes” this as a web application via the Map Tour Template, which is loaded in “Builder” mode. This post does not elaborate on the methods applied to “build” the web app and publish it, but rather focuses just on the use of HTML constructs, specifically for formatting text. If you are interested in building a Story Map in this way you may like to first review How I created a Story Map using the ArcGIS Online Map tour Template, a mobile phone and Flickr.

Below is a table of the HTML tags that have proven useful for various formatting effects. The list is certainly not exhaustive and some of the tags below have further options (called attributes), so once you are familiar with the principles of the HTML examples below you may like to research further each tag and expand your knowledge toolset!

HTML tags Description
<b></b> Bold
<i></i> Italic
<u></u> Underline
<strike></strike> Strike
<sup></sup> Superscript
<sub></sub> Subscript
<q></q> Quote
<hr></hr> Horizontal rule
<tt></tt> Teletype font (typewriter text)
<font color=”#xxxxxx”>  
<font size=”?”> Font size (values 1 to 7 or +/- value)
<center></center> Centre justify text
<p></p> Create a new paragraph
<br></br> Insert a break (new line)
<a href=”mailto:text@text.com”>Email</a> Email
<a href=”http://www.google.com”>Google</a> Hyperlink
<img src=”URL” align=”left”> Insert image with alignment options
&cent; Cent symbol
&copy; Copyright Symbol
&reg; Registered trademark
&trade; Trademark
<ul>
   <li>     (Item 1 in a list)
   <li>     (Item 2 in a list)
</ul>
Unordered list
<ol>
   <li>     (Item 1 in a list)
   <li>     (Item 2 in a list)
</ol>
Ordered list
<dl>
   <dt>
      Text
   <dd>
      Text of the definition list
</dl>
Definition list with backward hanging indent

 

HTML Examples in Action

The screen shots used below are from a temporary site used to create this post, but just for context I’ve used a photo of a small fungus I found while visiting the remote town of Jabiru, located in Kakadu National Park, Northern Territory. The photo was taken with a mobile phone (Samsung Galaxy Note II).

image

There are two main areas on the Map Tour where HTML may be used to achieve a certain desired effect. These are the top-left header and also the Map Tour photo point header and caption.

image

For the top left header, a selection of HTML tags may be used. These included bold, italics, underline, strikethrough, superscript, subscript, “quote”, links (for example <a href=”URL”>) and any symbols such as °C or ©. As you have more space within the caption area you can be much more creative, and include ordered lists, horizontal rules and other tags that span multiple lines.

Bold <b></b>

So let’s start with something simple. I’d like to add the sentence “This fungus was photographed in January at Jabiru, in the heart of Kakadu National Park. It was a very HOT day”, like so:

image

Result:

image

However I would like for the word HOT to be BOLD. This is achieved with the <b></b> tag. The correct formatting (syntax) for this is shown below.

image

Result:

image

Colour <font color=”xxxxxx”></font>

Next, I’d like to make the word HOT appear red, as in HOT. For this we use the <FONT> tag with the COLOR attribute. Colours can be any of the web safe colours such as “red”, “green”, “blue” and many others. Actually there are 140 colour names available and any of these colour names can be used (for more details refer http://www.w3schools.com/html/html_colornames.asp). You may use the names or the corresponding hexadecimal value. For the colour “red” the hexadecimal value is #ff0000.

image

Result:

image

Italics <i></i>

For argument sake, let’s assume that the scientific name of the fungus is “Funjuice disgustingii”. Now we all know that scientific names of organisms follow the rules of binomial nomenclature. The first name is the genus, the second the species. The genus always begins with a capital letter and the entire name is italicised. So at the end of my sentence I will add “Scientific name: Funjuice disgustingii” – italicising the scientific name using the <i></i> tag.

image

Result:

image

Paragraph <p></p>

It would be better if the scientific name was placed on the next line. This can be achieved using the PARAGRAPH tag <p></p>.

image

Result:

image

Underline <u></u>

Next we will underline the scientific name text. Care is taken to place a space between the colon and the scientific name.

image

Result:

image

Horizontal Rule <hr>

A horizontal rule places a line the full width of the frame. To demonstrate this a horizontal rule will be placed below the scientific name.

image

Result:

image

Centre <centre>

Below the horizontal rule we will add some further information including credits, links, email and copyright. This information will all be centred. So the first piece of text to be added will be “Photo credit: Anthony O’Flaherty”. This text will be centred using the HTML tag <center>. Note the American spelling for CENTER…

image

Result:

image

Font size <font size=”?”>

The photo credits and other details below the horizontal line do not need to be a big as the main text. I could use the <font size=”?”> tag to specify an absolute size, anywhere from 1 to 7, however in this app I don’t really know what the text size is and actually all I need is for it to be smaller.  Therefore, I can simply enter in some value smaller or larger than the main body text, for example, 1pt smaller or 3pts larger. After experimenting I settled on “-2”, like so:

image

Result:

image

Email <a href=”mailto:x@x”></a>

In this next step an email link is to be added to the name. This is similar to a normal link except for the “mailto:” element. The syntax is as follows:

image

Result:

image

Now we can also override the template’s link colour property by adding this href attribute value style=”color: #ffff33″

image

Result:

image

Hyperlinks <a href></a>

A hyperlink is usually created as a link to another web page or web site, but could be used to link to documents or files, provided that the site visitor has access to them. A hyperlink is easily created, much like an email link, however it is important to keep your visitors on your map tour and that any links that are clicked are directed to open in a new browser window. This ensures that a visitor can be directed to view the linked content and simply return to your Map Tour when ready.

Here a link is created (on a new line) to the Wikipedia entry for Fungus.

image

Result:

image

The <a href> attribute value of target will be added so that when clicked the action will be to open the link in a new browser.

image

The result appears exactly as above however the link will open in a new tab.

Insert an Image <img src=”URL”>

In this example an image will be placed inside the Map Tour point header area, together with a title. The image could be a photo or even a logo. Firstly, the title in entered: Fungi @ Jabiru. This is followed by a paragraph tag <p> to force the image onto the next line. A URL for a photo stored on Flickr (a photo sharing website) is inserted. This is a photo of where the fungi was found, directly next to a hotel! The syntax is simply <img src=”URL”> – just remember to add the </p> at the end.

image

Result:

image

You can also use any of the examples above to change the colour of the title, insert hyperlinks and incorporate other exciting and creative options.

Unordered List <ul></ul>

An unordered or bulleted list may prove useful if you a small paragraph and just a few dot points. The caption above is getting a little busy so I’ve cleaned up in order to present this effectively. The syntax for a bulleted list is as follows:

image

Result:

image

Ordered List <ol></ol>

The obvious alternative to an unordered list is of course an ordered (or numbered) list. Using the same example as above:

image

Result (note the indentation!):

image

Summary

As demonstrated above there are many ways that you can enhance an ArcGIS Online Story Map by incorporating some simple HTML tags. The key is to not make your Map Tour points too “busy” but rather make subtle use of these ideas where needed.

Advertisements

7 thoughts on “Enhancing ArcGIS Online Story Maps with HTML

    Jon M said:
    07/02/2014 at 8:24 am

    Thanks for all the helpful tips for using HTML for customizing story maps. I’ve run into an issue where some of my HTML customizations only appear when viewing the story map in viewer mode, for instance with unordered lists. In builder mode it looks great! Then when I view the application outside of builder mode the bullets from the list are gone. Any suggestions on how to remedy this issue would be greatly appreciated. Thanks!

      Anthony O'Flaherty responded:
      07/02/2014 at 9:12 am

      Thanks Jon! Hmmmm Have you tried the usual IE, Chrome etc to see if it is a browser issue and are they current versions? I’m just wondering if it’s a browser version + HTML version thing. You’ve certainly got me experimenting now! I’ll update my post in coming days with any findings and let you know.

    @DaveAtCOGS said:
    13/02/2014 at 12:36 am

    This is a treasure-store of information! I used many of the above to create http://bit.ly/TwitterSochi, which displays twitter timelines for 60+ world-wide broadcasters during Sochi Olympics. Thanks very much!

    Anthony O'Flaherty responded:
    13/02/2014 at 10:27 am

    Great work re http://bit.ly/TwitterSochi @DaveAtCOGS – some interesting and “entertaining” tweets for sure!

    Alicia said:
    10/01/2015 at 4:38 am

    Thank you for that post! I’m a new GIS student and we had to make a storymap. I found it very annoying I couldn’t change font or text, but this fixed that pretty much. I shared it with other classmates and bookmarked your page as your knowledge may continue to come in handy in the future! Alicia

      Anthony O'Flaherty responded:
      10/01/2015 at 11:26 am

      Thanks, glad you liked it!

    Johnk89 said:
    18/05/2015 at 12:45 am

    This is really attentiongrabbing, You’re a very professional blogger. I have joined your rss feed and sit up for in search of extra of your fantastic post. Also, I have shared your site in my social networks! dbkdbceecckc

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s