Building Blocks of a Map Tour – Easy as A-B-C

Here's a demonstration of how we built the story map shared at our Fall User Conferences.

We just wrapped up the Esri Canada User Conferences for the fall. Throughout the main plenary presentation Transforming Our World, we featured several demonstrations using map tour templates. We highlighted diverse examples of how map tours can tell compelling stories, from a historic walking tour of Banff to the evolution of the tragic accident at Lac-Mégantic.

One of our most popular demos was walking through the building of a map tour application for each city we visited. Here's the final result for the map tour we built of our last UC city of the year, St. John’s, NL.

St. John's User Conference map tour

The primary reason for this demo was to illustrate how anyone can develop engaging and authoritative applications using ArcGIS Online, whether you have a free public account or an organizational subscription. Let’s take a deeper dive and explore how this map tour demo came together in more detail – it was as simple as A-B-C.

A.    Assembling data

It always starts with data - specifically, points for your map tour. Collecting and preparing the tour points was the most time-consuming step in the process – something we did in advance. We approached data compilation from two angles.

First, we built a shapefile of several map tour points of major attractions for each city. Using the documentation that comes with the map tour template, we created a new shapefile that matches the recommended database schema. We then populated values for each point’s name, caption, URLs for the main and thumbnail pictures (both happen to be the same), and an icon color. We've embedded HTML code to add a hyperlink within the caption.

Populating the relevant fields

Once we've edited our map point data, we packaged our completed shapefile into a zip file.

But what if you don’t have any map features? No worries – you can also use digital photos to build a map tour. To show this, we asked our fellow Esri Canada team members to take photos of their community with a smartphone. We then verified if the photos were geo-tagged – where the locations were recorded by the smartphone in the digital files. We used this Web site to check if lat/long values are returned.

The next step was to upload the geo-enabled photos to an image hosting site like Flickr. For the demo, we created a Flickr account, added a new set, and uploaded the digital photos to the set. We then ensured each photo had a title and description, similar to the name and caption we added for our shapefile.

Finding Flickr images

B.     Building the Web map

The data preparation was complete. It was time to start the demo on stage.

We opened an empty Web map in arcgis.com, and then we added the zipped shapefile of our tour points to our map. There was no need to configure popups or change the symbols. The only thing we had to do was to choose a basemap, navigate to an appropriate map extent, and save the Web map with a meaningful name and summary.

Putting the points on the map

C.    Configuring the Web application

We reached the final step - building a Web application around our new Web map. We shared the Web map with everyone and created a new Web application. When prompted to choose a new template, we selected to publish a new Map Tour.

Selecting the Map Tour template

From our newly created item, we launched the Configure App wizard. This option gave us a friendly user interface to configure our new map tour application. Since we built our tour points with the recommended schema, the application built itself!

Previewing the results

Now, we added our Flickr images to the map tour. We switched to builder mode and chose Import to access our photo set in our Flickr account.

Adding the Flickr images

The wizard detected the locations from our geotagged images and placed the photo points into the map tour.

The final result

We saved the application and returned it to view mode. That’s it!

There are many other ways to configure the map tour, from exchanging icon colors, modifying point locations, switching the logo and colour scheme, and adding more points. For the demo, we changed the media for one of the main photos with an embedded video link: http://www.youtube.com/embed/xMx7D8kcyWY

You can check out a live link of the end result of a Toronto map tour demo example here.

Do you want to build this map tour demo for yourself? We've provided you with a sample zip shapefile that you can download. You can also import our Toronto photo set through our Flickr account named esricanadamaptourblog. Detailed information about a hosted version of the map tour is available through the interactive builder embedded help and from Github.

As you can see, the building blocks for creating a map tour application are as easy as A-B-C! We encourage you to give it a try and look forward to seeing your map tours online.

 (With contributions from Mark Ho, Esri Canada Technical Solutions Specialist)