Velo.gl

Library for interactive 3D visualization of GPX activities.

Features

• Deck.gl layers
  • Activity Profile Layer - renders a GPX activity as a vertically extruded path
  • Profile Layer - renders paths extruded vertically from sea level, from a set of 3D polylines
  • GPX Layer - renders the trace of a GPX file
  • Trip GPX Layer - renders the position along a GPX trace at a given time
• Map components
  • Activity Map - renders a GPX activity
  • GPX Maptiler - renders a GPX trace on a Maptiler base map
  • GPX Hill Map - renders a GPX trace on a Maptiler satellite terrain map
  • Focus GPX Map - renders a GPX trace and automatically centers the camera around the bounds of the displayed trace

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:

npm ci
npm run docker: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