JavaScript

How the JavaScript heatmap implementation works?

A heatmap is a powerful way to visualise 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 colour from a set of known values. As you can thing, it is not feasible to be implement it on the client side because map rendering would be really slow.

Screen-Shot-2014-12-23-at-18.25.49-300x206

But OpenLayers3 comes with a handy class, ol.layer.Heatmap, which allows to render vector data as a heatmap, so the question is: how it is 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 summarised 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.

Screen-Shot-2014-12-23-at-18.27.17-300x190

  • 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 coloured 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 in more or less measure the final color.

Reference: How the JavaScript heatmap implementation works? from our WCG partner Antonio Santiago at the A Curious Animal blog.

Antonio Santiago

A Computer Science as profession and hobby. Firm believer of Software Engineering and a lover of Agile methodologies. There is no ring to rule them all, every place needs to forge its own master ring. His main field of experience is the Java ecosystem, and he has also worked actively with many related web technologies while looking to improve the client side of web applications.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button