Skip to main content



The ALKMaps.Layer.HeatMap layer can be used to generate heat maps from a list of points. A color gradient is used to display these points based on the density and proximity between the individual points. The options for this layer are explained in the table below.

var heatMap = new ALKMaps.Layer.HeatMap("Heat Map Layer", {});
Option Type Description/Values
points Array<ALKMaps.LonLat> The list of points used to generate the heat map. The list can also be set, changed, or added to at any time after the layer has been initialized.
pointRadius Number The radius used when rendering the individual points.
Default: 10
opacity Number The opacity of the heat map in the range of 0-1 where 0 is invisible and 1 is completely opaque.
Default: 0.7
colorGradient Array<Number,String> An array of [step value, hexadecimal color notation] pairs ranging from 0-1, used to colorize the intensity mask of the heat map. For instance a step value of [1,"#FF0000"], would result in the centers of all points and all areas of the map that are densely populated with points to be red. A step value pair of [0.1,"#FF0000"], would instead cause the edges of the heat map to be red.

Heat Map Editing/Customization

As mentioned previously, the points used to render the heat map can be changed at any time. The setPoints function takes in an array of ALKMaps.LonLat objects as its only parameter, this array will replace any existing points being used for the heat map. The addPoints function also takes in an array of ALKMaps.LonLat objects, but instead this array will be appended to the existing list of points. And finally the clearPoints function will simply remove any existing points from the layer.

In addition to being able to alter the points, the pointRadius, opacity, and colorGradient options can be changed using the updateOptions function.

Last updated November 23, 2021.