├── .jshintrc ├── MIT-LICENSE.txt ├── README.md ├── src ├── heatmap.js └── HeatmapLayer.js ├── license.txt └── index.html /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "undef": true, 3 | "browser":true, 4 | "devel":true, 5 | "globals": { "require": false, "define":false } 6 | } -------------------------------------------------------------------------------- /MIT-LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright 2012 Esri and other contributors 2 | http://esri.com/ 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining 5 | a copy of this software and associated documentation files (the 6 | "Software"), to deal in the Software without restriction, including 7 | without limitation the rights to use, copy, modify, merge, publish, 8 | distribute, sublicense, and/or sell copies of the Software, and to 9 | permit persons to whom the Software is furnished to do so, subject to 10 | the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 19 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 20 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 21 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # heatmap-layer-js 2 | 3 | This is a custom DynamicMapServiceLayer for Heatmap.js to work with the ArcGIS Javascript API. 4 | 5 | [View it live](http://esri.github.com/heatmap-layer-js/) 6 | 7 | ## Features 8 | [http://www.patrick-wied.at/static/heatmapjs/](http://www.patrick-wied.at/static/heatmapjs/) 9 | heatmap.js is a JavaScript library that can be used to generate web heatmaps with the html5canvas element based on your data. Heatmap instances contain a store in order to colorize the heatmap based on relative data, which means if you're adding only a single datapoint to the store it will be displayed as the hottest(red) spot, then adding another point with a higher count, it will dynamically recalculate. The heatmaps are fully customizable - you're welcome to choose your own color gradient, change its opacity, datapoint radius and many more. 10 | 11 | ## Instructions 12 | See example HTML file included in download. 13 | 14 | [New to Github? Get started here.](https://github.com/) 15 | 16 | ## Requirements 17 | 18 | * Notepad or HTML editor 19 | * A little background with Javascript 20 | * Experience with the [ArcGIS Javascript API](http://www.esri.com/) would help. 21 | 22 | ## Resources 23 | 24 | * [ArcGIS for JavaScript API Resource Center](http://help.arcgis.com/en/webapi/javascript/arcgis/index.html) 25 | * [ArcGIS Blog](http://blogs.esri.com/esri/arcgis/) 26 | * [twitter@esri](http://twitter.com/esri) 27 | 28 | ## Issues 29 | 30 | Find a bug or want to request a new feature? Please let us know by submitting an issue. 31 | 32 | ## Contributing 33 | 34 | Anyone and everyone is welcome to contribute. 35 | 36 | ## Licensing 37 | 38 | Copyright 2017 Esri 39 | 40 | Licensed under the Apache License, Version 2.0 (the "License"); 41 | you may not use this file except in compliance with the License. 42 | You may obtain a copy of the License at 43 | 44 | http://www.apache.org/licenses/LICENSE-2.0 45 | 46 | Unless required by applicable law or agreed to in writing, software 47 | distributed under the License is distributed on an "AS IS" BASIS, 48 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 49 | See the License for the specific language governing permissions and 50 | limitations under the License. 51 | 52 | A copy of the license is available in the repository's [license.txt](https://raw.github.com/Esri/heatmap-layer-js/master/license.txt) file. 53 | -------------------------------------------------------------------------------- /src/heatmap.js: -------------------------------------------------------------------------------- 1 | /* 2 | * heatmap.js v2.0.0 | JavaScript Heatmap Library 3 | * 4 | * Copyright 2008-2014 Patrick Wied - All rights reserved. 5 | * Dual licensed under MIT and Beerware license 6 | * 7 | * :: 2014-08-05 01:42 8 | */ 9 | (function(a){var b={defaultRadius:40,defaultRenderer:"canvas2d",defaultGradient:{.25:"rgb(0,0,255)",.55:"rgb(0,255,0)",.85:"yellow",1:"rgb(255,0,0)"},defaultMaxOpacity:1,defaultMinOpacity:0,defaultBlur:.85,defaultXField:"x",defaultYField:"y",defaultValueField:"value",plugins:{}};var c=function i(){var a=function d(a){this._coordinator={};this._data=[];this._radi=[];this._min=0;this._max=1;this._xField=a["xField"]||a.defaultXField;this._yField=a["yField"]||a.defaultYField;this._valueField=a["valueField"]||a.defaultValueField;if(a["radius"]){this._cfgRadius=a["radius"]}};var c=b.defaultRadius;a.prototype={_organiseData:function(a,b){var d=a[this._xField];var e=a[this._yField];var f=this._radi;var g=this._data;var h=this._max;var i=this._min;var j=a[this._valueField]||1;var k=a.radius||this._cfgRadius||c;if(!g[d]){g[d]=[];f[d]=[]}if(!g[d][e]){g[d][e]=j;f[d][e]=k}else{g[d][e]+=j}if(g[d][e]>h){if(!b){this._max=g[d][e]}else{this.setDataMax(g[d][e])}return false}else{return{x:d,y:e,value:j,radius:k,min:i,max:h}}},_unOrganizeData:function(){var a=[];var b=this._data;var c=this._radi;for(var d in b){for(var e in b[d]){a.push({x:d,y:e,radius:c[d][e],value:b[d][e]})}}return{min:this._min,max:this._max,data:a}},_onExtremaChange:function(){this._coordinator.emit("extremachange",{min:this._min,max:this._max})},addData:function(){if(arguments[0].length>0){var a=arguments[0];var b=a.length;while(b--){this.addData.call(this,a[b])}}else{var c=this._organiseData(arguments[0],true);if(c){this._coordinator.emit("renderpartial",{min:this._min,max:this._max,data:[c]})}}return this},setData:function(a){var b=a.data;var c=b.length;this._max=a.max;this._min=a.min||0;this._data=[];this._radi=[];for(var d=0;dthis._renderBoundaries[2]){this._renderBoundaries[2]=l+2*j}if(m+2*j>this._renderBoundaries[3]){this._renderBoundaries[3]=m+2*j}}},_colorize:function(){var a=this._renderBoundaries[0];var b=this._renderBoundaries[1];var c=this._renderBoundaries[2]-a;var d=this._renderBoundaries[3]-b;var e=this._width;var f=this._height;var g=this._opacity;var h=this._maxOpacity;var i=this._minOpacity;if(a<0){a=0}if(b<0){b=0}if(a+c>e){c=e-a}if(b+d>f){d=f-b}var j=this.shadowCtx.getImageData(a,b,c,d);var k=j.data;var l=k.length;var m=this._palette;for(var n=3;n0){q=g}else{if(o>0;return b},getDataURL:function(){return this.canvas.toDataURL()}};return d}();var e=function k(){var a=false;if(b["defaultRenderer"]==="canvas2d"){a=d}return a}();var f={merge:function(){var a={};var b=arguments.length;for(var c=0;c 2 | 3 | 4 | 5 | 6 | 7 | 9 | 10 | heatmap.js ArcGIS JavaScript API Heatmap Layer 11 | 13 | 14 | 15 | 82 | 83 | 84 | 85 |
86 |

ArcGIS JavaScript API Heatmap Overlay

87 | Download code. 88 |
90 |
91 |
92 |
93 |
San Francisco 311 incidents
94 |
95 |
96 |
97 |

Sidenotes

98 | This is a demonstration of a canvas heatmap overlay with the ArcGIS API for JavaScript. 100 |
101 |
View the Feature layer. 103 |
Toggle HeatmapOverlay
104 |
Toggle Points
105 |
Local Max Off
106 |
107 |
heatmap.js by 108 | Patrick Wied 110 |
111 |
112 |
113 |
114 |

Description

115 | 116 |

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

118 |

Instructions

119 | 120 |
    121 |
  1. Include the heatmap.js in your HTML document and require "application/HeatmapLayer" 
    122 |         <script type="text/javascript" src="src/heatmap.js"></script>
123 |
    124 | 125 |
    2. 126 |
  2. Add a div with an ID to hold he canvas element 
    <div id="heatLayer"></div>
    127 | 128 |
    3. 129 |
  3. Create the heatmap with it's settings and assign it to a global variable. 
    130 |         // create heat layer
131 |             heatLayer = new HeatmapLayer({
132 |                 config: {
133 |                     "useLocalMaximum": false,
134 |                     "radius": 40,
135 |                     "gradient": {
136 |                         0.45: "rgb(000,000,255)",
137 |                         0.55: "rgb(000,255,255)",
138 |                         0.65: "rgb(000,255,000)",
139 |                         0.95: "rgb(255,255,000)",
140 |                         1.00: "rgb(255,000,000)"
141 |                     }
142 |                 },
143 |                 "map": map,
144 |                 "opacity": 0.85
145 |             }, "heatLayer");
146 |
    147 | 148 |
    4. 149 |
  4. Add the heatLayer to the map. 
    150 |         map.addLayer(heatLayer);
151 |
    152 | 153 |
    5. 154 |
  5. Now you just need to add data points to the heatmap. In the example above, 155 | I am adding features from a feature layer of 311 incidents. Here's an example with 156 | two features. 
    157 |         var data = [
158 |             {
159 |                 attributes: {},
160 |                 geometry: {
161 |                     spatialReference: {wkid: 102100}
162 |                     type: "point"
163 |                     x: -13625078.0408
164 |                     y: 4548494.332400002
165 |                 }
166 |             },
167 |             {
168 |                 attributes: {},
169 |                 geometry: {
170 |                     spatialReference: {wkid: 102100}
171 |                     type: "point"
172 |                     x: -13625078.0408
173 |                     y: 4548494.332400002
174 |                 }
175 |             }
176 |         ];
177 |
    178 | 
    179 |         heatLayer.setData(data);
180 |
    181 | 182 |
    6. 183 |
  6. I created a function that executes on map pan that gets all the features 184 | from a featureLayer within the map's extent. 185 | 
    186 | function getFeatures() {
187 |     // set up query
188 |     var q = new Query();
189 |     // only within extent
190 |     q.geometry = map.extent;
191 |     // give me all of them!
192 |     q.where = "1=1";
193 |     // make sure I get them back in my spatial reference
194 |     q.outSpatialReference = map.spatialReference;
195 |     // get em!
196 |     featureLayer.queryFeatures(q, function (featureSet) {
197 |         var data = [];
198 |         // if we get results back
199 |         if (featureSet && featureSet.features && featureSet.features.length > 0) {
200 |             // set data to features
201 |             data = featureSet.features;
202 |         }
203 |         // set heatmap data
204 |         heatLayer.setData(data);
205 |     });
206 | }
207 |
    208 | 209 |
    7. 210 |
211 |

Dependencies

212 | 213 |
    214 |
  • HTML5 Canvas 215 | 217 |
    • 218 |
  • Heatmap.js 219 | 220 |
    • 221 |
222 |
223 | 224 | 238 | 239 | 240 | 364 | --------------------------------------------------------------------------------