Note that this project is no longer active maintained. Please let me know(file an issue or send me email) if you are interested in taking over it.

This is a simple heatmap api based on HTML5 canvas. A heat map is a graphical representation of data where the values taken by a variable in a two-dimensional table are represented as colors, according to Wikipedia.

You can find an interactive demo at http://sunng87.github.io/heatcanvas

bower install heatcanvas

npm run webpack

This will generate a build in the /dist folder. This includes the main heatcanvas.js, the heatcanvas-worker.js Web Worker script, and specific versions for 51 Maps, Baidu Maps, Google Maps, Leaflet Maps, and OpenLayers.

To use, import into an HTML document using a script tag. The imports will be available at HeatCanvas, HeatCanvas51Layer, HeatCanvasBaiduLayer, HeatCanvasOverlayView, HeatCanvasLeaflet, and HeatCanvasOpenLayers respectively.

You can pass the canvas element object or its id to the constructor:

var heatmap = new HeatCanvas("canvasId");

Add value to point (x,y) in canvas coordinate system.

heatmap.push(x, y, value);

Call the render function on heatmap to draw it.

heatmap.render();

We use a simple formula to determine value of a pixel, by its distance to a point that holds data:

v = f(d)

The first two optional parameters of render define the formula.

• step

• degree

  v = Σ(data_i - step * d^degree)

A set of constants are predefined for degree:

• HeatCanvas.LINEAR
• HeatCanvas.QUAD
• HeatCanvas.CUBIC

For the third parameter of render, you can define a custom function to define color of pixels. For instance, we can use a mono-hue color scheme by this function:

var colorscheme = function(value){
    return [0.3, 0.75, value, 1];
}
heatmap.render(null, null, colorscheme);

The value for this function is guaranteed in (0,1].

Call clear to erase the canvas and remove all data cached in heatmap instance.

heatmap.clear();

HeatCanvas can be used as an OverlayView in GoogleMaps API V3.

Simply use the Map instance to create an HeatCanvasOverlayView

var heatmap = new HeatCanvasOverlayView(map, options);

Additional options available:

• step, same as described in HeatCanvas.render
• degree, same as described in HeatCanvas.render
• colorscheme, same as described in HeatCanvas.render
• opacity, the opacity of overlay view, [0,1]

Add data to map:

heatmap.pushData(latitude, longitude, value);

The map will be rendered automatically.

Also we have a OpenLayer extension for you to embed heat map in your custom map application and OpenStreetMap.

The usage is still similar to GoogleMaps. First, construct your heat map layer with a name, OpenLayers map instance, layer options and HeatCanvas options:

var heatmap = new OpenLayers.Layer.HeatCanvas("HeatCanvas", map, {},
        {'step':0.3, 'degree':HeatCanvas.QUAD, 'opacity':0.8});

Add data to layer:

heatmap.pushData(latitude, longitude, value);

Add layer to map:

map.addLayer(heatmap);

There are also HeatCanvas extensions for:

• Baidu Map (demo)
• Cloudmade Leaflet (demo)

These extensions share similar API mentioned above. You can browse the source code of our demos to get detail.

HeatCanvas is released according to MIT License.

• @lbt05 for his patches on GoogleMap extension and BaiduMap implementation
• @dazuma for his suggestion to speed up canvas rendering.