pa7/heatmap.js

🔥 JavaScript Library for HTML5 canvas based heatmaps

heatmap.js

Dynamic Heatmaps for the Web.

How to get started

The fastest way to get started is to install heatmap.js with bower. Just run the following command:

bower install heatmap.js-amd

This will download the latest working version of heatmap.js and put it in your bower_components folder.

Alternatively you could just download the latest release from github and unzip it.

The file you're ultimately looking for is heatmap.js or heatmap.min.js

heatmap.js is also hosted on npm:

npm install heatmap.js

How to run the local examples

Start a webserver (e.g. python SimpleHTTPServer from the project directory root):

python -m SimpleHTTPServer 1337 &

Then browse to

http://localhost:1337/examples/

Get involved

Please have a look at the contribution guidelines before submitting contributions.

Disclaimer: PRs can take time to receive feedback or be merged ( I'm only one person with very little time ) but I'm trying to get back to everyone eventually

Questions?

In order to keep technical questions in a central place where other people can learn from it, the best thing you can do is post your question to stackoverflow with the tag heatmap.js.

If you do have a very specific question (or need commercial support) don't hesitate to contact me directly via email.

Mailing list

Want to receive the latest updates and news about heatmap.js?

There is a mailing list. No spam, just news and important updates.

heatmap.js's Issues

Option for only collecting the data?

I'd like to use this plugin to collect data for A/B testing. Is it possible to turn off visualization/canvas part?

Leaflet support

It would be great if there was also support for Leaflet maps.
I was trying to implement it myself, but I'm really out my league here.
There is already a heatmap project for Leaflet, however I really like this one and I was already sucessfully using it on Google Maps.

Is anyone interested in this?

Update Leaflet to the latest stable

Updating Leaflet to the latest stable will fix the wonky zoom animation issue in Chrome.

logarithmic color scale

It would be nice to have the option of using a logarithmic (instead of linear) mapping for the color scale. E.g. see map at http://en.wikipedia.org/wiki/Logarithmic_scale#Graphic_representation
A logarithmic scale makes it easier to see and compare ratio relationships (instead of interval relationships) over a large data range.

I think this could be implemented either in the drawing of the alphamap, or in the mapping of the alphamap value to the color map.

I would be willing to do some implementation on this, if I can get over the git hurdles.

Implement a mapbox.js heatmap layer

Haven't found an existing implementation, might do so myself soon.

Creating leaflet using custom image instead of Google Map

Hi
First of all,Great Work!!!!
I want a little support,i want to use my own image having zoom in and zoom out feature.
And want to draw heatmap over it.
So is there a way out to do so.
I've seen your examples but you are using google maps for that.
So is it possible to do the same with my own image?

use typeof instead of instanceOf

I found that in certain scenarios on some browsers (firefox latest 7) the instanceOf for the element does NOT evalute to an Object even though the typeOf is "object". This appears to be if using the heatmap in an iframe or different window.

So this:
me.set("element", (config.element instanceof Object)?config.element:document.getElementById(config.element));

would be better as:
me.set("element", (typeof(config.element) == 'object')?config.element:document.getElementById(config.element));

Leaflet demo not working with latest version

the heatmap image has been cut

hi,

heatmap is really cool.I am trying to use it in my website.

I just render about 500 points in a div, but the heatmap image has been cut.

Here is my config
var config = {
"radius": 15,
"element": "heatmapEl",
"visible": true,
"opacity": 20,
"gradient": { 0.45: "rgb(0,0,255)", 0.55: "rgb(0,255,255)", 0.65: "rgb(0,255,0)", 0.95: "yellow", 1.0: "rgb(255,0,0)" }
};

var heatmap = heatmapFactory.create(config);

Do I miss something?

Wait online..........

Thanks.

heatmap-leaflet.js needs to implement getBounds so map can fit bounds

To be able to:

map.fitBounds( heatMapLayer );

I needed to implement getBounds:

L.TileLayer.HeatMap.prototype.getBounds = function() {
var self = this;
return self._bounds;
}

Not working on Chrome 28 (blink) any more

No errors in console. Canvas simply remains blank.

addDataPoint equivalent for leaflet layer?

I'm trying to dynamically update the heatmap layer when I click on the map based on certain parameters. So if the parameters come out true; I was hoping to do:
heatmapLayer.addData([{}]);
which works fine, but overwrites all other data.
I see from your dynamic canvas example that the 'heatmap.store.addDataPoint()' is what I'm after, is there a way to do this with the leaflet layer?

Thanks, and great work by the way!

Ramo

Versions?

Would be nice if the library used semver (or really versions at all). And had tags pointing to those commits so GitHub Releases were useful.

Cannot render heatmap with OL and Google Streets layer

Hello,

I'm not sure if it should work, but I'm using OpenLayers as my map library and I need to display a google maps base layer, the streets layer, for instance.

I've copied and pasted code from the OpenLayers sample and it all runs smooth but nothing draws.

Is this a problem with the library or am I screwing things up?

Example:

$().ready(function(e){

            map = new OpenLayers.Map("mapa",{
                projection: proj,
                displayProjection: proj
            });

            var googleStreets = new OpenLayers.Layer.Google("Streets (Base)", {
                type : google.maps.MapTypeId.STREET,
                numZoomLevels: 21,
                MAX_ZOOM_LEVEL: 20
            });

            var osm = new OpenLayers.Layer.OSM();

            var testData={
                max: 46,
                data: [{lat: 33.5363, lng:-117.044, count: 1},{lat: 33.5608, lng:-117.24, count: 1},{lat: 38, lng:-97, count: 1},{lat: 38.9358, lng:-77.1621, count: 1}]
            };

            var transformedTestData = { max: testData.max , data: [] },
                    data = testData.data,
                    datalen = data.length,
                    nudata = [];

            while(datalen--){
                nudata.push({
                    lonlat: new OpenLayers.LonLat(data[datalen].lon, data[datalen].lat),
                    count: data[datalen].count
                });
            }

            transformedTestData.data = nudata;
            // create our heatmap layer
            var heatmap = new OpenLayers.Layer.Heatmap("Heatmap Layer",
                                                       map,
                                                       googleStreets,
                                                       {visible: true, radius:10},
                                                       {isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")}
            );

            map.addLayers([googleStreets, heatmap]);
            map.zoomToMaxExtent();
            map.zoomIn();

            function setData() {
                heatmap.setDataSet(transformedTestData);
            }

            setTimeout(setData,5000);

heatmap-arcgis.js doesn't work with version 3.5 of the ArcGIS API

If you switch out the 3.2 api in arcgis.html for the 3.5 version it throws a TypeError "esri.layers is undefined" in heatmap-arcgis.js on the line "var Widget = declare("HeatmapLayer", [esri.layers.DynamicMapServiceLayer], {"

You can test this by changing script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2" to script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5" in arcgis.html in the examples under demo/maps_heatmap_layer

When radius is small < 7, in the leaflet heatmap layer, the heatmap is clipped on tile boundaries

attaching image to show the problem. this occurs for radius = 3. I see this clipping till radius = 7, after that it start smoothing out and is difficult to see.

Best method for collecting data?

I'd love to implement this on a site, where I'm collecting the data, and will use headmap.js to build the results once in awhile. The problem, is that I'm not sure how to collect the actual data in real time?

For example, this data:

{max: 90, data: [
{x: 100, y: 100, count: 80},
{x: 120, y: 120, count: 60},
{x: 100, y: 80, count: 90},
{x: 111, y: 110, count: 60},
{x: 201, y: 150, count: 90},
{x: 311, y: 110, count: 60},
{x: 121, y: 510, count: 70},
{x: 511, y: 110, count: 60},
{x: 211, y: 110, count: 50},
{x: 191, y: 110, count: 20},
{x: 511, y: 110, count: 40}
]}

Is essentially all I need to collect, where a click count affects the count number, and new cord. Most data would be count: 1, 2 or so.

Empty Heatmap in FF 12 or 13

Reproduction steps:

• In Windows 7, open Firefox 13
• go to http://www.patrick-wied.at/static/heatmapjs
• click "Display website's realtime heatmap"
• no heatmap displayed

The same demo heatmap displays correctly in Chrome and IE.

Multiple heatmaps

It doesn't seem to be possible to have multiple heatmaps on one page?

Labels issue

i want to show the x axis and y axis labels.but unable to do that? any one please help me

Change colour when merging spots on leaflet layers

Say you have 3 spots with a value or 100 each.

When zooming out 2 of those spots will merge, both of the remaining dots will have the same colour.

The dot containing two dots should be 100% and the other should be 50%.

Not compatible with leaflet 0.7.1?

Hi I am having trouble to get a leaflet heatmap to work, then I noticed that, in the examples, the leaflet version used is 0.5.1. In my project I am using version 0.7.1

when I changed the leaflet version in the leaflet example to 0.7.1 the example also stopped working. The erro I am getting is:

Uncaught TypeError: Cannot read property 'lng' of undefined in line 136 of heatmap-leaflet.js

ol3 support

does heatmap.js support ol3?

Canvas not redrawn unless zoom is changed with leaflet

I have a strange bug in my app using the heatmap.js plugin, and I'm not sure if the problem is in my code, in leaflet, or in the plugin.

I'm drawing heatmaps and dynamically creating new ones. So it should erase the old one and trace a new one. Surprisingly it doesn't erase the old one until I zoom out or in.

I also saw a " cannot read propriety "_zoom" of null "error once but I have been unable to replicate it.

Note: latest version of Leaflet ( 0.7) and heatmap.js.

Here is some images to understand what happens:

Step 1 : click on a button to draw a heatmap around paris:

Result: as expected: a heatmap around Paris.

Step 2: click on a button to draw a heatmap in the east:

Result: the second heatmap is added, but the one around paris isn't erased. (Error)

Step 3: click on the plus icon to zoom on the map

Result: zoom as intended, and the heatmap around Paris disappear.

Here is the code of the setData function , it replaces data and call redraw:

 setData: function ( dataset )
 {
    var self = this;
    var latLngs = [];
    this._maxValue = 0;
    dataset.forEach( function ( d )
    {
        latLngs.push( new L.LatLng( d.lat, d.lon ) );
        self._maxValue = Math.max( self._maxValue, d.value );
    } );
    this._bounds = new L.LatLngBounds( latLngs );

    this._quad = new QuadTree( this._boundsToQuery( this._bounds ), false, 6, 6 );

    dataset.forEach( function ( d )
    {
        self._quad.insert( {
            x: d.lon,
            y: d.lat,
            value: d.value
        } );
    } );
    this.redraw();
   }

How to use the legend feature recently implement?

I have seen in commit history that you've added legend support and I got very interesting in it, but even examining the source I haven't understood how to use it. Could you give me some tip?

Setting data via setDataSet results in differently stored data which breaks exportDataSet

Using the same data points, eg:

[{x: 10, y: 20, count: 5}, {x: 20, y: 30, count: 6}]

Setting the heatmap's store data via addDataPoint:

[{x: 10, y: 20, count: 5}, {x: 20, y: 30, count: 6}].forEach(function(point){
  heatmap.store.addDataPoint(point.x, point.y, point.count);
});

...results in a the data stored as a two dimensional array with indices of the x and y coordinates (like data[x][y]), and values as the count at that coordinate.

But setting the same data via setDataSet:

heatmap.store.setDataSet({max: 6, data: [{x: 10, y: 20, count: 5},{x: 20, y: 30, count: 6}]})

...results in the heatmap.store data as a single dimensional array of points like {x:, y:, count:}.

exportDataSet() expects the two dimensional array, and returns nonsense if the data was set via setDataSet.

What is the max point numbers?

Hi

I hope it's ok to post this question here.
I would like to say this project is great!!!
I am using google map and I want to create a heatmap.
I've tried to follow your example - and it's works.
I have about 5400 point to add to the map - I've tried it and it doesn't work.

What is the max number of point you can add?

if I need to add about 50000 point - can i use this project or can you recommend other options?
Thanks

Leaflet layer doesn't handle dynamic data very well

I have been able to reproduce some strange results by constantly adding data to the heatmap. here is what it looks like...

If you add this code to the map and click a few times you will start to notice that that you no longer have a nice continuous heatmap and that points start to layer on top of each other rather then merge together.

Here is the code I added to the leaflet demo.

function getRandomLatLng(map) {
  var bounds = map.getBounds(),
    southWest = bounds.getSouthWest(),
    northEast = bounds.getNorthEast(),
    lngSpan = northEast.lng - southWest.lng,
    latSpan = northEast.lat - southWest.lat;

  return new L.LatLng(
      southWest.lat + latSpan * Math.random(),
      southWest.lng + lngSpan * Math.random());
}

map.on("click", function(){
  var data = []
  for (var i = 200 - 1; i >= 0; i--) {
    var latlng = getRandomLatLng(map);
    data.push({
      lat: latlng.lat,
      lon: latlng.lng,
      value: 1
    })
  }
  heatmapLayer.setData(data);
});

I guess I would like to know if this is an issue specific to the leaflet layer or specific to core library. I really need to be able to add data dynamically for the HeatMap layer I want to do for Esri Leaflet Esri/esri-leaflet#22 which would requires pulling data down from a web service and adding to the heatmap dynamically.

OpenLayers Example

The map is not properly rendered... (Chrome 26.0.1410.43, OSX 10.8.3)

heatmap-leaflet.js lacks the ability to pass in a max value to setData()

Other versions of this library, like the gmaps version, provide the ability to pass in a max value as an argument to the setData() function. However, heatmap-leaflet.js seems to be lacking this feature. Are there any plans to add it?

What's mean of h337?

any special mean?

heatmap-leaflet.js broken _draw on radiusValue

I couldn't get heatmap-leaflet.js working until I fixed line 173 from:

radiusValue = this.options.radius.value;

to

radiusValue = this.options.radius;

1D heatmap

Hi,

first of all many thanks for the great job that has been made with this lib.
Is there any way I can use it to produce 1D heatmaps ? For now, the only solution I've figured out is to set all the points at the same y coordinate (I want an horizontal map), but as the zones are circular, it doesn't really produce the desired result.

What I get:

What I'd like:

Thanks in advance.

Implement a custom Renderer using Heatmap.js

Hello,

Do you think it would be a good idea to create a custom renderer using heatmap.js ?

Example of code:

var layer = new OpenLayers.Layer.Vector('Vectorlayer', {renderers: ['heatmap']});

I'm asking this because I'm trying to implement Heatmaps in Drupal and OpenLayers and I'm having some troubles, related to the asynchronous loading of features through geoJSON or KML.

Thanks

Heatmap crashes with latest leaflet version 0.7

Uncaught Error: IndexSizeError: DOM Exception 1 heatmap.js:512

VML Support /

Currently you are using a canvas layer for rendering the heatmap. For old-browser support (IE 6-8) it would be awesome to have a VML fallback. You might know excanvas (http://code.google.com/p/explorercanvas/).

It shouldn't be that much work to create an abstraction layer for different drawing engines. As far as I know you are using filled rects and arcs for generating the heatmap. Using such an abstraction layer even an SVG drawing should be possible.

Google Layer

Adding points using addDataPoint() function is not working properly after you pan the map.

For ex. this code:
google.maps.event.addListener(map, 'click', function( evt ) {
heatmap.addDataPoint(evt.latLng.lat(), evt.latLng.lng());
})

does not work after pan.

setDataSet unexpected behaviour

Calling heatmap.setDataSet(heatmap.exportDataSet()) gives unexpected behaviour. In fact the points on the canvas simply dissapear and are not redrawn.

I would expect the points on the canvas to be redrawn.

New type of Heatmaps

Hello there,

I'm willing to create such kinds of Heatmaps: http://alastaira.files.wordpress.com/2011/02/image22.png

Is there people who can help me to do it or point me in the right directions ?

Thanks !

Heatmap looks weird in Leaflet with radius < 30

Check http://offsets.textual.ru/map (radius=10; click "heatmap"). When radius < 30, all heatmap blobs are cut into boxes too small.

Most recent build of leaflet breaks heatmap-leaflet

Leaflet 0.6.4, the most recent stable version works, however if you're building the leaflet source yourself, the heatmap fails to render any of the points with a js error at certain zoom level (some levels work and some don't depending on the radius you've set).

About zoom/bounds change

Hello,

I'm testing the heatmap and is a great work. Actually I'm using with gmaps and there's a "trouble" when you change the zoom/bounds because the canvas stay relative of parent div of gmaps.
I was reading about -webkit/-moz transform and thinking about use this relative to remake the canvas and stay it "out" of this scale. What u think about? Do u have some idea about?
Thanks.

heatmap getting jumpy after dragging

Hi,

I'm using heatmap.js + googlemap.

Heatmap displays perfectly and I can zoom in and out without problems.
but once I have dragged the map, the rendering gets jumpy.
That is, on refresh, it displays well (in sync with the drag), but immediatly translates the heatmap to the place it was before I dragged. It remains jumpy like this at every refresh.

code is as follow :

this.options = {
          zoom: 5,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          disableDefaultUI: false,
          scrollwheel: true,
          draggable: true,
          navigationControl: true,
          mapTypeControl: false,
          scaleControl: true,
          disableDoubleClickZoom: false
        };
        this.map = new google.maps.Map(this.$el.find("#heatmapArea")[0], this.options);

        this.heatmap = new HeatmapOverlay(this.map, {
            "radius":20,
            "visible":true, 
            "opacity":60
        });


        // this is important, because if you set the data set too early, the latlng/pixel projection doesn't work
        var that = this;
        google.maps.event.addListenerOnce(this.map, "idle", function(){
            that.updateMap(that.map);
        });
        google.maps.event.addListener(this.map, 'click', function(e) {
            that.updateMap(that.map);
            //alert(e.latLng);
        });
        google.maps.event.addListener(this.map, 'bounds_changed', function(e) {
            that.updateMap(that.map, function(){
                that.updateChart(that.locationData);
            });
    });

...

updateMap: function (map, callback){
        var bound = map.getBounds();
        var queryObject = {
                north: bound.getNorthEast().lat(),
                south: bound.getSouthWest().lat(),
                east : bound.getNorthEast().lng(),
                west : bound.getSouthWest().lng(),
        };
        var that = this;
        $.getJSON('areaGeolocations', queryObject, function(data) {
            that.locationData = data;
            var geoData = new Array();

            $.each(data.geolocationLogs, function(key, val) {
                geoData.push({lng:val.longitude, lat:val.latitude, count:1});
            });

            that.heatmap.setDataSet({max: 5, data: geoData});
            if(callback)
                callback();
        });
    },

any idea ?

(also posted at http://stackoverflow.com/questions/20692085/heatmap-js-getting-jumpy-after-pan)

cheers!

two color gradient

Is there a ways to create a two color gradient like count: (blue) -1 > 0 > 1 (red) with heatmap.js?

canvasContext.fillRect throws NS_ERROR_FAILURE exception in Firefox

In Firefox, when the heatmap's height changes to higher than 20000, it sometimes throws the exception of "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMCanvasRenderingContext2D.fillRect]". I'm really anxious for the solutions.Thx

Heatmap does not work with latest leaflet

I mean "leaflet master" from this page. It shows heatmap only on transitions, but not on a static maps, regardless of zoom level.

redraw method for leaflet-heatmap.

When updating a dataset with addDataSet method in HeatMapLayer, can you provide a redraw() method to update with the new dataset or new additional data points?

Radius of gradient very strange

Hi,
first of all thank you for this extremely cool library. It was fun to use it! :)
I have a question regarding the gradient radius. If I add a single point to the map (using the leaflet extension) I end up with a circle which is 95% red and the outer 5% make up the rest of the gradient.

This is what I have:

What I want is a more naturally gradient, so red is only until 50% of the circle-radius, and then yellow and then green. Hope you get what I mean. You can see a live demo here: http://h1968061.stratoserver.net/myhive/

Cheers,
Daniel

HTML5 required for user or administrator?

This plugin looks great.
One thing I couldn't find in the documentation is whether HTML5 compliant browsers are required for writing the data, or only for the reading part.

So my question is, is the data gathered only apply able to users with an HTML5 browser? Or is the data global and is HTML5 only required for the readout of the data?

error when loading multiple points (+1000 points)

hi,

i got this error:

"Uncaught TypeError: Cannot read property 'lon' of undefined "

i need to load aprox 55.000 points

and the error is only trying to bringing 1.000

(if i put 250 it works fine)

attached image of chrome console error: