AnsweredAssumed Answered

Heatmap.js Layer delayed rendering

Question asked by drc_ on Jun 13, 2013
Latest reply on Jun 25, 2013 by drc_
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[i].geometry.x,                                                          y: results.features[i].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

Outcomes