ArcGIS JavaScript API Heatmap Overlay

Description

This is a custom DynamicMapServiceLayer for Heatmap.js to work with the ArcGIS Javascript API.

Instructions

1. Include the heatmap.js in your HTML document and require "application/HeatmapLayer"

           <script type="text/javascript" src="src/heatmap.js"></script>
           

2. Add a div with an ID to hold he canvas element

   <div id="heatLayer"></div>

3. Create the heatmap with it's settings and assign it to a global variable.

           // create heat layer
               heatLayer = new HeatmapLayer({
                   config: {
                       "useLocalMaximum": false,
                       "radius": 40,
                       "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,
                   "opacity": 0.85
               }, "heatLayer");
           

4. Add the heatLayer to the map.

           map.addLayer(heatLayer);
           

5. Now you just need to add data points to the heatmap. In the example above, I am adding features from a feature layer of 311 incidents. Here's an example with two features.

           var data = [
               {
                   attributes: {},
                   geometry: {
                       spatialReference: {wkid: 102100}
                       type: "point"
                       x: -13625078.0408
                       y: 4548494.332400002
                   }
               },
               {
                   attributes: {},
                   geometry: {
                       spatialReference: {wkid: 102100}
                       type: "point"
                       x: -13625078.0408
                       y: 4548494.332400002
                   }
               }
           ];
           

           heatLayer.setData(data);
           

6. I created a function that executes on map pan that gets all the features from a featureLayer within the map's extent.

   function getFeatures() {
       // set up query
       var q = new Query();
       // only within extent
       q.geometry = map.extent;
       // give me all of them!
       q.where = "1=1";
       // make sure I get them back in my spatial reference
       q.outSpatialReference = map.spatialReference;
       // get em!
       featureLayer.queryFeatures(q, function (featureSet) {
           var data = [];
           // if we get results back
           if (featureSet && featureSet.features && featureSet.features.length > 0) {
               // set data to features
               data = featureSet.features;
           }
           // set heatmap data
           heatLayer.setData(data);
       });
   }
   

Dependencies

• HTML5 Canvas
• Heatmap.js