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: about 1 month ago
JSON representation

Pixel based heatmap with html5 canvas.

Lists

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.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:



* 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.