Class: profile


new profile(options)

Provides a D3js component to be used to draw an elevation profile chart.

let selection ='#element_id');
let profile = ngeo.profile({
  distanceExtractor: function (item) {return item['dist'];},
  linesConfiguration: {
    'lineZ1': {
      zExtractor: function (item) {return item['values']['z1'];}
    'lineZ2': {
      color: '#00F',
      zExtractor: function (item) {return item['values']['z2'];}
  hoverCallback: function(point, dist, xUnits, elevations, yUnits) {
    console.log(point.x, point.y);
  outCallback: function() {

The selection data must be an array. The layout for the items of this array is unconstrained: the distance values is extracted using the distanceExtractor config option and multiples z values can be displayed by providing multiple linesConfiguration with its specific zExtractor. Optionally you can provide a color in your linesConfiguration. A line without color will be red. Each linesConfiguration name is used as class for its respective line. So you can pass a styleDefs config option (inline css) to customize the line or all the chart. Optionally, POIs can be displayed and depend on a poiExtractor config option.

The data below will work for the above example:

        "y": 199340,
        "values": {"z1": 788.7, "z2": 774.2},
        "dist": 0.0,
        "x": 541620
    }, ...
Name Type Description
options ngeox.profile.ProfileOptions

Profile options.


D3js component.


(inner, constant) bisectDistance

Method to get the coordinate in pixels from a distance.

(inner, constant) distanceExtractor

Distance data extractor used to get the dist values.

(inner, constant) formatter: ngeox.profile.ProfileFormatter

(inner) height

Height of the chart in pixels

(inner, constant) hoverCallback: function

Hover callback function.

(inner, constant) i18n: Object:.<string:, string:>

(inner, constant) light: boolean

Whether the simplified profile should be shown.

(inner, constant) lightXAxis: boolean

(inner, constant) linesConfiguration

Line configuration object.

(inner, constant) margin

The values for margins around the chart defined in pixels.

(inner, constant) numberOfLines

Number of differents configurations for the line.

(inner, constant) outCallback: function

Out callback function.

(inner, constant) poiExtractor

POI data extractor.

(inner, constant) poiLabelAngle: number

(inner, constant) scaleModifier

Scale modifier to allow customizing the x and y scales.

(inner, constant) styleDefs

Optional SVG inline style.

(inner) svg: Object

(inner) width

Width of the chart in pixels

(inner) x

D3 x scale.

(inner, constant) xAxisLabel: string

(inner) xDomain

D3 extent of the distance.

(inner) xFactor

Factor to determine whether to use 'm' or 'km'.

(inner) xUnits

Distance units. Either 'm' or 'km'.

(inner) y

D3 y scale.

(inner, constant) yAxisLabel: string