Velo.gl

React/Typescript library for interactive 3D visualization of GPX and TCX activities.

Features

• Deck.gl layers for visualization of GPX and TCX activities.
• Deck.gl layer extensions for path type layers
• Map components
  • Activity Map - renders a GPX activity
  • Focus Activity Map - renders a GPX trace and automatically centers the camera around the bounds of the displayed trace
  • GPX Maptiler - renders a GPX trace on a Maptiler base map
  • GPX Hill Map - renders a GPX trace on a Maptiler satellite terrain map

Examples

See Storybook

Installation

npm install velo.gl

Usage

import { GpxStreetMap } from "velo.gl";

const MyGpxMap = () => {
  const initialViewState = {
    longitude: 8.3,
    latitude: 61.4,
    zoom: 8
  };
  return <GpxStreetMap gpx={myGpxUrl} initialViewState={initialViewState} />
}

Running Storybook

Using npm to run locally:

npm ci
npm run storybook

Using npm & docker-compose:

npm ci
npm run docker:compose:storybook

Testing

Run visual tests

npm ci
npm run docker:compose:test

Update visual test snapshots

npm ci
npm run docker:compose:test:update

Demo

Live demo: VeloLens