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

Free Resource

Discover 50 of the latest mobile performance statistics with the Ultimate Guide to Digital Experience Monitoring, brought to you in partnership with Catchpoint.

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.

Is your APM strategy broken? This ebook explores the latest in Gartner research to help you learn how to close the end-user experience gap in APM, brought to you in partnership with Catchpoint.

Topics:

Published at DZone with permission of Antonio Santiago, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}