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:

| Parameter | Info | | ------------ | ------------------------------ | | length | total length in meters | | realLength | total oblique length in meters | | ascend | total ascending in meters | | descend | total descending in meters | | minh | minimum elevation in meters | | maxh | maximum elevation in meters |

And vertices are formatted as follows:

| Parameter | Info | | --------- | --------------------------------------- | | lat | geographic latitude in decimal degrees | | lon | geographic longitude in decimal degrees | | h | elevation in meters | | dist | distance from start in meters |

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:

| Parameter | Info | Default Value | | ----------------------- | ----------------------------------------------------------------- | ------------- | | width | Total width in pixels | 600 | | height | Total height in pixels | 200 | | liveProfile | Display elevation value on mouse move. | true | | zoomProfile | Option to zoom in the profile graph | true | | showLabels | Display additional labels | false | | showDistanceAxis | display distances axis - bottom axis | false | | showHeightAxis | Display elevation axis - left axis | false | | heightsTicksDivider | Divider for heights ticks. Use smaller values like 20 | 50 | | distancesTicksDivider | Divider for distances ticks. Use smaller values like 20 | 50 | | backgroundColor | Sky color | #CCFFFF | | profileFillColor | Terrain color | #6CBB3C | | profileStrokeColor | Terrain stroke color | #41A317 | | profileStrokeWidth | Terrain stroke width | 3 | | infoColor | Info overlay color | #000000 | | infoLineStrokeWidth | Vertical info line width | 2 | | infoLineStrokeColor | Vertical info line color | #FF0000 | | infoLineStrokeDash | Vertical info line dash array, examples: '0', '5,5', '10,2,10'... | 0 |

Dependencies

• d3

Tests

Check tests for more examples.

License

terrain-profile is MIT License @ bojko108