skip to content
Dominik Schröder

StravaMap

Map, list, and analyze of all your Strava activities.

Github

Demo

Features

  • Filter by distance, elevation, date, sports type, …
  • Automatically add/remove/update Strava activities via webhook
  • Share all/selected activities with friends & family
  • Static website, no server required. All data is stored in supabase
  • easy to customize and extend

Map View

  • Wide range of map styles and overlays
  • Shareable map screenshots
  • Overlays of biking and hiking routes
Map

List View

  • Customizable columns
  • Sortable columns
List

Stats View

  • Calendar heatmap
  • Timeline of total distance/elevation/time per period of time, with local averaging
  • Configurable scatter plot of all activities
  • Violin plot of elevation/distance/time per activity, grouped by period of time, or sports type
Stats

Dependencies

Architecture

  • Github Pages for hosting the static website
  • supabase for storing the data
  • supabase functions for handling the webhook and fetching the data from Strava
  • Github Actions for automatically deploying the app to Github Pages and the edge functions to supabase, and periodically refreshing the Strava tokens

Setup

Create a MapBox account

Note down your access_token

Create a supabase account

Note down your supabase_url and supabase_anon_key

Create a Strava app

Note down your strava_client_id and strava_client_secret

Setup supabase

Use supabase/schema.sql to create the required tables locally and in supabase.

Environment variables

Create a .env file in the root directory of your project with the following content:

Terminal window
VITE_MAPBOX_TOKEN=[your mapbox access token]
VITE_STRAVA_CLIENT_ID=[your strava client id]
VITE_BASEPATH=/
VITE_SUPABASE_URL=[your local supabase url]
VITE_SUPABASE_ANON_KEY=[your local supabase anon key]

In your github repository, add the following secrets:

Terminal window
VITE_MAPBOX_TOKEN=[your mapbox access token]
VITE_STRAVA_CLIENT_ID=[your strava client id]
VITE_BASPATH=/[your repository name]
VITE_SUPABASE_URL=[your public supabase url]
VITE_SUPABASE_ANON_KEY=[your public supabase anon key]

Create a supabase/.env file wit hthe following content:

Terminal window
STRAVA_CLIENT_ID=[your strava client id]
STRAVA_CLIENT_SECRET=[your strava client secret]

Push the supabase/.env file to your supabase project:

Terminal window
supabase secrets set --env-file ./supabase/.env

Commit your changes to Github

This will automatically deploy your app to github pages and the edge functions to supabase.

Setup webhook

Run the following command to register the webhook with Strava:

Terminal window
curl -X POST https://www.strava.com/api/v3/push_subscriptions \
      -F client_id=[your strava client id] \
      -F client_secret=[your strava client secret] \
      -F callback_url=https://[your supabase project ref].supabase.co/functions/v1/strava-webhook \
      -F verify_token=STRAVA

Fetch your activities

Login to your StravaMap, go to the settings page and click on the Fetch Activities button. Due to the Strava API rate limits, you can only fetch 200 activities at a time, and at most 15 times per hour.

Caveats

  • Due to the server-less nature of this project, your activity data is essentially publicly visible.
  • Everything is read only. You can’t manually edit or delete activities in the app. You have to do this in Strava.