Join the DZone community and get the full member experience.Join For Free
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,
, which allows rendering vector data as a heatmap. so the question is: how is it made?
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
offers some properties we can use to play better:
. this last can be configured per feature, allowing to assign a
level of importance
to each feature determining more or less the final color.
Published at DZone with permission of Antonio Santiago, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.