terrain-profile v1.1.1

terrain-profile

Calculates a terrain profile from GeoJSON or array of coordinates. The terrain profile can be drawn as SVG using d3. Input data must have elevation values calculated as the calculator only calculates profile statistics based on the input data.

Install

You can install it with NPM:

npm install terrain-profile

or Yarn

yarn add terrain-profile

and then:

import { Calculator, Drawer, defaultOptions } from 'terrain-profile';

Info

Calculator

Use this class to calculate profile statistics from GeoJSON feature or geometry. Currently it supports MultiLineString and LineString geometries. Input geometry should have elevation values as the calculator does not calculate them. Following profile parameters are calculated:

And vertices are formatted as follows:

import { Calculator } from 'terrain-profile';

// input geometry or feature
const multiLineString = {
  type: 'MultiLineString',
  coordinates: [
    [
      [24.048219, 42.093168, 560],
      [24.048192, 42.093276, 561],
      [24.048198, 42.093375, 562],
      [24.048258, 42.093556, 563],
      [24.048101, 42.093782, 562],
      [24.047584, 42.093988, 560],
      [24.046901, 42.094151, 561],
      [24.046682, 42.094178, 560],
      [24.046598, 42.094162, 562],
      [24.046428, 42.094166, 563],
      [24.046033, 42.094171, 564]
    ]
  ]
};

// calculate profile parameters
const calculator = new Calculator(multiLineString);

console.log(calculator.parameters);
// result is:
// {
//     length: 252.23653171834349,
//     realLength: 252.7660603467696,
//     ascend: 8,
//     descend: 4,
//     minh: 560,
//     maxh: 564
// }

console.log(calculator.vertices);
// result is:
// [
//   { lat: 42.093168, lon: 24.048219, h: 560, dist: 0 },
//   { lat: 42.093276, lon: 24.048192, h: 561, dist: 12.227634483109352 },
//   { lat: 42.093375, lon: 24.048198, h: 562, dist: 23.259403426787898 },
//   { lat: 42.093556, lon: 24.048258, h: 563, dist: 44.00886374875728 },
//   { lat: 42.093782, lon: 24.048101, h: 562, dist: 72.31307358580551 },
//   { lat: 42.093988, lon: 24.047584, h: 560, dist: 120.7868641823526 },
//   { lat: 42.094151, lon: 24.046901, h: 561, dist: 180.05154223952798 },
//   { lat: 42.094178, lon: 24.046682, h: 560, dist: 198.38979910612818 },
//   { lat: 42.094162, lon: 24.046598, h: 562, dist: 205.55348373511953 },
//   { lat: 42.094166, lon: 24.046428, h: 563, dist: 219.60321720630384 },
//   { lat: 42.094171, lon: 24.046033, h: 564, dist: 252.23653171834349 }
// ]

Drawer

Use this class to draw a terrain profile as SVG element. It uses d3 to draw the chart. You can pass additional options to change the resulting SVG.

import { Drawer } from 'terrain-profile';

// input geometry or feature
const points = [
  [24.048219, 42.093168, 560],
  [24.048192, 42.093276, 561],
  [24.048198, 42.093375, 562],
  [24.048258, 42.093556, 563],
  [24.048101, 42.093782, 562],
  [24.047584, 42.093988, 560],
  [24.046901, 42.094151, 561],
  [24.046682, 42.094178, 560],
  [24.046598, 42.094162, 562],
  [24.046428, 42.094166, 563],
  [24.046033, 42.094171, 564]
];

const drawer = new Drawer(multiLineString);
// draw the profile
drawer.getSVG();

Or you can modify the profile options:

const options = {
  showLabels: true,
  showDistanceAxis: true,
  showHeightAxis: true,
  profileFillColor: '#01ff70',
  profileStrokeColor: '#3d9970'
};

drawer.getSVG(options);

Following listeners can be set (options.liveProfile should be set to true as well):

• onEnter - callback on mouse in
• onMove - callback on mouse move
• onLeave - callback on mouse out

const drawer = new Drawer(
  multiLineString,
  () => {
    console.log('on mouse in');
  },
  ({ lat, lon, dist, h }) => {
    console.log('on mouse move');
  },
  () => {
    console.log('on mouse out');
  }
);

// OR

drawer.onMove = ({ lat, lon, dist, h }) => {
  console.log('on mouse move');
};

Default options

Set of default options used for drawing a profile:

Dependencies

• d3

Tests

Check tests for more examples.

License

terrain-profile is MIT License @ bojko108