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.
This post assumes that:
- you have an ArcGIS Online Account
- 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!
|<tt></tt>||Teletype font (typewriter text)|
|<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)|
|<img src=”URL” align=”left”>||Insert image with alignment options|
<li> (Item 1 in a list)
<li> (Item 2 in a list)
<li> (Item 1 in a list)
<li> (Item 2 in a list)
Text of the definition list
|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).
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.
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.
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:
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.
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.
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.
It would be better if the scientific name was placed on the next line. This can be achieved using the PARAGRAPH tag <p></p>.
Next we will underline the scientific name text. Care is taken to place a space between the colon and the scientific name.
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.
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…
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:
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:
Now we can also override the template’s link colour property by adding this href attribute value style=”color: #ffff33″
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.
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.
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.
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:
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:
Result (note the indentation!):
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.