Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How the JavaScript Heatmap Implementation Works

DZone's Guide to

How the JavaScript Heatmap Implementation Works

· Performance Zone ·
Free Resource

Maintain Application Performance with real-time monitoring and instrumentation for any application. Learn More!

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.

Collect, analyze, and visualize performance data from mobile to mainframe with AutoPilot APM. Get a Demo!

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}