Skip to content
Pixel based heatmap for html5 canvas.
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
README.md
googlemap.html
heatcanvas-googlemaps.js
heatcanvas-worker.js
heatcanvas.js
index.html

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://sunng.info/heatmap/

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.

License

HeatCanvas is released according to MIT License.

Something went wrong with that request. Please try again.