Project
Roulette

GPX Route Viewer

Drop a track file and see the route, the climb and the pace.

IntermediateWeb appData viz10–20hAI-buildable 4/5needs OpenStreetMap tilesworth shipping

Parse a GPX file from a watch or bike computer and render the route on a map alongside an elevation profile. Hovering the profile moves a marker along the route. Sport data you already own, made legible by your own tool.

UI
Logic
Useful

Hosting · Free forever

Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.

Deploy it and share a link.

Core features · 7

  • Drop a GPX file to parse and render
  • The route draws on a map fitted to its bounds
  • An elevation profile renders below the map
  • Hovering the profile moves a marker along the route
  • Distance, total ascent, duration and average pace are calculated
  • The track colours by speed or gradient
  • Files with missing elevation or time data degrade gracefully

The interesting part

  • Haversine distance accumulation over thousands of points
  • Smoothing noisy GPS elevation before computing total ascent
  • Simplifying the track for rendering without visibly changing the route

Once it works

  • Compare two tracks over the same route
  • Add split times per kilometre
  • Add a route animation that plays back the activity

Suggested stack

reacttypescripttailwindleafletd3-shape

External APIs

Track it