Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sunng87/heatcanvas
Pixel based heatmap with html5 canvas.
https://github.com/sunng87/heatcanvas
Last synced: 9 days ago
JSON representation
Pixel based heatmap with html5 canvas.
- Host: GitHub
- URL: https://github.com/sunng87/heatcanvas
- Owner: sunng87
- Created: 2011-05-26T02:03:36.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2022-02-14T13:59:43.000Z (over 2 years ago)
- Last Synced: 2024-10-22T16:50:27.664Z (17 days ago)
- Language: JavaScript
- Homepage: http://sunng87.github.com/heatcanvas/
- Size: 173 KB
- Stars: 401
- Watchers: 32
- Forks: 54
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-starred - sunng87/heatcanvas - Pixel based heatmap with html5 canvas. (others)
README
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.
[![CDNJS](https://img.shields.io/cdnjs/v/heatcanvas.svg)](https://cdnjs.com/libraries/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.io/heatcanvas](http://sunng87.github.io/heatcanvas "Visit the live demo")
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.CUBICFor 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:
* Baidu Map ([demo](http://sunng87.github.io/heatcanvas/baidumap.html "BaiduMap Demo"))
* Cloudmade Leaflet ([demo](http://sunng87.github.io/heatcanvas/leaflet.html "Leaflet Demo"))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.