topic Re: Heatmap.js Layer delayed rendering in ArcGIS JavaScript Maps SDK Questions

Heatmap.js Layer delayed rendering

RyanClancy — Thu, 13 Jun 2013 14:37:37 GMT

I'm using the heatmap.js library and it's awesome. Really nice heatmaps and totally customizable. I'm stumped though because I can't figure out why rendering of the heatmap layer is delayed. I have followed the example by Matt Driscoll here, by adding the layer to the map immediately after calling the layer constructor; I then get my data from a map service, push it into an array, and use heatmapLayer.setData() to set the data source. It works, except the heatmap layer will only render if I pan or zoom my map after calling the function below. The heatmap layer appears to be ready to draw almost instantly upon executing the .setData() method, it just doesn't draw until I move the map. I have a featurelayer derived from the same map service which renders on its own (i.e. no pan/zoom required), it's just the heatmap that requires pan/zoom to render. Any ideas? Here's my heatmap code, which is inside a function called when the user pushes a button:

heatmapLayer = new HeatmapLayer({      config:{           "useLocalMaximum":false,           "radius": 35,           "gradient":{                0.45:"rgb(000,000,255)",                0.55:"rgb(000,255,255)",                0.65:"rgb(000,255,000)",                0.95:"rgb(255,255,000)",                1.00:"rgb(255,000,000)",           }      },      "map":map,      "domNodeId":"heatLayer",      "opacity":0.80 });  map.addLayer(heatmapLayer);  var data = []; var queryTask = new esri.tasks.QueryTask("myserver/arcgis/rest/services/sample/MapServer/0"); var query = new esri.tasks.Query(); query.returnGeometry = true; query.outFields = ["*"]; query.where = 'OBJECT_ID < 1000'; queryTask.execute(query, function(results){                                         for (var i=0, il = results.features.length; i < il; i++){                                              var point = {                                                   attributes: {},                                                   geometry:{                                                          spatialReference:{wkid:102100},                                                          type: "point",                                                          x: results.features.geometry.x,                                                          y: results.features.geometry.y                                                   }                                              }                                              data.push(point);                                    }), function(error){                                              alert("Error retrieving data for heatmap.\n" + error);                                         }); heatmapLayer.setData(data);

I've tried reducing the number of points in data[], adding heatmapLayer.hide(); and heatmapLayer.show(); after heatmap.setData(), and none of those make a difference. When the user adds a simple point featurelayer to the map based on the same map service as the heatmap data, that featurelayer is rendered without having to pan/zoom.

Thanks,
Ryan

Re: Heatmap.js Layer delayed rendering

RyanClancy — Thu, 13 Jun 2013 14:46:41 GMT

Bah! This is why I have only 1 forum point but have answered multiple questions; I keep answering my own posts! I guess articulating the problem in a forum posts makes it easier to see the solution.

...anyway, I solved this one almost immediately after posting the question. I moved the heatmapLayer.setData(); into the queryTask.execute() callback function and now it works!

queryTask.execute(query, function(results){                                         for (var i=0, il = results.features.length; i < il; i++){                                              var point = {                                                   attributes: {},                                                   geometry:{                                                          spatialReference:{wkid:102100},                                                          type: "point",                                                          x: results.features.geometry.x,                                                          y: results.features.geometry.y                                                   }                                              }                                              data.push(point);                                         }                                         heatmapLayer.setData(data);                                    }), function(error){                                              alert("Error retrieving data for heatmap.\n" + error);                                         });

Re: Heatmap.js Layer delayed rendering

TyroneLigon — Mon, 24 Jun 2013 13:42:00 GMT

Where would one obtain this heatmap library?

Re: Heatmap.js Layer delayed rendering

RyanClancy — Tue, 25 Jun 2013 15:09:00 GMT

Tyrone,

One would dowload the library from http://www.patrick-wied.at/static/heatmapjs/. One could also see my original post for a link to Matt Driscoll's blog about how to implement heatmap.js.

Ryan