Elevations layer API

This reference describes the elevations layer API.

The elevations layer serves as the background for the whole visualization and renders the map-like image of "hills" and "valleys", along with elevation contours and light shading:

dotAtlas elevation layer.

The point objects you provide in the points property, in addition to the x and y coordinates must define the point's elevation in the elevation property.

Point properties

elevation

Defines the elevation (altitude) of the point, required.

Elevation values must be in the 0.01.0 range, where 0.0 is no elevation and 1.0 is peak elevation. Values outside of this range will be clamped to the required range.

When you mutate the elevation property of a specific point object, call the update() and then the redraw() method to see the changes on the screen.

Layer properties

colorBands

Determines the colors used to draw the elevation bands and the number of bands.

Values of this property must be an array of JavaScript literal objects. Each object defines one elevation band and must contain the following properties:

end

The upper bound of the elevation range covered by this band, must fall in the 0.01.0 range. Note that the lower bound of the range is defined by the upper bound of the previous band or is 0.0 for the first band in the array.

color

The color in which to draw the band.

shading

Set to true to apply hill shading when rendering this band. If this property is not provided, shading will not be applied. The default dotAtlas color bands don't apply shading to the blue "sea" bands and do apply shading to the "land" bands.

contours

When true or not provided, a contour line will be drawn between this and the next band in the array. The default dotAtlas color bands don't draw contours between the blue "sea" bands and do draw contours between the "land" bands.

The following example defines five green-to-red heatmap-style bands, all with contours and without hill shading.

const dotatlas = DotAtlas.embed({
  "element": element,
  "layers": [
    {
      "type": "elevation",
      "colorBands": [
        { "end": 0.005, "color": "hsl(90, 70%, 60%)" },
        { "end": 0.050, "color": "hsl(70, 70%, 60%)" },
        { "end": 0.200, "color": "hsl(50, 70%, 60%)" },
        { "end": 0.500, "color": "hsl(30, 70%, 60%)" },
        { "end": 1.000, "color": "hsl(10, 70%, 60%)" }
      ],
      "points": [
        { "x":  0, "y": 0, "elevation": 1.0 }
      ]
    }
  ]
});

TODO: a note on the theme.js plugin that overrides colorBands. The plugin could expose the lightColorBands and darkColorBands or something.

contourOpacity

Opacity of contour lines between elevation bands on this layer. If set to 0.0, contours will not be drawn at all.

contourWidth

Width of contour lines between elevation bands on this layer, in pixels. A reasonable range of contour widths is 0.52.5. If set to 0.0, contours will not be drawn at all.

lightIntensity

Intensity of the hill shading light source. Values in the 0.01.0 are accepted, where 0.0 means no light and no hill shading.

lightAzimuth

The angular direction from which the hill shading light comes.

Values of this property will be treated as an angle in radians. Assuming lightAltitude is 0, mapping between lightAzimuth and geographical directions is the following:

lightAzimuth Light direction
0 West
Math.PI / 4 South-West
Math.PI / 2 South
3 * Math.PI / 4 South-East
Math.PI East
5 * Math.PI / 4 North-East
3 * Math.PI / 2 North
7 * Math.PI / 4 North-West

lightAltitude

Altitude of the hill shading light source above the ground. Values of this property will be treated as an angle in radians, for example:

lightAltitude Light position
0 On the ground level, "sunrise".
Math.PI / 4 Directly above the ground, "noon". Note that hill shading will not be visible in this setting.
Math.PI / 2 On the ground level, "sunset". Note that this setting reverses the example light directions provided in the lightAzimuth property documentation.

lightness

Lightness correction for the whole layer. Correction values must fall in the -1.0 ... 1.0 range and result in the following corrections:

Value Correction
-1.0 Zero lightness, all colors black.
-1.0 ... 0.0 Lowered lightness.
0.0 No correction.
0.0 ... 1.0 Increased lightness.
1.0 Maximum lightness, all colors white.

saturation

Saturation correction for the whole layer. Correction values must fall in the -1.0 ... 1.0 range and result in the following corrections:

Value Correction
-1.0 Zero saturation, greyscale.
-1.0 ... 0.0 Lowered saturation.
0.0 No correction.
0.0 ... 1.0 Increased saturation.
1.0 Maximum saturation.

maxElevationPoints

The maximum number of points from the points to consider when drawing elevations.

The elevations layer can be costly to draw, especially when the number of elevation points is large. In some cases it may be beneficial to allow the users to balance the rendering performance and the amount of detail on their maps.

You can use the maxElevationPoints property to render fewer elevation points than provided in the points array. If you sort the elevation points in the decreasing order of elevation, lowering maxElevationPoints below the length of the points array will discard the least important information.

maxRadius

Determines how much of "land" each elevation point generates. The larger the value, the more "land" generated. The smaller the value, the more "islandy" the map.

In most cases, the reasonable range of maxRadius values will be 0.1 ... 2.0. Please note that large maxRadius values may slow down rendering of the elevations layer.

elevationPow

Determines the sharpness of each elevation peak.

This property is the power to which to raise each point's elevation value before rendering:

const renderedElevation = Math.pow(point.elevation, elevationPow);

The impact of this property on elevation peaks is the following:

elevationPow Impact on elevations
0 ... 1.0 Flattens the peaks
1.0 No correction
1.0 and more Sharpens the peaks

maxElevation

Returns the current maximum elevation value, that is the altitude of the highest peak on the map.

While the range of elevation values for individual points is 0.0 ... 1.0, the range elevation values across the whole map will be larger than 1.0 because elevations of points in the same area add up.

You can read this property to get the elevation value of the currently highest point on the map. The maximum elevation value may be useful as a normalization factor when, for example, building map legend.

elevationAt

Returns the elevation value at the specified element space coordinate of the map:

dotatlas.on("mouseMove", e => {
  const elevationsLayer = dotatlas.get("layers")[0];
  const elevationAtMouseLocation =
      elevationsLayer.get("elevationAt", e.elementX, e.elementY);
});

Events

onMaxElevationChanged

Triggered when the maximum elevation value has changed. The change may be result of some of the elevation layer property changes or a change in point elevations.

The event listener will be called with one parameter equal to the current maximum elevation value:

elevationsLayer.on("maxElevationChanged", maxElevation => {
  // Use the new maxElevation value
});

This event may be useful when your code somehow depends on knowing the maximum elevation value, for example to normalize elevation values to the 0...1 range for legend display purposes.

onColorBandsChanged

Triggered when new colorBands have been set.

This event may be useful when implementing map legend display to follow the changes of the elevations layer color bands.