Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Pixel based heatmap for html5 canvas.
tag: v1.0.1

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.md
heatcanvas-googlemaps.js
heatcanvas-openlayers.js
heatcanvas-worker.js
heatcanvas.js

README.md

HeatCanvas

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.com/heatcanvas

Usage

1. Create the HeatCanvas object

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

var heatmap = new HeatCanvas("canvasId");

2. Add some data

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

heatmap.add(x, y, value);

3. Render the map

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 = Σ(datai - step * ddegree)

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){
    var light = value * 100;
    return "hsl(20, 75%, "+light+"%)";
}
heatmap.render(null, null, colorscheme);

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

4. Remove everything we just created

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

heatmap.clear();

GoogleMap extension

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.

OpenLayers extension

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);

License

HeatCanvas is released according to MIT License.

Thanks

  • @lbt05 for his patches on GoogleMap extension
Something went wrong with that request. Please try again.