Strava Activity Heatmap

The best way to visualize your Strava activities--free, modern, fast and feature-rich. Currently WIP!

Standout Features

• Privacy-focused with no user data stored, no client cookies used, and complete transparency.

❖ Data Visualization

• Filter activities by date, sport type, commute status and visibility

• Many separate display modes incorporating different metrics (Frequency Heatmap, Elevation, Time of Year, Solid Color)

• Tabular list of activities with support for displaying & sorting by many metrics (Name, Distance, Calories, Avg. Speed, Avg. Power, Avg. Heartrate, Date) & filtering by keyword

❖ Map

• Customizable basemap appearance (Light, Dark, Satellite, Landscape, Topographic, Winter, or none)

• Map export to PNG, JPG, PDF and SVG with detailed control over export dimensions and resolution.

• Distance measurements via measurement control

• Automatic zoom-to-fit activities added to map

❖ Comforts

• Fully-featured light/dark mode with persistence via browser stores & automatic preference detection + manual control

• Resizable & collapsible settings sidebar (desktop) or drawer (mobile) with layout persistence through browser stores

❖ Technical

• Session persistence via Auth.js

• Parallel fetching of activities

Screenshots

App Demonstration

Heatmap usage

Layers tool

PWA Demonstration

Loading Screen

Website Stack

This website is a SvelteKit app with Typescript and Tailwind CSS hosted on Cloudflare Pages. Pretty standard.

It's centerpiece is a MapLibre GL map with various plugins. Also used is Auth.js and shadcn/ui Svelte

Contributing/Building

Clone the repository. If you don't have pnpm installed, install that.

npm i -g pnpm

Install dependencies

pnpm i

Run the development server

pnpm dev

License

© Alexander Weimer. Published under the GPL-3.0 license.