In part 1, I designed an interactive map of my favorite cross-country ski trails using HTML, CSS, and JavaScript. Here, I describe the final steps of recording trail videos and creating the final map.

Past recordings have been inconvenient because holding a GoPro in one hand makes it difficult to keep eye on the trail, keep the camera relatively level, hang onto both poles in one hand, and keep up with my fellow skiers. Not to mention the amount of great videos that feature my mitten in the corner…

I was gifted a chest mount for my last birthday, which is what inspired this project. Most GoPro cameras can capture GPS data. Unfortunately, the company opted to remove GPS capability from the newest model (GoPro HERO 12) to “improve battery life”. Hopefully, they will restore this feature to future models because it is extremely convenient to have GPS data and video data recorded into one file, which can be handled by the GoPro app. Workarounds would require recording GPS data simultaneously with a separate device, then combining the data with a third-party app.

Unfortunately, after all this preparation, there was a bit of a snow drought this winter! Without enough snow to fully cover the grass in the trails, I was unable to record full videos of each segment. I recorded a sample of one trail while walking to test the GPS stickers available through the GoPro Quik mobile app.

Warning: GoPro needs to connect to satellites before recording starts. Even if GPS is enabled, if you start recording prior to the GoPro getting a lock on GPS, GPS data will not be recorded for any of the video. Wait until the GPS icon turns white before starting a recording.

Note: The GPS sensor on the HERO 10 is next to the capture button, on “top.” Thus, some users have suggested that it is best not to record with the device upside down or tucked under your chin, for example, so that the sensor is not obstructed.

After connecting you GoPro to your mobile device through the GoPro Quik app, you can view media on your GoPro camera and download it to the app, where a suite of editing tools are available. The tools leveraging GPS data are found in the “Stickers” tab.

Warning: you can only add GPS overlays in the mobile app and only to original footage. Unfortunately, in recent years, GoPro has moved support away from their desktop app to focus on the phone app. When I transferred video files off of the SD card they were originally written to, I could no longer add the GPS stickers using GoPro software.

Here we can see the “Path” (top left) and “Altitude” (top right) stickers from the GoPro Mobile App. Other available options include a terrain map, speedometer, and speed graph. The chest mount captures quite a bit of “bounce” when walking, but this should be less present while actually skiing due to the difference in movement pattern.

As placeholders for missing videos, I added some video clips from past winters to showcase what I envisioned the clips would look like. Unfortunately, I did not record GPS data when I recorded these videos, so I cannot overlay the path or altitude data over the videos. Hopefully next year will bring more snow and I can complete the map! The video below demonstrates some of the site features, though I was unable to capture certain features (such as the reorientation of the containers from a horizontal to a vertical layout once a minimum width is reached) due to restrictions from my screen recording software. The full code for this project is available in my GitHub repository.


Necessary Tools:

  • GoPro or action camera capable of recording video and GPS data (recommended over a phone or camera due to generally better battery performance, durability in the elements, and image stabilization). I used a GoPro HERO 10.
  • Chest or head mount
  • Mobile device and GoPro Quik mobile app