How I created a Story Map using the ArcGIS Online Map Tour Template, a mobile phone and Flickr

Posted on Updated on

cemetery

Cemeteries of the Northern Territory

If a picture speaks a 1000 words, then a map must speak 10,000. Combine a map with cemeteries and you have a lifetime of stories…

Background

A year ago I was not familiar with the term “Story Map”, but rather I concerned myself with creating maps to tell a story. Same thing isn’t it? Most GIS people and others with an interest in mapping are absolutely familiar with the concept of using a map to convey information, such as a tourism brochure for your local National Park, or a facilities and services map you pick up from your local council. Maps are complex things, they are made up of many different layers of information, and often each object on the map is connected to further information. For example, a lake will have a name, and perhaps opening and closing times, and what activities are allowable such as fishing, boating, etc. Software such as Geographic Information Systems (GIS) enables us to explore and analyse the rich geography around us.

There are many different types of maps and each map has a purpose, each with the aim of conveying particular information about an area to a group of people. A map that is deemed successful at achieving its purpose has just the right balance of information, presented at the right scale, with colours, symbols and line types that together are aesthetic to the eye. Naturally, different people interpret maps differently, so the challenge for map makers is to create a map that maximises the intended interpretation, and hopefully some appreciation too. For example, a tourism map for Kakadu National Park here in the Northern Territory can be a wonderfully artistic masterpiece, but it also needs to alert visitors to safety issues such as the very real threat of crocodiles, intolerable heat and vast distances between services. Such a map is required to promote and maximise tourism potential, and by doing so also needs to keep the visitors safe and well. After all if they are consumed by a crocodile they will not be returning, nor will the consumed be able to share their positive experiences with other potential visitors!

With Esri Story Maps the process of building a map to tell that story is simplified. An online map can be created quickly, effectively and with creativity. This article specifically presents the steps to quickly create a Story Map using the Map Tour Template available with an ArcGIS Online subscription. In addition, all you need to create your own is a mobile phone, a free Flickr account, and your own theme or idea.

Identifying a theme

This particular Story Map began after a visit to the George Brown Darwin Botanic Gardens. Opposite lies the historic Gardens Road Cemetery. In idyllic surrounds, this cemetery offers a wealth of local and world history as it is the burial site of some notable Territorians, reflects a diverse multicultural society and is also the resting place for many who died during WWII. After some preliminary research on the City of Darwin Council website and other sources such as the Genealogical Society of the Northern Territory, Inc. it was identified that a map interface to the Cemeteries of the Northern Territory would be a valuable tool for a wide range of reasons, such as supporting family history research, tourists, even 4WD enthusiasts who perhaps are out to retrace the steps of early settlers, but most of all to assist the people of the NT and beyond to understand and be aware of these historic places.

To maximise success of a theme for your Story Map you will need to:

  1. Keep your theme focused. The idea of a Story Map is to present something simply, cleanly and effectively. You see, it’s all about sharing information in a way that leads the reader from one part of a map to the next, like a story. Avoid multiple or otherwise busy themes.
  2. Minimise scope: Most Story Maps contain 10 – 30 + items (pictures, videos or photographs) but can increase to 100 or more items. Think about what a visitor to your Story Map would expect and how long they will likely spend on your site. Just as in a book, you don’t want your reader to get to page 9 and put the book down.

Have you thought of a theme yet? Here’s a couple of ideas to get you thinking:

There are many examples here Storytelling with Maps – a gallery of Esri Story Maps  and there’s also this World Map of Story Maps.

Having a theme or an idea is all you need to get started. Grab your fully charged mobile phone and head off…

Collecting images

Collecting, processing and organising images for your Story Map is the most time consuming aspect of the whole process. I chose to use my Samsung Galaxy Note II because of the large screen size and for a phone, camera quality is very good. In the field I always take multiple photos of the site and subjects and I avoid using any special effects in the field to save time. The focus remains on quality photos, and as many mobile phone cameras have shortfalls over traditional digital cameras, you need to maximise your attention on photography skills such as composition, angle and focus. Some good tips for mobile phone photography:

  • Keep the lens clean.
  • Maximise camera resolution. You can always reduce resolution later if necessary. You may also have a setting for image quality too, which needs to be set at superfine.
  • Turn on GPS tag. This adds coordinates to the exif data associated with each picture. You don’t really need this as you can place your photos on the map manually later, but you can also import geotagged photos into ArcGIS Online directly.  Geotagged photos are also useful for a wide variety of other web applications (eg. Facebook). Generally you will need to turn on GPS tracking through your general phone settings but you may also need to check the camera settings to ensure photos will be geotagged.
  • When you take a photo, use the Rule of Thirds. Most cameras and phones have the option of adding in a nine section grid to your photographs, which easily allows you to break down the photo into thirds. Important compositional elements should be placed along these lines or their intersections.
  • Get up close and personal. Experiment with taking photos close to the subject, from different angles. Consider taking a shot from ground level, or holding the phone up high for an oblique angle.
  • Take more pictures than you think you’ll need. Take photos of signs with useful information, panoramas (you can stitch photos together using something like Microsoft ICE), or simply photos that will assist you to remember where you were. This will help when reviewing and organising your photos later.
  • Keep the sun behind you. Take note of where light is coming from. Move around the subject to maximise the effect of light.

These are just a few tips and you can find many more by exploring the web using “amateur photography” as the search criteria.

Once you have visited each site location for your Story Map and taken the photos your require you are ready to prepare your photos for the Map Tour.

Uploading images to Flickr

There are many good ways to organise your photos, either on your computer or with an online account with one of several photo sharing sites, such as Flickr or Picasa. Flickr offer a free account, with upgrade options for heavy users. There is also a mobile phone app available for both Android and iOS. If you use the mobile phone app you can upload your photos as you go. Personally, I usually prefer to transfer my photos to my PC first, and place each photo collection in a folder by month by year. That way I have a local “master” copy, and can more carefully upload my photos to where I need them.

Navigate to www.flickr.com and either create a new account or sign in. You can also sign in with a Facebook or Google account.

In Flickr, photos are organised into sets, and sets are organised into collections. In the example of Cemeteries of the Northern Territory a unique photo set was created for each cemetery. After organising photos into relevant folders on your PC one of the quickest ways to create a new set is to select the upload button and drag and drop all relevant photos onto the screen. You can then add a brief description to all photos at the same time (I used the name of the cemetery) and also create a new set and add all the photos to that set. When ready simply hit Upload. This may take a few minutes.

upload

If you return to your home page you can browse your sets, and if you select a set that set will have its own URL, such as this for the Palmerston Cemetery: http://www.flickr.com/photos/gisissocool/sets/72157639455143186/

Enhance your photos online

Now that your photos are online, you can improve each image using the tools and apps available within Flickr, such as Aviary. Aviary is also a standalone app available on both android and iOS phones. Aviary can be used to perform common photo editing tasks such as crop, add effects, set focused and blurred areas, and much more. This too can be time consuming and care should be taken to apply some common consistency in effects applied to a photo set that is to be used by a Story Map. Multiple effects and styles can make your presentation appear cluttered and confusing.

From each set of photos you will need to select one good eye catching photo that the Story Map visitor will see. All other images will be available to them by clicking on a hyperlink to the Flickr set. This image should be visually appealing, and using Aviary you will be able to achieve a range of effects. Here’s a result for one image taken at Palmerston Cemetery:

Before:

20140103_143715

After:

palmerston cemetery

There are forums aplenty and help topics within Flickr to assist you with photo editing, and also various YouTube videos.

Create the Web Application

This next step requires that you have an ArcGIS Online Account. If you have an Organisational Account, use the login and password supplied to you. Alternatively you may use a free Public Account or you may even sign up for a 30-Day Free Trial Organizational Account.

To create the Story Map using the Map Tour Template, there are two ways to get started:

  1. Login to your ArcGIS Online Account, create a web map, then publish the web map as a web application using the Map Tour Template, then configure the template with your tour points;
  2. Use the established direct link to the Map Tour Template Builder and start building the Map Tour immediately.

Option 2 above is a far more streamlined approach to publishing an ArcGIS Online Web App. Here is a DIRECT link to the Map Tour Builder available on ArcGIS online:

Following this link you will be prompted to login to your ArcGIS Online Account and you will be immediately redirected to the Map Tour Builder.

clip_image002

In this example I will select the Advanced options link so that I can manually create the Map Tour.

clip_image004

This will load a rather empty looking Map Tour template in “Builder” mode.

clip_image006

Hit the Settings button and on the first tab, change the layout to Integrated Layout.  Also check the Display a ‘Locate’ button. This will ensure that users accessing the web map via a mobile device will be able to see their location on the map.

clip_image007

On the next tab, apply a colour set, perhaps using your organisation’s corporate colours. This may require some experimentation, or simply use one of the defaults.

clip_image008

On the next tab, edit the header information in the top right panel as required. You also have the option to select which social media options are available to visitors. These should be included if you want to promote sharing of your content.

clip_image009

On the Data tab, accept the data defaults. The template manages this for you.

clip_image010

On the Extent tab there are several tools to assist you in determining the best map extent. The cemeteries in and around Darwin experience far more visitation than others in the Northern Territory, so I’ve set the initial extent to the Greater Darwin area. This takes a little experimentation. Note: The map will move and zoom to each photo point as the user clicks through the carousel of cemetery locations (the carousel is the scroll of thumbnails at the bottom of the screen).

clip_image011

Finally, the Zoom Level tab allows you to specify the zoom scale for story points once the user selects a point following the introduction. This will depend on your data and will require a little experimentation. For this example 1:36K or 1 is to 36,000 has been selected. Hit Apply.

clip_image012

On the top-left panel, edit both the Heading and Sub-heading.

clip_image013

For example:

clip_image015

When ready hit SAVE. You should SAVE YOUR WORK REGULARLY.

clip_image016

Upon your first save you are provided with a bit.ly URL that will allow you to return directly to the authoring page at any time (a bit.ly URL is an abbreviated version of the formal URL, making it easier for access and distribution). Copy and past the bit.ly URL and save it somewhere for future reference. I keep all my URLs in a text file (Notepad).

clip_image017

If you need to return to your Map our in Builder mode at a later time you can also login to your ArcGIS Online Account and navigate to your Map Tour web application.

The next step is to begin adding in some photos at different locations. The FIRST Map Tour point will be an introduction, providing an introductory note and photo.

To add Map Tour points you will need the direct “static” URL links to your individual photos store on Flickr for each photo point in your Map Tour. Within Flickr, navigate to the relevant set, then select the photo you want to use as a photo point in your Map Tour. Select the Share option, then the thumbtack icon and carefully select out the URL for the static image. If in doubt select out and copy (Ctrl + C; or right click –> Copy) the entire link information and paste into Notepad and select out the URL from there. Also, there are a few ways to do this and online systems do change, so it may be worth reading some Flickr how to’s on this topic.

clip_image018

The URL in the image above actually reads [url=http://flic.kr/p/iXJXNM][img]http://farm6.staticflickr.com/5517/11788854773_b78c1a608c.jpg[/img][/url]

Select out the URL you need (in bold above) and use that, for example:

http://farm6.staticflickr.com/5517/11788854773_b78c1a608c.jpg

Note also that this is for a stored static image of 500 x 375 pixels (look closely at the graphic above). It’s best not to increase the resolution option as this will only slow down your map tour (Flickr will provide a different URL for different resolutions of your pictures). Your visitors can visit any high quality images or versions of this image on Flickr anyway!

Having selected the URL, return to the Map Tour Template. Select the Add button at the bottom of the screen.

clip_image019

Enter the same link for the Picture and the Thumbnail. The template will manage the resolution. Note: you could create a corresponding thumbnail set too! This might be required if you want to apply a different effect to the thumbnail set.

clip_image020

On the next tab, enter in any information you have that you would like as part of the story. This can be added or edited later if you need to do more research. As mentioned above, this first Map Tour point will be an introduction.

clip_image021

In the above caption there is a HTML tag that provides a hyperlink to another site. This is so that after reading the welcoming note visitors know where they can go for further information.

The general syntax is:

<a href=”URL”>textthattheusersees</a>

For example:

<a href=”http://www.gsnt.org.au”>Genealogical Society of the NT</a>

In this first image this item does not reference a particular location on the map but rather it is intended to behave as an introductory slide. For that reason the marker has been placed in the CBD for future reference. In the next step this point will be tagged as an introduction point so that it does not show up in the carousel at the bottom of the page.

clip_image022

As can be seen below, the first Map Tour point is now visible, but it is also visible in the carousel. The map marker icon and icon location can be changed, too.

clip_image024

Select the Organize button above the carousel. As you can see, the order of tour points can be changed, but most importantly, you can select one tour point and tag this as an introduction, meaning that the map tour point will not display on the map itself or the carousel, and the tour will begin at Map Tour point 2.

clip_image025

clip_image026

After selecting the map tour point, the check-box above is selected.

Hit Apply. This is also a good time to SAVE.

Repeating the steps above, return your Flickr account and select the image for your next map tour point (your 2nd point, but the first point to appear on the map). Select and copy the URL.

Again click the Add button on the carousel.

This first Map Tour point is specific to a cemetery, and as above provide a title, a caption, and a location.  The caption can include an external link to the photo set for this cemetery on Flickr. The City of Darwin Council also has some information about this cemetery on their website so an additional link to that too will provide further information for visitors.  The links take this form:

16-01-2014 4-50-33 PM

The links look something like this to the user:

16-01-2014 4-51-56 BIf

Your first Map Tour point appears in the carousel (and the introduction point is hidden – note the Intro button top-left).

clip_image032

You can continue to add Map Tour points until your story is told. In the figure below I also logged in to the AGOL account, located the corresponding web map, created a new layer, and created the route I took when visiting cemeteries around Darwin (dashed line in red).

clip_image034

Continue adding in all your Map Tour points and SAVE. Take the time to go through your tour a few times to get the order right, correct for any spelling or broken links. Sometime you may even find you need further information or perhaps even more photos. But remember, once published you CAN continue to improve your Story Map!

Time to share

Your Map Tour Story Map is not visible until you share it. When you are satisfied with your Story Map and while in Builder mode you can simply hit the Share button. You can share your final Map Tour publicly or with your organisation.

clip_image035

Again you are provided with a bit.ly URL. This is probably the best URL to distribute to friends, publish on social media or to distribute to other stakeholders. You can always access the full URL via your ArcGIS Online Account.

clip_image036

Visit the finished Cemeteries of the Northern Territory Story Map.

In summary

A Story Map can be created quickly, purposefully and with just a phone and a Flickr account. Take an idea or theme like “museums and art galleries” or “Asian cuisine”, add a geography such as your city, and research and collect information about each place. Take photos, even videos, scan historic pictures – and build a compelling story map using the Map Tour template on ArcGIS Online.

It’s cool, it’s fun and can be a great collaborative exercise!

Further Information

Advertisements

7 thoughts on “How I created a Story Map using the ArcGIS Online Map Tour Template, a mobile phone and Flickr

    Andre T said:
    16/01/2014 at 5:07 pm

    wew, thats a nice tips

    Mikayla said:
    29/03/2014 at 2:39 am

    Everyone loves what you guys are usually up
    too. This type of clever work and exposure! Keep up the wonderful works guys I’ve included you guys
    to my personal blogroll.

    paterina krediti said:
    06/08/2014 at 5:10 pm

    Pretty! This was aan extremely wonderful article. Thank you
    for supplying these details.

    dizcinger said:
    13/02/2015 at 4:15 pm

    Awesome tips, thank you for the tutorial

    dizcinger said:
    13/02/2015 at 4:15 pm

    Awesome! Thanks for the tutorial

    Alana said:
    12/10/2015 at 11:32 am

    Hi. Just wondering how you added your own layers into the story map? eg in the Sydney Flight map there is an area of interest. I cannot seem to find where I can do that on my map

      Anthony O'Flaherty responded:
      12/10/2015 at 2:54 pm

      Hi Alana, the web map(s) that you use in a Story Map hold the layers. Open the web map (not the Story Map app) in ArcGIS Online and add your own layers. There are several workflows so feel free to email me and I can provide more details and links to other blogs. Regards, Anthony O’Flaherty – Esri Australia

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