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

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.