altpro

Elevation profile widget.

Usage no npm install needed!

<script type="module">
  import altpro from 'https://cdn.skypack.dev/altpro';
</script>

README

NPM version Build Status

altpro

Elevation profile widget. See demo here.

Install

$ npm install --save altpro

Usage


const data = [
  { elevation: 10, distance: 0 },
  { elevation: 15, distance: 10 },
  { elevation: 25, distance: 10 },
  // etc.
];

const altpro = require('altpro');

const container = document.querySelector('.altitude-profile-container');
altpro(container, data);

API

altpro(parent, data, options)

Creates new widget inside of parent. parent element has to exist, be visible and have desired size.

  • data is an Array of items with elevation and distance properties. All other properties are ignored, and data is not changed by altpro. distance means - distance from previous items.

The following options can be passed:

  • fill - fillStyle for main graph background
  • stroke - strokeStyle for line at the top of the graph
  • selectedFill - fillStyle for the selected item

altpro.select(index)

Selects index element of data.

altpro.destroy()

Removes altpro widget from DOM, unbinds all listeners.

License

MIT © Damian Krzeminski