pa7 / heatmap.js Goto Github PK

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.

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

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 !

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);

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.

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?

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

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.

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.

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

radiusValue = this.options.radius.value;

to

radiusValue = this.options.radius;

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

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.

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();
   }

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!

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.

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?

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

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));

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.

No errors in console. Canvas simply remains blank.

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

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

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.

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

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?

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

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

does heatmap.js support ol3?

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

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

any special mean?

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:

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

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.

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

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?

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

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.

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?

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.

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

To be able to:

map.fitBounds( heatMapLayer );

I needed to implement getBounds:

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

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.

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

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

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

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

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?

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.