ArcGIS StoryMaps

Creating a 3D Race Report with ArcGIS StoryMaps

In June of 2023, I ran 10 whole miles in a road race (pause for applause)! Being the humble type, I will resist using this space to detail my accomplishment….mostly because I already did that in an ArcGIS StoryMaps creation.

Screensave of ArcGIS Storymaps story.

Such an interactive experience is very fun to make – from both a thematic and a technical perspective.  The heavy lifting is performed by the centerpiece map, which depicts the running route.  To further emphasize my race day heroics, I wanted to convey to the reader just how much elevation gain was involved, a consideration which led me to use a 3D web scene view instead of a 2D map.

If you’re interested in learning about the technical aspects of that story, keep reading!

Overview

The goal of a race report is to give a blow-by-blow account of the run, breaking the journey down into segments.  Thus, the creation process involves five main steps:

  1. Acquiring the route data (otherwise known as running)
  2. Processing the route data
  3. Publishing the route data
  4. Creating a 3D scene with slides
  5. Using ArcGIS StoryMaps to make the story!

Acquiring the route data

Most people probably wouldn’t think of a GPS watch as storytelling technology, but I beg to differ.  Pictured below is my trusty wrist piece, which tracks runs, bike rides, and even swims – each of them an epic story.

close up of GPS watch on an unusually handsome wrist
No, I didn’t hire a wrist model. That’s my actual wrist!

Once the physical activity is complete, the watch syncs up with the manufacturer website (either via wireless network or an app on my phone).  The website shows me all kinds of details about the run – elevation, heart rate, etc. 

The tools dropdown reveals an option for exporting to GPX, which I use to download the route as a file on my computer.  Depending on the make of your GPS watch, the website you use might look different. There are also hardware brand independent websites which interoperate with most watches. Regardless, there’s typically an option to download the route as a GPX file.

athletic tracking website page
The activity tracking website provides an Export to GPX option.

Processing the route data

Since the route dataset is delivered as a GPX file, the crux of the preparation is to convert it into a format usable by ArcGIS Online (e.g. GeoJSON or Shapefile). 

Before I perform the final conversion, however, I also want to split the route into segments.  Segmentation will enable me to highlight each part of the route as I describe the section in the story.

As I split the route into parts, I use the Descript field to name the segment numerically.

screen shot of arcgis pro editing session
Using ArcGIS Pro’s editing tools to segment the route.

My workflow looks like this:

  1. Import GPX file into ArcGIS Pro: Conversion Tools → GPS → GPX to Features
  2. Split the route into parts: Edit → Modify → Split, which kicks off an editing session so that I can manually split the lines according to my discretion.
  3. Export GPX to Shapefile (or GeoJSON): Conversion Tools → JSON → Features To Shapefile

Publishing the route

Now that we have a shapefile representing the segments in the route, time to upload those lines and publish them as a feature layer!

screenshot of arcgis.com new item page. a file is in mid drag en route to the drop zone
Publishing your data can be accomplished with a drag and two button clicks!

You can take a look at the feature layer in its basic form here.

Creating a Scene

As you probably know, the easiest way to create a scene is simply to put a lampshade on your head at a fancy party (rimshot)…If you’re new to creating 3D web scenes on ArcGIS Online, you’ll want to check out this bit of documentation.

Here’s the scene that we’re shooting for, in its native habitat.  Note that it has many layers and many slides.  If you click on one of the slides at the bottom, you’ll find that both the camera view and layer visibility change. These slides, each of which offers a bespoke view of the route, will form the heart of our eventual story.  They are the visuals to which I will pin my narrative elements.

Screenshot of ArcGIS Scene Viewer. The table of contents depicts more than 10 layers. The slide carousel at the bottom shows multiple slides.
My web scene has many layers (top right) and slides (bottom).

Capturing slides is a pretty straightforward process. But what’s with all the layers?  The bottom layer (Flying squirrel) represents the entire race route.  Each subsequent layer represents one segment (or “stage”).  Alas, each segment must be present in the web scene in the form of its own layer, so I’m in for a bit of busy work.  For each segment, the following work is required:

screen shot of ArcGIS Scene Viewer with the Layer Properties menu open. In the Filter section, the selected category is Desript, and the Descript value 10 is selected.
Creating a filter in the Layer Properties menu.

Here are the salient style properties that I use:

Overall route:

Route segment:

Note that the route segment diameter is slightly larger than the overall route.  Providing a larger diameter ensures that the segment will overpost the general route and show through.

Screen shot of ArcGIS Scene Viewer with Properties Editor menu open. Properties such as color, diameter, elevation mode, and offset are exposed through this menu.
Using the symbol properties editor to make my route pop.

Making the story (finally)

Choosing an immersive style

Of the immersive blocks offered in ArcGIS StoryMaps , I feel that sidecar’s docked layout best fits what I’m trying to accomplish.  The building experience involves the notion of “slides,” which matches the slides built in the Scene Viewer.

Another sidecar layout that could suit my needs (and is a little more on the nose, given my fondness for the “slides” metaphor) is slideshow.  In this layout, the user navigates horizontally through the slides using arrow buttons.  As I am an old-school, pre-scrollytelling curmudgeon, buttons appeal to me.  However, two aspects of the docked layout win me over:

  1. The docked panels accommodate lengthier text and media.
  2. The mobile interface for a docked panel sidecar divides the screen between narrative panel and map, which allows for simultaneous viewing of both.
Two screen shots, side by side, provide a comparison of layouts.
A comparison of sidecar’s slideshow (left) and docked (right) on mobile. Due to the long-windedness of my narrative, sidecar’s mobile interface just made more sense.

One of the great things about the sidecar block is that, at any given time, you can change your layout with no fuss.  So, no need to get too mired in making a decision – just try it out!

Bringing it all together!

We’ve come a long way.  We processed and published the data as a feature layer, plugged that feature layer in a 3D web scene, and created scene slides for each segment of the route.  Now we just need to author our story slides.

Each sidecar slide has two parts: 1) the narrative panel on the side, which contains my prose and photos; and 2) the main stage item, which contains the corresponding slide from my web scene.

Screen shot of StoryMaps sidecar slide editor. Each slide allows the author to pair narrative elements with a map view.
Each slide allows the author to pair narrative elements with a map view.
Screen shot of scene's available slides.
Each web scene slide matches a slide in my story’s Sidecar.

Once I have created each sidecar slide (plus an intro and outro), I am ready to publish and wow the world with tales of my athletic prowess!

Conclusion

That’s it!  A soup to nuts recipe for creating a 3D race report in ArcGIS StoryMaps!  Hard to say which was more arduous: writing this blog post or running 10 miles!

Maybe you’ve been thinking about tackling some sort of outdoor adventure.  When you do, I hope you’ll consider depicting it in a story!

Oh, and here are some other fine blogs about working with 3D!

To 3D or not to 3D?

The pleasures of 3D storytelling with ArcGIS StoryMaps

Subscribe
Notify of
2 Comments
Oldest
Newest
Inline Feedbacks
View all comments

Next Article

Boost your Productivity with Tool Parameter Overrides in ArcGIS Pro 3.3

Read this article