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?
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:
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.