Using Strava heatmap in CalTopo

Introduction

The strava heatmap is an excellent tool for planning routes both in the city and the woods. By showing how frequently a certain trail or road segment is used by people running or hiking, you can get some idea of how easy it is to travel. However, on Strava's own website, the heatmap can only be laid over a handful of Mapbox map layers. Tools like CalTopo, on the other hand allow you to layer many different maps from many different sources. In this guide, you will learn how to add a custom layer to CalTopo to show the strava heatmap.

Note: adding custom layer sources is now a Pro feature of CalTopo, so you will need a paid account. You will also get better maps with a paid Strava account, but you can get some heatmaps without one.

The strava heatmap for on-foot activities overlaid on top of CalTopo's MapBuilder map.

Building the URL Template

The main component of a custom layer source in CalTopo is the URL template. The template describes the URL that CalTopo will use to request map tiles from the Strava server and how to modify those URLs based on the map position and zoom level. The URL template will look something like this:

https://heatmap-external-a.strava.com/tiles/all/hot/{Z}/{X}/{Y}.png

This form can be used the generate the URL template based on several input parameters. Later subsections explain what each parameter means & does and how to build the URL template manually. Once you're ready, use the "Copy" button to copy your URL template into your clipboard for use in CalTopo. The map below the form shows a preview of the heatmap layer on top of an OpenStreetMap base.

https://heatmap-external-a.strava.com/tiles/all/hot/{Z}/{X}/{Y}.png Copy

Changing the activities

By replacing the URL path part after tiles, you can limit the set of activities that are considered when building the heatmap. The following activity options can be used:

• all: all activities
• run: all foot sport activities (Run, Trail Run, Walk, Hike). The name is misleading for historical reasons.
  • sport_Run: just "Run" activities
  • sport_TrailRun: just "Trail Run" activities
  • sport_Walk
  • sport_Hike
• ride: all cycle activities (those listed below)
  • sport_Ride
  • sport_MountainBikeRide
  • sport_GravelRide
  • sport_EBikeRide
  • sport_EMountainBikeRide
  • sport_Velomobile
• water: all water activities (those listed below)
  • sport_Canoeing
  • sport_Kayaking
  • sport_Kitesurf
  • sport_Rowing
  • sport_Sail
  • sport_StandUpPaddling
  • sport_Surfing
  • sport_Swim
  • sport_Windsurf
• winter: all winter activities (those listed below)
  • sport_AlpineSki
  • sport_BackcountrySki
  • sport_IceSkate
  • sport_NordicSki
  • sport_Snowboard
  • sport_Snowshoe
• sport_Badminton
• sport_Golf
• sport_Handcycle
• sport_InlineSkate
• sport_Pickleball
• sport_RockClimbing
• sport_RollerSki
• sport_Skateboard
• sport_Soccer
• sport_Tennis
• sport_Wheelchair

Changing the color

The next URL path part describes the color style to use. Strava heatmap comes in 6 different color styles.

• mobileblue
• gray
• bluered
• hot
• purple
• orange

Getting a better resolution heatmap with a Strava paid account

Without a paid account, Strava only offers a heatmap that can be used up to zoom level 11. If you don't have a Strava pro account, then the layer you will get at the end of this guide will disappear from your CalTopo map whenever you zoom in beyond level 11 (about the level that makes the city of Seattle fill a computer screen). If you do have a pro account, follow the instructions below to configure a better resolution heatmap that you can use down to level 15 (about the level that makes Green Lake fill a computer screen).

Warning: things are about to get complicated. The instructions below are written for Google Chrome, and probably translate well to Microsoft Edge. If you use Firefox, Safari, or something else, you may have to make some adjustments, but the basic process is the same.

1. If you are building a URL template by hand instead of using the form above, in your URL template, change tiles to tiles-auth.
2. Go to strava.com/maps.
3. Open your browser's developer tools (such as by hitting your F12 key).
4. Navigate to the "Application" tab (it might be hidden under a "More" arrow).
5. From here, under "Storage", find the "Cookies" for "https://www.strava.com".
6. The cookies we are interested in are the three whose names start with "CloudFront":
7. If building a URL template by hand: append the following to your URL template:

   ?Key-Pair-Id=...&Policy=...&Signature=...

8. Copy the value of the CloudFront-Key-Pair-Id cookie. You can copy this value by clicking on the table row corresponding to the cookie and selecting the text in the "Cookie Value" pane below the table.
9. Paste this value into the form above (field "Key-Pair-Id") or in place of the first ... above
10. Do the same with the value of the CloudFront-Policy cookie.
11. Do the same with the value of the CloudFront-Signature cookie.

Note: your CloudFront-Signature changes weekly, so you will have to repeat the last step if your map stops working.

Defining the layer in CalTopo

Now that you have your URL template, you can define the layer in CalTopo. From the "Add" menu, select "Custom Source".

In the form dialog that pops up, leave the "Type" as "Tile". Give the layer a name to identify it in the "Name" field. Paste your URL template into the box labeled "URL Template".

Max Zoom

For the paid high-resolution heat map with all the CloudFront cookies, set "Max Zoom" to 15. The heatmap will still show up beyond zoom level 15, but the resolution will not improve after that level.

Ideally, the "Max Zoom" for the unpaid heat map should be set to 11, but the CalTopo UI does not allow it to be set lower than 12. As a result, the unpaid heat map will disappear if you zoom in beyond level 11. See the section 'Setting a "Max Zoom" level not supported by the UI' for complicated instructions to overcome this limitation.

Overlay?

Set "Overlay?" based on whether you want to define an overlay or a base layer. I prefer to define a base layer so that I can adjust its transparency to any value. If you'd rather have the transparency locked in but be able to easily toggle the layer with a checkbox, choose "Yes".

The right half of the form can be left blank. Click "Save". Your layer will be added to your map. I chose a purple heatmap of water sport activities. In Seattle, this means that the entire West (Puget Sound) coast of the city as well as Lakes Washington, Sammamish, Union and Green Lake are covered. Particular hot spots show up around downtown Kirkland, Marymoor Park, Golden Gardens, and other popular locations for water sports.

Advanced: Setting a "Max Zoom" level not supported by the UI

1. Fill out the "Custom Source" form
2. Open your browser dev tools (such as by pressing F12)
3. Navigate to the dev tools' "Network" tab
4. Click "Save to Account" in the "Custom Source" form
5. In the dev tools, find the "User Layer" request and copy it as a PowerShell command

6. Paste the command into a text editor
7. In the command, replace the "12" (if you submitted the form with "Max Zoom" set to 12) that follows maxzoom%2522%253A%2522 with an "11".
8. You can find the "Title" in the request body, too, and replace it with something distinct if you want to be able to identify it as different from the layer you just saved to your account.
9. Paste the command into PowerShell and execute it
10. Refresh your CalTopo page to discover the updated or new layer in your account

Bonus: NOAA Snow Depth Layer

The NOAA NOHRSC Snow Depth map can also be added as a custom overlay. Use the type "WMS" and the following URL Template:

https://mapservices.weather.noaa.gov/raster/rest/services/snow/NOHRSC_Snow_Analysis/MapServer/export?dpi=96&transparent=true&format=png32&bbox={left},{bottom},{right},{top}&bboxSR=EPSG:4269&imageSR=102100&size={tilesize},{tilesize}&f=image&layers=show:3

The legend for the layer is found on this page under "Image (3)". Units are in inches.