https://github.com/sunng87/heatcanvas

Pixel based heatmap with html5 canvas.
https://github.com/sunng87/heatcanvas

Last synced: 19 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 (almost 3 years ago)
• Last Synced: 2024-11-13T20:06:37.660Z (29 days ago)
• Language: JavaScript
• Homepage: http://sunng87.github.com/heatcanvas/
• Size: 173 KB
• Stars: 403
• 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.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.