heatcanvas
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.com/heatcanvas
Available via bower
bower install heatcanvas
Webpack Build
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.
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.push(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){
return [0.3, 0.75, value, 1];
}
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);
Other extensions
There are also HeatCanvas extensions for:
These extensions share similar API mentioned above. You can browse the source
code of our demos to get detail.
License
HeatCanvas is released according to MIT License.
Thanks
- @lbt05 for his patches on GoogleMap extension and BaiduMap implementation
- @dazuma for his suggestion to speed up canvas rendering.