+

Heatjs

Small, Efficient Lazy Loading Heat Maps

$ bower install heat

var h = new Heatmap({
    "element" : 'heatmap1'
});

//add one point 
h.add.Point(x, y, density);

How To Use


var h = new Heatmap({
    "element" : 'heatmap1',
    size : 10,
    opacity: 1,
    gradient : 'classic',
    shadow : 'small',
    zIndex : 10,
    queue : {
        items : 1000,
        delay : 100,
        onComplete : function(i){
            console.debug('queue complete ' + i);
        }
    }
});

//adding one point
h.add.Point(10, 20, 5); //x, y, point value

//set of data to add
var data = [{ x: 10, y: 5, count: 90}, ....];
h.add.Data(data, function(){
    //callback function when heatmap finish drawing all points
});

//clear heatmap
h.clear();

Options
  • element : element id where to draw the map
  • size : circle size of each point
  • opacity : maximum opacity value of the max point
  • gradient : type of heatmap gradiant
    • Default : classic | fire | gold
    • Custom : use your own png gradiant image
  • shadow : size of the shadow (small | medium | large)
  • zIndex : z-index value of the heatmap overlay
  • queue : data point queue options
    • items : number of items to draw at once
    • delay : time to delay between each queue set
    • onComplete : callback function on every queue set

Examples