How the JavaScript Heatmap Implementation Works

a heatmap is a powerful way to visualize data. given a matrix of data each value is represented by a color. the implementation of the heatmap algorithm is expensive in computation terms: for each grid’s pixel you need to compute its color from a set of known values. as you could imagine, it is not feasible to implement it on the client side because map rendering would be really slow.

but openlayers3 comes with a handy class, ol.layer.heatmap , which allows rendering vector data as a heatmap. so the question is: how is it made?

really, the ol.layer.heatmap layer uses a smart approximation to the algorithm which produces great results and is really fast. the steps can be summarized as:

• a gradient of colors is created as a 1×256 pixel size image.
• each known value is rendered in a canvas as a grey blurred point using some radius. this produces a canvas where the blurred points can overlap each other and create more obscure zones. something similar to this .

• finally, an image is obtained from the canvas and for each pixels a color is assigned. the color is obtained from the previous 1×256 pixel image obtained the color specified by the grey value (which goes from 0..255).

the colored image is then rendered in the map canvas, obtaining a nice effect suited to be used for density maps. the ol.layer.heatmap offers some properties we can use to play better: blur , radius , gradient , shadow and weight . this last can be configured per feature, allowing to assign a level of importance to each feature determining more or less the final color.