no-heatmap.js 2.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/LICENSE +19 -0
  2. package/README.md +55 -0
  3. package/build/heatmap.js +729 -0
  4. package/build/heatmap.min.js +9 -0
  5. package/docs/assets/css/commons.css +41 -0
  6. package/docs/assets/css/docs.css +136 -0
  7. package/docs/assets/css/prism.css +126 -0
  8. package/docs/assets/js/prism.js +7 -0
  9. package/docs/faq.html +0 -0
  10. package/docs/getting-started.html +0 -0
  11. package/docs/how-to-migrate.md +97 -0
  12. package/docs/index.html +276 -0
  13. package/examples/angular-heatmap/index.html +64 -0
  14. package/examples/googlemaps-heatmap/index.html +65 -0
  15. package/examples/heatmap-legend/index.html +126 -0
  16. package/examples/leaflet-heatmap/index.html +80 -0
  17. package/examples/mousemove-heatmap/index.html +64 -0
  18. package/examples/raindrops/index.html +66 -0
  19. package/examples/svg-area-heatmap/austria.svg +1540 -0
  20. package/examples/svg-area-heatmap/index.html +62 -0
  21. package/examples/unblurred-datapoints/index.html +87 -0
  22. package/package.json +46 -0
  23. package/plugins/angular-heatmap/angular-heatmap.js +62 -0
  24. package/plugins/boilerplate.js +45 -0
  25. package/plugins/gmaps-heatmap/README.md +7 -0
  26. package/plugins/gmaps-heatmap/gmaps-heatmap.js +278 -0
  27. package/plugins/gmaps-heatmap/package.json +23 -0
  28. package/plugins/leaflet-heatmap/README.md +4 -0
  29. package/plugins/leaflet-heatmap/leaflet-heatmap.js +246 -0
  30. package/plugins/leaflet-heatmap/package.json +21 -0
  31. package/plugins/segment-heatmap.js +71 -0
  32. package/plugins/svg-area-heatmap.js +195 -0
package/examples/svg-area-heatmap/index.html ADDED
@@ -0,0 +1,62 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>SvgAreaHeatmap Plugin Example</title>
6
+ <style>
7
+ body, html { margin:0; padding:0; height:100%; font-family:Arial;}
8
+ #heatmapContainerWrapper { width:100%; height:100%; position:absolute; }
9
+ #heatmapContainer { width:100%; height:100%;}
10
+ h1 { position:absolute; background:black; color:white; padding:10px; font-weight:200;}
11
+ #all-examples-info { position:absolute; background:white; font-size:16px; padding:20px; top:100px; width:350px; line-height:150%; border:1px solid rgba(0,0,0,.2);}
12
+ img { background:black; }
13
+ </style>
14
+ </head>
15
+ <body>
16
+
17
+ <div id="heatmapContainerWrapper">
18
+ <div id="heatmapContainer">
19
+
20
+ </div>
21
+
22
+ </div>
23
+ <h1>Adding datapoints in real time with heatmap.js</h1>
24
+ <div id="all-examples-info">
25
+ <strong style="font-weight:bold;line-height:200%;font-size:18px;">Looking for more examples?</strong> <br />Check out the full <a href="http://www.patrick-wied.at/static/heatmapjs/examples.html?utm_source=gh_local" target="_blank">list of all heatmap.js examples</a> with more pointers &amp; inline documentation.
26
+ </div>
27
+ <script src="/build/heatmap.js"></script>
28
+ <script src="/plugins/svg-area-heatmap.js"></script>
29
+ <script>
30
+ window.onload = function() {
31
+ // create heatmap instance
32
+ var heatmap = h337.create({
33
+ container: document.getElementById('heatmapContainer'),
34
+ svgUrl: 'austria.svg',
35
+ plugin: 'SvgAreaHeatmap'
36
+ });
37
+
38
+ window.heatmap = heatmap;
39
+
40
+ window.randomize = function(){
41
+ var max = (Math.random()*100) >> 0;
42
+
43
+ var dataPoints = [];
44
+ var dataKeys = ['oberoesterreich', 'niederoesterreich', 'wien', 'burgenland', 'kaernten', 'steiermark', 'tirol', 'vorarlberg', 'salzburg'];
45
+
46
+ for (var i = 0; i < dataKeys.length; i++) {
47
+ dataPoints.push({ id: dataKeys[i], value: max - (Math.random() * max/2) >> 0 });
48
+ }
49
+
50
+ heatmap.setData({
51
+ max: max,
52
+ min: 0,
53
+ data: dataPoints
54
+ });
55
+
56
+
57
+ };
58
+ randomize();
59
+ };
60
+ </script>
61
+ </body>
62
+ </html>
package/examples/unblurred-datapoints/index.html ADDED
@@ -0,0 +1,87 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Unblurred Overlapping Datapoints with heatmap.js</title>
6
+ <style>
7
+ body, html, h2 { margin:0; padding:0; height:100%;}
8
+ body { font-family:sans-serif; }
9
+ body * { font-weight:200;}
10
+ #heatmapContainerWrapper { width:100%; height:100%; position:absolute; background:rgba(0,0,0,.1); }
11
+ #heatmapContainer { width:100%; height:100%;}
12
+ #heatmapLegend { background:white; position:absolute; bottom:0; right:0; padding:10px; }
13
+ #min { float:left; }
14
+ #max { float:right; }
15
+ h1 { position:absolute; background:black; color:white; padding:10px;}
16
+ #all-examples-info { position:absolute; background:white; font-size:16px; padding:20px; top:100px; width:350px; line-height:150%; }
17
+ </style>
18
+ </head>
19
+ <body>
20
+ <div id="heatmapContainerWrapper">
21
+ <div id="heatmapContainer">
22
+
23
+ </div>
24
+ </div>
25
+ <h1>Unblurred Overlapping Datapoints with heatmap.js</h1>
26
+ <div id="all-examples-info">
27
+ <strong style="font-weight:bold;line-height:200%;font-size:18px;">Looking for more examples?</strong> <br />Check out the full <a href="http://www.patrick-wied.at/static/heatmapjs/examples.html?utm_source=gh_local" target="_blank">list of all heatmap.js examples</a> with more pointers &amp; inline documentation.
28
+ </div>
29
+ <script src="/build/heatmap.js"></script>
30
+ <script>
31
+ window.onload = function() {
32
+ // helper function
33
+ function $(id) {
34
+ return document.getElementById(id);
35
+ };
36
+
37
+
38
+ // create a heatmap instance
39
+ var heatmap = h337.create({
40
+ container: document.getElementById('heatmapContainer'),
41
+ opacity:.7,
42
+ radius: 10,
43
+ // this line makes datapoints unblurred
44
+ blur: 0
45
+ });
46
+
47
+ // boundaries for data generation
48
+ var width = (+window.getComputedStyle(document.body).width.replace(/px/,''));
49
+ var height = (+window.getComputedStyle(document.body).height.replace(/px/,''));
50
+
51
+ // generate 1000 datapoints
52
+ var generate = function() {
53
+ // randomly generate extremas
54
+ var extremas = [(Math.random() * 100) >> 0,(Math.random() * 100) >> 0];
55
+ var max = Math.max.apply(Math, extremas);
56
+ var min = Math.min.apply(Math,extremas);
57
+ var t = [];
58
+
59
+
60
+ for (var i = 0; i < 400; i++) {
61
+ var x = (Math.random()* width) >> 0;
62
+ var y = (Math.random()* height) >> 0;
63
+ var c = ((Math.random()* max-min) >> 0) + min;
64
+ // btw, we can set a radius on a point basis
65
+ var r = 40; //(Math.random()* 30) >> 0;
66
+ // add to dataset
67
+ t.push({ x: x, y:y, value: c, radius: r });
68
+ }
69
+ var init = +new Date;
70
+ // set the generated dataset
71
+ heatmap.setData({
72
+ min: min,
73
+ max: max,
74
+ data: t
75
+ });
76
+ console.log('took ', (+new Date) - init, 'ms');
77
+ };
78
+ // initial generate
79
+ generate();
80
+
81
+ // whenever a user clicks on the ContainerWrapper the data will be regenerated -> new max & min
82
+ document.getElementById('heatmapContainerWrapper').onclick = function() { generate(); };
83
+
84
+ };
85
+ </script>
86
+ </body>
87
+ </html>
package/package.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "name": "no-heatmap.js",
3
+ "version": "2.0.8",
4
+ "description": "Dynamic JavaScript Heatmaps for the Web",
5
+ "homepage": "https://www.patrick-wied.at/static/heatmapjs/",
6
+ "author": {
7
+ "name": "Patrick Wied",
8
+ "email": "heatmapjs@patrick-wied.at",
9
+ "url": "https://www.patrick-wied.at/"
10
+ },
11
+ "main": "build/heatmap.js",
12
+ "devDependencies": {
13
+ "coffee-script": ">= 1.6.3",
14
+ "grunt": ">= 0.4.1",
15
+ "grunt-contrib-concat": ">= 0.1.3",
16
+ "grunt-contrib-jshint": ">= 0.3.0",
17
+ "grunt-contrib-uglify": ">= 0.2.0",
18
+ "grunt-contrib-watch": "0.2.0rc7"
19
+ },
20
+ "keywords": [
21
+ "heatmap",
22
+ "heatmaps",
23
+ "heat map",
24
+ "heat maps",
25
+ "googlemaps heatmap",
26
+ "leaflet heatmap",
27
+ "leaflet"
28
+ ],
29
+ "files": [
30
+ "build",
31
+ "plugins",
32
+ "examples",
33
+ "docs",
34
+ "package.json",
35
+ "LICENSE",
36
+ "README.md"
37
+ ],
38
+ "buildFiles": [
39
+ "src/config.js",
40
+ "src/data.js",
41
+ "src/renderer/canvas2d.js",
42
+ "src/renderer.js",
43
+ "src/util.js",
44
+ "src/core.js"
45
+ ]
46
+ }
package/plugins/angular-heatmap/angular-heatmap.js ADDED
@@ -0,0 +1,62 @@
1
+ /*
2
+ * Angular Heatmap Directive
3
+ *
4
+ * Copyright 2008-2016 Patrick Wied <heatmapjs@patrick-wied.at> - All rights reserved.
5
+ * Dual licensed under MIT and Beerware license
6
+ *
7
+ */
8
+ (function() {
9
+
10
+ 'use strict';
11
+
12
+ angular.module('heatmap', [])
13
+ .directive('heatmap', ['$heatmap', function($heatmap) {
14
+ return {
15
+ restrict: 'AE',
16
+ scope: {
17
+ 'data': '=',
18
+ 'config': '='
19
+ },
20
+ link: function(scope, el, attrs) {
21
+ var domEl = el[0];
22
+ var computed = window.getComputedStyle(domEl);
23
+ var defaultCfg = {
24
+ width: +attrs['width'] || +computed['width'].replace('px',''),
25
+ height: +attrs['height'] || +computed['height'].replace('px','')
26
+ };
27
+ var cfg = angular.merge({}, defaultCfg, scope['config'] || {});
28
+ cfg.container = domEl;
29
+ var heatmapInstance = h337.create(cfg);
30
+
31
+ scope.heatmapInstance = heatmapInstance;
32
+ $heatmap.registerInstance(attrs.id || (+new Date)+'', heatmapInstance);
33
+ },
34
+ controller: function($scope) {
35
+ $scope.$watch('config', function(nu, old) {
36
+ if (nu == old) {
37
+ return;
38
+ }
39
+ $scope.heatmapInstance.configure(nu);
40
+ });
41
+ $scope.$watch('data', function(nu, old) {
42
+ $scope.heatmapInstance.setData(nu);
43
+ }, true);
44
+ }
45
+ }
46
+ }])
47
+ .service('$heatmap', [function() {
48
+ var instances = {};
49
+ return {
50
+ registerInstance: function(key, value) {
51
+ instances[key] = value;
52
+ },
53
+ getInstance: function(key) {
54
+ return instances[key];
55
+ },
56
+ getAllInstances: function() {
57
+ return instances;
58
+ }
59
+ };
60
+ }]);
61
+
62
+ })();
package/plugins/boilerplate.js ADDED
@@ -0,0 +1,45 @@
1
+ (function() {
2
+ 'use strict';
3
+
4
+ var boilerplatePlugin = (function BoilerplatePluginClosure() {
5
+
6
+ function BoilerplateStore(config) {
7
+ this._coordinator = {};
8
+ this._data = [];
9
+ this._max = 1;
10
+ this._min = 0;
11
+ };
12
+
13
+ BoilerplateStore.prototype = {
14
+ setCoordinator: function(coordinator) {
15
+
16
+ },
17
+ setData: function(data) {
18
+
19
+ },
20
+ addData: function(data) {
21
+
22
+ },
23
+ removeData: function(data) {
24
+
25
+ },
26
+ getData: function() {
27
+
28
+ }
29
+ };
30
+
31
+
32
+
33
+ function BoilerplateRenderer(config) {
34
+
35
+ };
36
+
37
+ return {
38
+ store: BoilerplateStore,
39
+ renderer: BoilerplateRenderer
40
+ }
41
+ }());
42
+
43
+ h337.register('boilerplate', boilerplatePlugin);
44
+
45
+ }());
package/plugins/gmaps-heatmap/README.md ADDED
@@ -0,0 +1,7 @@
1
+ This is a heatmap.js plugin to visualize data as a heatmap overlay in Google Maps.
2
+
3
+
4
+ Learn more about how to use heatmap.js and this overlay implementation on the [heatmap website](https://www.patrick-wied.at/static/heatmapjs/?utm_source=npm_gmaps&utm_medium=web)
5
+
6
+
7
+ Google Maps is a trademark of Google Inc. The gmaps-heatmap.js overlay implementation is in no way sponsored or affiliated with Google Inc.
package/plugins/gmaps-heatmap/gmaps-heatmap.js ADDED
@@ -0,0 +1,278 @@
1
+ /*
2
+ * heatmap.js Google Maps Overlay
3
+ *
4
+ * Copyright (c) 2008-2016, Patrick Wied (https://www.patrick-wied.at)
5
+ * Dual-licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
6
+ * and the Beerware (http://en.wikipedia.org/wiki/Beerware) license.
7
+ */
8
+ ;(function (name, context, factory) {
9
+ // Supports UMD. AMD, CommonJS/Node.js and browser context
10
+ if (typeof module !== "undefined" && module.exports) {
11
+ module.exports = factory(
12
+ require('heatmap.js'),
13
+ require('google-maps')
14
+ );
15
+ } else if (typeof define === "function" && define.amd) {
16
+ define(['heatmap.js', 'google-maps'], factory);
17
+ } else {
18
+ // browser globals
19
+ if (typeof window.h337 === 'undefined') {
20
+ throw new Error('heatmap.js must be loaded before the gmaps heatmap plugin');
21
+ }
22
+ if (typeof window.google === 'undefined') {
23
+ throw new Error('Google Maps must be loaded before the gmaps heatmap plugin');
24
+ }
25
+ context[name] = factory(window.h337, window.google.maps);
26
+ }
27
+
28
+ })("HeatmapOverlay", this, function(h337, gmaps) {
29
+ 'use strict';
30
+
31
+ var HeatmapOverlay = function(map, cfg){
32
+ this.setMap(map);
33
+ this.initialize(cfg || {});
34
+ };
35
+
36
+ HeatmapOverlay.prototype = new gmaps.OverlayView();
37
+
38
+ HeatmapOverlay.CSS_TRANSFORM = (function() {
39
+ var div = document.createElement('div');
40
+ var props = [
41
+ 'transform',
42
+ 'WebkitTransform',
43
+ 'MozTransform',
44
+ 'OTransform',
45
+ 'msTransform'
46
+ ];
47
+
48
+ for (var i = 0; i < props.length; i++) {
49
+ var prop = props[i];
50
+ if (div.style[prop] !== undefined) {
51
+ return prop;
52
+ }
53
+ }
54
+
55
+ return props[0];
56
+ })();
57
+
58
+ HeatmapOverlay.prototype.initialize = function(cfg) {
59
+ this.cfg = cfg;
60
+
61
+ var map = this.map = this.getMap();
62
+ var container = this.container = document.createElement('div');
63
+ var mapDiv = map.getDiv();
64
+ var width = this.width = mapDiv.clientWidth;
65
+ var height = this.height = mapDiv.clientHeight;
66
+
67
+ container.style.cssText = 'width:' + width +'px;height:' + height+'px;';
68
+
69
+ this.data = [];
70
+ this.max = 1;
71
+ this.min = 0;
72
+
73
+ cfg.container = container;
74
+ };
75
+
76
+ HeatmapOverlay.prototype.onAdd = function(){
77
+ var that = this;
78
+
79
+ this.getPanes().overlayLayer.appendChild(this.container);
80
+
81
+
82
+ this.changeHandler = gmaps.event.addListener(
83
+ this.map,
84
+ 'bounds_changed',
85
+ function() { return that.draw(); }
86
+ );
87
+
88
+ if (!this.heatmap) {
89
+ this.heatmap = h337.create(this.cfg);
90
+ }
91
+ this.draw();
92
+ };
93
+
94
+ HeatmapOverlay.prototype.onRemove = function() {
95
+ if (!this.map) { return; }
96
+
97
+ this.map = null;
98
+
99
+ this.container.parentElement.removeChild(this.container);
100
+
101
+ if (this.changeHandler) {
102
+ gmaps.event.removeListener(this.changeHandler);
103
+ this.changeHandler = null;
104
+ }
105
+
106
+ };
107
+
108
+ HeatmapOverlay.prototype.draw = function() {
109
+ if (!this.map) { return; }
110
+
111
+ var bounds = this.map.getBounds();
112
+
113
+ var topLeft = new gmaps.LatLng(
114
+ bounds.getNorthEast().lat(),
115
+ bounds.getSouthWest().lng()
116
+ );
117
+
118
+ var projection = this.getProjection();
119
+ var point = projection.fromLatLngToDivPixel(topLeft);
120
+
121
+ this.container.style[HeatmapOverlay.CSS_TRANSFORM] = 'translate(' +
122
+ Math.round(point.x) + 'px,' +
123
+ Math.round(point.y) + 'px)';
124
+
125
+ this.update();
126
+ };
127
+
128
+ HeatmapOverlay.prototype.resize = function() {
129
+
130
+ if (!this.map){ return; }
131
+
132
+ var div = this.map.getDiv(),
133
+ width = div.clientWidth,
134
+ height = div.clientHeight;
135
+
136
+ if (width == this.width && height == this.height){ return; }
137
+
138
+ this.width = width;
139
+ this.height = height;
140
+
141
+ // update heatmap dimensions
142
+ this.heatmap._renderer.setDimensions(width, height);
143
+ // then redraw all datapoints with update
144
+ this.update();
145
+ };
146
+
147
+ HeatmapOverlay.prototype.update = function() {
148
+ var projection = this.getProjection(),
149
+ zoom, scale, bounds, topLeft;
150
+ var generatedData = { max: this.max, min: this.min, data: [] };
151
+
152
+ if (!projection){ return; }
153
+
154
+ bounds = this.map.getBounds();
155
+
156
+ topLeft = new gmaps.LatLng(
157
+ bounds.getNorthEast().lat(),
158
+ bounds.getSouthWest().lng()
159
+ );
160
+
161
+ zoom = this.map.getZoom();
162
+ scale = Math.pow(2, zoom);
163
+
164
+ this.resize();
165
+
166
+ if (this.data.length == 0) {
167
+ if (this.heatmap) {
168
+ this.heatmap.setData(generatedData);
169
+ }
170
+ return;
171
+ }
172
+
173
+
174
+ var latLngPoints = [];
175
+ // iterate through data
176
+ var len = this.data.length;
177
+ var layerProjection = this.getProjection();
178
+ var layerOffset = layerProjection.fromLatLngToDivPixel(topLeft);
179
+ var radiusMultiplier = this.cfg.scaleRadius ? scale : 1;
180
+ var localMax = 0;
181
+ var localMin = 0;
182
+ var valueField = this.cfg.valueField;
183
+
184
+
185
+ while (len--) {
186
+ var entry = this.data[len];
187
+ var value = entry[valueField];
188
+ var latlng = entry.latlng;
189
+
190
+
191
+ // we don't wanna render points that are not even on the map ;-)
192
+ if (!bounds.contains(latlng)) {
193
+ continue;
194
+ }
195
+ // local max is the maximum within current bounds
196
+ localMax = Math.max(value, localMax);
197
+ localMin = Math.min(value, localMin);
198
+
199
+ var point = layerProjection.fromLatLngToDivPixel(latlng);
200
+ var latlngPoint = { x: Math.round(point.x - layerOffset.x), y: Math.round(point.y - layerOffset.y) };
201
+ latlngPoint[valueField] = value;
202
+
203
+ var radius;
204
+
205
+ if (entry.radius) {
206
+ radius = entry.radius * radiusMultiplier;
207
+ } else {
208
+ radius = (this.cfg.radius || 2) * radiusMultiplier;
209
+ }
210
+ latlngPoint.radius = radius;
211
+ latLngPoints.push(latlngPoint);
212
+ }
213
+ if (this.cfg.useLocalExtrema) {
214
+ generatedData.max = localMax;
215
+ generatedData.min = localMin;
216
+ }
217
+
218
+ generatedData.data = latLngPoints;
219
+
220
+ this.heatmap.setData(generatedData);
221
+
222
+ };
223
+
224
+ HeatmapOverlay.prototype.setData = function(data) {
225
+ this.max = data.max;
226
+ this.min = data.min;
227
+
228
+ var latField = this.cfg.latField || 'lat';
229
+ var lngField = this.cfg.lngField || 'lng';
230
+ var valueField = this.cfg.valueField || 'value';
231
+
232
+ // transform data to latlngs
233
+ var data = data.data;
234
+ var len = data.length;
235
+ var d = [];
236
+
237
+ while (len--) {
238
+ var entry = data[len];
239
+ var latlng = new gmaps.LatLng(entry[latField], entry[lngField]);
240
+ var dataObj = { latlng: latlng };
241
+ dataObj[valueField] = entry[valueField];
242
+ if (entry.radius) {
243
+ dataObj.radius = entry.radius;
244
+ }
245
+ d.push(dataObj);
246
+ }
247
+ this.data = d;
248
+ this.update();
249
+ };
250
+ // experimential. not ready yet.
251
+ HeatmapOverlay.prototype.addData = function(pointOrArray) {
252
+ if (pointOrArray.length > 0) {
253
+ var len = pointOrArray.length;
254
+ while(len--) {
255
+ this.addData(pointOrArray[len]);
256
+ }
257
+ } else {
258
+ var latField = this.cfg.latField || 'lat';
259
+ var lngField = this.cfg.lngField || 'lng';
260
+ var valueField = this.cfg.valueField || 'value';
261
+ var entry = pointOrArray;
262
+ var latlng = new gmaps.LatLng(entry[latField], entry[lngField]);
263
+ var dataObj = { latlng: latlng };
264
+
265
+ dataObj[valueField] = entry[valueField];
266
+ if (entry.radius) {
267
+ dataObj.radius = entry.radius;
268
+ }
269
+ this.max = Math.max(this.max, dataObj[valueField]);
270
+ this.min = Math.min(this.min, dataObj[valueField]);
271
+ this.data.push(dataObj);
272
+ this.update();
273
+ }
274
+ };
275
+
276
+ return HeatmapOverlay;
277
+
278
+ });
package/plugins/gmaps-heatmap/package.json ADDED
@@ -0,0 +1,23 @@
1
+ {
2
+ "name": "gmaps-heatmap",
3
+ "version": "1.0.2",
4
+ "description": "heatmap.js Google Maps Overlay",
5
+ "homepage": "https://www.patrick-wied.at/static/heatmapjs/",
6
+ "main": "gmaps-heatmap.js",
7
+ "dependencies": {
8
+ "heatmap.js": "*",
9
+ "google-maps": "*"
10
+ },
11
+ "keywords": [
12
+ "heatmap",
13
+ "google maps",
14
+ "googlemaps",
15
+ "gmaps",
16
+ "heat",
17
+ "heat map",
18
+ "heatmaps",
19
+ "heat maps",
20
+ "map",
21
+ "maps"
22
+ ]
23
+ }
package/plugins/leaflet-heatmap/README.md ADDED
@@ -0,0 +1,4 @@
1
+ This is a heatmap.js plugin to visualize data as a **heatmap overlay with Leaflet**.
2
+
3
+
4
+ Learn more about how to use heatmap.js and this overlay implementation on the [heatmap website](https://www.patrick-wied.at/static/heatmapjs/?utm_source=npm_leaflet&utm_medium=web)