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.
- package/LICENSE +19 -0
- package/README.md +55 -0
- package/build/heatmap.js +729 -0
- package/build/heatmap.min.js +9 -0
- package/docs/assets/css/commons.css +41 -0
- package/docs/assets/css/docs.css +136 -0
- package/docs/assets/css/prism.css +126 -0
- package/docs/assets/js/prism.js +7 -0
- package/docs/faq.html +0 -0
- package/docs/getting-started.html +0 -0
- package/docs/how-to-migrate.md +97 -0
- package/docs/index.html +276 -0
- package/examples/angular-heatmap/index.html +64 -0
- package/examples/googlemaps-heatmap/index.html +65 -0
- package/examples/heatmap-legend/index.html +126 -0
- package/examples/leaflet-heatmap/index.html +80 -0
- package/examples/mousemove-heatmap/index.html +64 -0
- package/examples/raindrops/index.html +66 -0
- package/examples/svg-area-heatmap/austria.svg +1540 -0
- package/examples/svg-area-heatmap/index.html +62 -0
- package/examples/unblurred-datapoints/index.html +87 -0
- package/package.json +46 -0
- package/plugins/angular-heatmap/angular-heatmap.js +62 -0
- package/plugins/boilerplate.js +45 -0
- package/plugins/gmaps-heatmap/README.md +7 -0
- package/plugins/gmaps-heatmap/gmaps-heatmap.js +278 -0
- package/plugins/gmaps-heatmap/package.json +23 -0
- package/plugins/leaflet-heatmap/README.md +4 -0
- package/plugins/leaflet-heatmap/leaflet-heatmap.js +246 -0
- package/plugins/leaflet-heatmap/package.json +21 -0
- package/plugins/segment-heatmap.js +71 -0
- package/plugins/svg-area-heatmap.js +195 -0
package/docs/index.html
ADDED
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>heatmap.js Documentation</title>
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<link rel="stylesheet" href="assets/css/commons.css" />
|
|
8
|
+
<link rel="stylesheet" href="assets/css/docs.css" />
|
|
9
|
+
<link rel="stylesheet" href="assets/css/prism.css" />
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<div class="wrapper">
|
|
13
|
+
<h1>heatmap.js Documentation</h1>
|
|
14
|
+
<ol class="breadcrumb-trail">
|
|
15
|
+
<li><a href="//www.patrick-wied.at/static/heatmapjs/" title="heatmap.js dynamic heatmaps for the web">heatmap.js</a></li>
|
|
16
|
+
<li>Documentation</li>
|
|
17
|
+
</ol>
|
|
18
|
+
<div id="message">
|
|
19
|
+
<h3 id="activate-msg">What is it about the colors in the overview?</h3>
|
|
20
|
+
<div id="msg-content">
|
|
21
|
+
<div class="msg">
|
|
22
|
+
<u style="font-weight:bold;">The colors in the overview is a prioritization of API functions:</u> <br /><strong class="hot-doc highlight"><u>red</u> **hot docs**</strong> : most commonly used functions ;-)<br /><strong class="avg-doc highlight"><u>green</u></strong> : used for customized implementations<br /><strong class="cold-doc highlight"><u>blue</u></strong> : rarely used functionality
|
|
23
|
+
</div>
|
|
24
|
+
<div id="btn-confirm">got it, thank you</div>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
<section id="index">
|
|
28
|
+
<div id="index-h337">
|
|
29
|
+
<h2>h337</h2>
|
|
30
|
+
<ul>
|
|
31
|
+
<li class="hot-doc"><a href="#h337-create">create(configObject)</a></li>
|
|
32
|
+
<li class="avg-doc"><a href="#h337-register">register(pluginKey, plugin)</a></li>
|
|
33
|
+
</ul>
|
|
34
|
+
</div>
|
|
35
|
+
<div id="index-heatmapInstance">
|
|
36
|
+
<h2>heatmapInstance</h2>
|
|
37
|
+
<ul>
|
|
38
|
+
<li class="hot-doc"><a href="#heatmap-addData">addData(object|array)</a></li>
|
|
39
|
+
<li class="hot-doc"><a href="#heatmap-setData">setData(object)</a></li>
|
|
40
|
+
<li class="cold-doc"><a href="#heatmap-setDataMax">setDataMax(number)</a></li>
|
|
41
|
+
<li class="cold-doc"><a href="#heatmap-setDataMin">setDataMin(number)</a></li>
|
|
42
|
+
<li class="avg-doc"> <a href="#heatmap-configure">configure(configObject)</a></li>
|
|
43
|
+
<li class="avg-doc"> <a href="#heatmap-getValueAt">getValueAt(object)</a></li>
|
|
44
|
+
<li class="hot-doc"> <a href="#heatmap-getData">getData()</a></li>
|
|
45
|
+
<li class="avg-doc"> <a href="#heatmap-getDataURL">getDataURL()</a></li>
|
|
46
|
+
<li class="cold-doc"><a href="#heatmap-repaint">repaint()</a></li>
|
|
47
|
+
</ul>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
</section>
|
|
51
|
+
<section>
|
|
52
|
+
<h2>h337</h2>
|
|
53
|
+
<div class="description">
|
|
54
|
+
"h337" is the name of the global object registered by heatmap.js. You can use it to create heatmap instances
|
|
55
|
+
</div>
|
|
56
|
+
<div class="functions">
|
|
57
|
+
<div class="fn">
|
|
58
|
+
<h3 id="h337-create">h337.create(configObject)</h3>
|
|
59
|
+
<div class="description">
|
|
60
|
+
Returns a <strong>heatmapInstance</strong>.<br /><br />
|
|
61
|
+
Use h337.create to create heatmap instances. A Heatmap can be customized with the configObject. <br />The configObject parameter is required. <br /><br/><strong><u>Possible configuration properties:</u></strong><br />
|
|
62
|
+
<ul>
|
|
63
|
+
<li><strong>container</strong> (DOMNode) *required* <br /> A DOM node where the heatmap canvas should be appended (heatmap will adapt to the node's size)</li>
|
|
64
|
+
<li><strong>backgroundColor</strong> (string) *optional*<br />
|
|
65
|
+
A background color string in form of hexcode, color name, or rgb(a)</li>
|
|
66
|
+
<li><strong>gradient</strong> (object) *optional*<br />
|
|
67
|
+
An object that represents the gradient (syntax: number string [0,1] : color string), check out the example </li>
|
|
68
|
+
<li><strong>radius</strong> (number) *optional*<br />The radius each datapoint will have (if not specified on the datapoint itself)</li>
|
|
69
|
+
<li><strong>opacity</strong> (number) [0,1] *optional* default = .6<br />A global opacity for the whole heatmap. This overrides maxOpacity and minOpacity if set!</li>
|
|
70
|
+
<li><strong>maxOpacity</strong> (number) [0,1] *optional*<br />The maximal opacity the highest value in the heatmap will have. (will be overridden if opacity set)</li>
|
|
71
|
+
<li><strong>minOpacity</strong>(number) [0,1] *optional*<br />The minimum opacity the lowest value in the heatmap will have (will be overridden if opacity set)</li>
|
|
72
|
+
<li><strong>onExtremaChange</strong> function callback<br />Pass a callback to receive extrema change updates. Useful for DOM legends.</li>
|
|
73
|
+
<li><strong>blur</strong> (number) [0,1] *optional* default = 0.85<br />The blur factor that will be applied to all datapoints. The higher the blur factor is, the smoother the gradients will be</li>
|
|
74
|
+
<li><strong>xField</strong> (string) *optional* default = "x"<br />The property name of your x coordinate in a datapoint</li>
|
|
75
|
+
<li><strong>yField</strong> (string) *optional* default = "y"<br />The property name of your y coordinate in a datapoint</li>
|
|
76
|
+
<li><strong>valueField</strong> (string) *optional* default = "value"<br />The property name of your y coordinate in a datapoint</li>
|
|
77
|
+
</ul>
|
|
78
|
+
<h4>Example configurations</h4>
|
|
79
|
+
Simple configuration with standard gradient
|
|
80
|
+
<pre><code class="language-javascript">// create configuration object
|
|
81
|
+
var config = {
|
|
82
|
+
container: document.getElementById('heatmapContainer'),
|
|
83
|
+
radius: 10,
|
|
84
|
+
maxOpacity: .5,
|
|
85
|
+
minOpacity: 0,
|
|
86
|
+
blur: .75
|
|
87
|
+
};
|
|
88
|
+
// create heatmap with configuration
|
|
89
|
+
var heatmapInstance = h337.create(config);</code></pre>
|
|
90
|
+
Custom gradient configuration
|
|
91
|
+
<pre><code class="language-javascript">// create configuration object
|
|
92
|
+
var config = {
|
|
93
|
+
container: document.getElementById('heatmapContainer'),
|
|
94
|
+
radius: 10,
|
|
95
|
+
maxOpacity: .5,
|
|
96
|
+
minOpacity: 0,
|
|
97
|
+
blur: .75,
|
|
98
|
+
gradient: {
|
|
99
|
+
// enter n keys between 0 and 1 here
|
|
100
|
+
// for gradient color customization
|
|
101
|
+
'.5': 'blue',
|
|
102
|
+
'.8': 'red',
|
|
103
|
+
'.95': 'white'
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
var heatmapInstance = h337.create(config);</code></pre>
|
|
107
|
+
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
<!-- <div class="fn">
|
|
111
|
+
<h3 id="h337-register">h337.register(pluginKey, plugin)</h3>
|
|
112
|
+
<div class="description">
|
|
113
|
+
to be written
|
|
114
|
+
</div>
|
|
115
|
+
</div> -->
|
|
116
|
+
</div>
|
|
117
|
+
</section>
|
|
118
|
+
<section>
|
|
119
|
+
<h2>heatmapInstance</h2>
|
|
120
|
+
<div class="description">
|
|
121
|
+
Heatmap instances are returned by h337.create. A heatmap instance has its own internal datastore and renderer where you can manipulate data. As a result the heatmap gets updated (either partially or completely, depending on whether it's necessary).
|
|
122
|
+
</div>
|
|
123
|
+
<div class="functions">
|
|
124
|
+
<div class="fn">
|
|
125
|
+
<h3 id="heatmap-addData">heatmapInstance.addData(object|array)</h3>
|
|
126
|
+
<div class="description">
|
|
127
|
+
Returns <strong>heatmapInstance</strong><br /><br />
|
|
128
|
+
Use this functionality only for adding datapoints on the fly, not for data initialization! heatmapInstance.addData adds a single or multiple datapoints to the heatmaps' datastore.
|
|
129
|
+
<pre><code class="language-javascript">// a single datapoint
|
|
130
|
+
var dataPoint = {
|
|
131
|
+
x: 5, // x coordinate of the datapoint, a number
|
|
132
|
+
y: 5, // y coordinate of the datapoint, a number
|
|
133
|
+
value: 100 // the value at datapoint(x, y)
|
|
134
|
+
};
|
|
135
|
+
heatmapInstance.addData(dataPoint);
|
|
136
|
+
|
|
137
|
+
// multiple datapoints (for data initialization use setData!!)
|
|
138
|
+
var dataPoints = [dataPoint, dataPoint, dataPoint, dataPoint];
|
|
139
|
+
heatmapInstance.addData(dataPoints);</code></pre>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
<div class="fn">
|
|
143
|
+
<h3 id="heatmap-setData">heatmapInstance.setData(object)</h3>
|
|
144
|
+
<div class="description">
|
|
145
|
+
Returns <strong>heatmapInstance</strong><br /><br />
|
|
146
|
+
Initializes a heatmap instance with a dataset. <strong>"min"</strong>, <strong>"max"</strong>, and <strong>"data"</strong> properties are required.<br />setData removes all previously existing points from the heatmap instance and re-initializes the datastore.
|
|
147
|
+
<pre><code class="language-javascript">var data = {
|
|
148
|
+
max: 100,
|
|
149
|
+
min: 0,
|
|
150
|
+
data: [
|
|
151
|
+
dataPoint, dataPoint, dataPoint, dataPoint
|
|
152
|
+
]
|
|
153
|
+
};
|
|
154
|
+
heatmapInstance.setData(data);</code></pre>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="fn">
|
|
158
|
+
<h3 id="heatmap-setDataMax">heatmapInstance.setDataMax(number)</h3>
|
|
159
|
+
<div class="description">
|
|
160
|
+
Returns <strong>heatmapInstance</strong><br /><br />
|
|
161
|
+
Changes the upper bound of your dataset and triggers a complete rerendering.
|
|
162
|
+
<pre><code class="language-javascript">heatmapInstance.setDataMax(200);
|
|
163
|
+
// setting the maximum value triggers a complete rerendering of the heatmap
|
|
164
|
+
heatmapInstance.setDataMax(100);</code></pre>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
<div class="fn">
|
|
168
|
+
<h3 id="heatmap-setDataMin">heatmapInstance.setDataMin(number)</h3>
|
|
169
|
+
<div class="description">
|
|
170
|
+
Returns <strong>heatmapInstance</strong><br /><br />
|
|
171
|
+
Changes the lower bound of your dataset and triggers a complete rerendering.
|
|
172
|
+
<pre><code class="language-javascript">heatmapInstance.setDataMin(10);
|
|
173
|
+
// setting the minimum value triggers a complete rerendering of the heatmap
|
|
174
|
+
heatmapInstance.setDataMin(0);</code></pre>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="fn">
|
|
178
|
+
<h3 id="heatmap-configure">heatmapInstance.configure(configObject)</h3>
|
|
179
|
+
<div class="description">
|
|
180
|
+
Returns <strong>heatmapInstance</strong><br /><br />
|
|
181
|
+
Reconfigures a heatmap instance after it has been initialized. Triggers a complete rerendering.
|
|
182
|
+
<pre><code class="language-javascript">var nuConfig = {
|
|
183
|
+
radius: 10,
|
|
184
|
+
maxOpacity: .5,
|
|
185
|
+
minOpacity: 0,
|
|
186
|
+
blur: .75
|
|
187
|
+
};
|
|
188
|
+
heatmapInstance.configure(nuConfig);</code></pre>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="fn">
|
|
192
|
+
<h3 id="heatmap-getValueAt">heatmapInstance.getValueAt(object)</h3>
|
|
193
|
+
<div class="description">
|
|
194
|
+
Returns <strong>value at datapoint position</strong><br /><br />
|
|
195
|
+
Note: The returned value is an interpolated value based on the gradient blending if point is not in store
|
|
196
|
+
<pre><code class="language-javascript">heatmapInstance.addData({ x: 10, y: 10, value: 100});
|
|
197
|
+
// get the value at x=10, y=10
|
|
198
|
+
heatmapInstance.getValueAt({ x: 10, y: 10 }); // returns 100</code></pre>
|
|
199
|
+
</div>
|
|
200
|
+
</div>
|
|
201
|
+
<div class="fn">
|
|
202
|
+
<h3 id="heatmap-getData">heatmapInstance.getData()</h3>
|
|
203
|
+
<div class="description">
|
|
204
|
+
Returns <strong>a persistable and reimportable (with setData) JSON object</strong><br /><br />
|
|
205
|
+
<pre><code class="language-javascript">var currentData = heatmapInstance.getData();
|
|
206
|
+
// now let's create a new instance and set the data
|
|
207
|
+
var heatmap2 = h337.create(config);
|
|
208
|
+
heatmap2.setData(currentData); // now both heatmap instances have the same content</code></pre>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
<div class="fn">
|
|
212
|
+
<h3 id="heatmap-getDataURL">heatmapInstance.getDataURL()</h3>
|
|
213
|
+
<div class="description">
|
|
214
|
+
Returns <strong>dataURL string</strong><br /><br />
|
|
215
|
+
The returned value is the base64 encoded dataURL of the heatmap instance.
|
|
216
|
+
<pre><code class="language-javascript">heatmapInstance.getDataURL(); // data:image/png;base64...
|
|
217
|
+
// ready for saving locally or on the server</code></pre>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
<div class="fn">
|
|
221
|
+
<h3 id="heatmap-repaint">heatmapInstance.repaint()</h3>
|
|
222
|
+
<div class="description">
|
|
223
|
+
Returns <strong>heatmapInstance</strong><br /><br />
|
|
224
|
+
Repaints the whole heatmap canvas
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
</section>
|
|
229
|
+
</div>
|
|
230
|
+
<script src="assets/js/prism.js"></script>
|
|
231
|
+
<script>
|
|
232
|
+
var docs = (function() {
|
|
233
|
+
|
|
234
|
+
//delete localStorage['readTheDocs'];
|
|
235
|
+
|
|
236
|
+
function $(id) {
|
|
237
|
+
return document.getElementById(id);
|
|
238
|
+
};
|
|
239
|
+
|
|
240
|
+
function initializeDocs () {
|
|
241
|
+
var showMessage = false;
|
|
242
|
+
|
|
243
|
+
if (!localStorage['readTheDocs']) {
|
|
244
|
+
showMessage = true;
|
|
245
|
+
}
|
|
246
|
+
$('btn-confirm').onclick = function() {
|
|
247
|
+
localStorage['readTheDocs'] = true;
|
|
248
|
+
$('msg-content').classList.add('animate');
|
|
249
|
+
$('msg-content').classList.add('hide');
|
|
250
|
+
};
|
|
251
|
+
if (!showMessage) {
|
|
252
|
+
$('msg-content').classList.add('hide');
|
|
253
|
+
// dirty hack ;-)
|
|
254
|
+
setTimeout(function() { $('msg-content').classList.add('animate'); }, 100);
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
$('activate-msg').onclick = function() {
|
|
258
|
+
$('msg-content').classList.remove('hide');
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
|
|
262
|
+
// initialize and add feedback buttons
|
|
263
|
+
|
|
264
|
+
};
|
|
265
|
+
|
|
266
|
+
|
|
267
|
+
return {
|
|
268
|
+
init: initializeDocs
|
|
269
|
+
}
|
|
270
|
+
}());
|
|
271
|
+
window.onload = function() {
|
|
272
|
+
docs.init();
|
|
273
|
+
};
|
|
274
|
+
</script>
|
|
275
|
+
</body>
|
|
276
|
+
</html>
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Angular Heatmap Directive Example | heatmap.js</title>
|
|
6
|
+
<style>
|
|
7
|
+
body, html { margin:0; padding:0; height:100%;}
|
|
8
|
+
body { font-family:sans-serif; }
|
|
9
|
+
#heatmapContainerWrapper { width:100%; height:100%; position:absolute; }
|
|
10
|
+
#heatmapContainer { width:100%; height:100%;}
|
|
11
|
+
h1 { position:absolute; background:black; color:white; padding:10px; font-weight:200;}
|
|
12
|
+
#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);}
|
|
13
|
+
heatmap { width:100%; height:100%; position:absolute;}
|
|
14
|
+
</style>
|
|
15
|
+
</head>
|
|
16
|
+
<body ng-app="heatmapApp">
|
|
17
|
+
<div ng-controller="HeatmapCtrl">
|
|
18
|
+
<heatmap id="heatmap-1" data="heatmapData" config="heatmapConfig" ng-click="updateData()"></heatmap>
|
|
19
|
+
</div>
|
|
20
|
+
<h1>Angular Heatmap Directive Example</h1>
|
|
21
|
+
<div id="all-examples-info">
|
|
22
|
+
<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 & inline documentation.
|
|
23
|
+
</div>
|
|
24
|
+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
|
|
25
|
+
<script src="/build/heatmap.js"></script>
|
|
26
|
+
<script src="/plugins/angular-heatmap/angular-heatmap.js"></script>
|
|
27
|
+
<script>
|
|
28
|
+
angular.module('heatmapApp', ['heatmap'])
|
|
29
|
+
.controller('HeatmapCtrl', ['$scope', '$heatma
|
|
30
|
+
value: ((Math.random() * max + min) >> 0),p', function($scope, $heatmap) {
|
|
31
|
+
function generateRandomData(len) {
|
|
32
|
+
var max = 100;
|
|
33
|
+
var min = 1;
|
|
34
|
+
var maxX = document.body.clientWidth;
|
|
35
|
+
var maxY = document.body.clientHeight;
|
|
36
|
+
var data = [];
|
|
37
|
+
while (len--) {
|
|
38
|
+
data.push({
|
|
39
|
+
x: ((Math.random() * maxX) >> 0),
|
|
40
|
+
y: ((Math.random() * maxY) >> 0),
|
|
41
|
+
radius: ((Math.random() * 50 + min) >> 0)
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
return {
|
|
45
|
+
max: max,
|
|
46
|
+
min: min,
|
|
47
|
+
data: data
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
$scope.heatmapData = generateRandomData(1000);
|
|
52
|
+
$scope.heatmapConfig = {
|
|
53
|
+
blur: .9,
|
|
54
|
+
opacity:.5
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
$scope.updateData = function() {
|
|
58
|
+
$scope.heatmapData = generateRandomData(1000);
|
|
59
|
+
};
|
|
60
|
+
}])
|
|
61
|
+
.run();
|
|
62
|
+
</script>
|
|
63
|
+
</body>
|
|
64
|
+
</html>
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
|
6
|
+
<title>Googlemaps Heatmap Layer</title>
|
|
7
|
+
<style>
|
|
8
|
+
html { height: 100% }
|
|
9
|
+
body { height: 100%; margin: 0; padding: 0; font-family:sans-serif; }
|
|
10
|
+
#map-canvas { height: 100% }
|
|
11
|
+
h1 { position:absolute; background:black; color:white; padding:10px; font-weight:200; z-index:10000;}
|
|
12
|
+
#all-examples-info { position:absolute; background:white; font-size:16px; padding:20px; bottom:20px; width:350px; line-height:150%; border:1px solid rgba(0,0,0,.2);}
|
|
13
|
+
</style>
|
|
14
|
+
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
|
|
15
|
+
<script src="/build/heatmap.js"></script>
|
|
16
|
+
<script src="/plugins/gmaps-heatmap/gmaps-heatmap.js"></script>
|
|
17
|
+
</head>
|
|
18
|
+
<body>
|
|
19
|
+
<h1>Gmaps Heatmap Overlay Example</h1>
|
|
20
|
+
<div id="map-canvas"></div>
|
|
21
|
+
<div id="all-examples-info">
|
|
22
|
+
<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 & inline documentation.
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<script>
|
|
26
|
+
// map center
|
|
27
|
+
var myLatlng = new google.maps.LatLng(25.6586, -80.3568);
|
|
28
|
+
// map options,
|
|
29
|
+
var myOptions = {
|
|
30
|
+
zoom: 3,
|
|
31
|
+
center: myLatlng
|
|
32
|
+
};
|
|
33
|
+
// standard map
|
|
34
|
+
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
|
|
35
|
+
// heatmap layer
|
|
36
|
+
heatmap = new HeatmapOverlay(map,
|
|
37
|
+
{
|
|
38
|
+
// radius should be small ONLY if scaleRadius is true (or small radius is intended)
|
|
39
|
+
"radius": 2,
|
|
40
|
+
"maxOpacity": 1,
|
|
41
|
+
// scales the radius based on map zoom
|
|
42
|
+
"scaleRadius": true,
|
|
43
|
+
// if set to false the heatmap uses the global maximum for colorization
|
|
44
|
+
// if activated: uses the data maximum within the current map boundaries
|
|
45
|
+
// (there will always be a red spot with useLocalExtremas true)
|
|
46
|
+
"useLocalExtrema": true,
|
|
47
|
+
// which field name in your data represents the latitude - default "lat"
|
|
48
|
+
latField: 'lat',
|
|
49
|
+
// which field name in your data represents the longitude - default "lng"
|
|
50
|
+
lngField: 'lng',
|
|
51
|
+
// which field name in your data represents the data value - default "value"
|
|
52
|
+
valueField: 'count'
|
|
53
|
+
}
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
var testData = {
|
|
57
|
+
max: 8,
|
|
58
|
+
data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1},{lat: 52.6333, lng:1.75, count: 1},{lat: 48.15, lng:9.4667, count: 1},{lat: 52.35, lng:4.9167, count: 2},{lat: 60.8, lng:11.1, count: 1},{lat: 43.561, lng:-116.214, count: 1},{lat: 47.5036, lng:-94.685, count: 1},{lat: 42.1818, lng:-71.1962, count: 1},{lat: 42.0477, lng:-74.1227, count: 1},{lat: 40.0326, lng:-75.719, count: 1},{lat: 40.7128, lng:-73.2962, count: 2},{lat: 27.9003, lng:-82.3024, count: 1},{lat: 38.2085, lng:-85.6918, count: 1},{lat: 46.8159, lng:-100.706, count: 1},{lat: 30.5449, lng:-90.8083, count: 1},{lat: 44.735, lng:-89.61, count: 1},{lat: 41.4201, lng:-75.6485, count: 2},{lat: 39.4209, lng:-74.4977, count: 1},{lat: 39.7437, lng:-104.979, count: 1},{lat: 39.5593, lng:-105.006, count: 1},{lat: 45.2673, lng:-93.0196, count: 1},{lat: 41.1215, lng:-89.4635, count: 1},{lat: 43.4314, lng:-83.9784, count: 1},{lat: 43.7279, lng:-86.284, count: 1},{lat: 40.7168, lng:-73.9861, count: 1},{lat: 47.7294, lng:-116.757, count: 1},{lat: 47.7294, lng:-116.757, count: 2},{lat: 35.5498, lng:-118.917, count: 1},{lat: 34.1568, lng:-118.523, count: 1},{lat: 39.501, lng:-87.3919, count: 3},{lat: 33.5586, lng:-112.095, count: 1},{lat: 38.757, lng:-77.1487, count: 1},{lat: 33.223, lng:-117.107, count: 1},{lat: 30.2316, lng:-85.502, count: 1},{lat: 39.1703, lng:-75.5456, count: 8},{lat: 30.0041, lng:-95.2984, count: 2},{lat: 29.7755, lng:-95.4152, count: 1},{lat: 41.8014, lng:-87.6005, count: 1},{lat: 37.8754, lng:-121.687, count: 7},{lat: 38.4493, lng:-122.709, count: 1},{lat: 40.5494, lng:-89.6252, count: 1},{lat: 42.6105, lng:-71.2306, count: 1},{lat: 40.0973, lng:-85.671, count: 1},{lat: 40.3987, lng:-86.8642, count: 1},{lat: 40.4224, lng:-86.8031, count: 4},{lat: 47.2166, lng:-122.451, count: 1},{lat: 32.2369, lng:-110.956, count: 1},{lat: 41.3969, lng:-87.3274, count: 2},{lat: 41.7364, lng:-89.7043, count: 2},{lat: 42.3425, lng:-71.0677, count: 1},{lat: 33.8042, lng:-83.8893, count: 1},{lat: 36.6859, lng:-121.629, count: 2},{lat: 41.0957, lng:-80.5052, count: 1},{lat: 46.8841, lng:-123.995, count: 1},{lat: 40.2851, lng:-75.9523, count: 2},{lat: 42.4235, lng:-85.3992, count: 1},{lat: 39.7437, lng:-104.979, count: 2},{lat: 25.6586, lng:-80.3568, count: 7},{lat: 33.0975, lng:-80.1753, count: 1},{lat: 25.7615, lng:-80.2939, count: 1},{lat: 26.3739, lng:-80.1468, count: 1},{lat: 37.6454, lng:-84.8171, count: 1},{lat: 34.2321, lng:-77.8835, count: 1},{lat: 34.6774, lng:-82.928, count: 1},{lat: 39.9744, lng:-86.0779, count: 1},{lat: 35.6784, lng:-97.4944, count: 2},{lat: 33.5547, lng:-84.1872, count: 1},{lat: 27.2498, lng:-80.3797, count: 1},{lat: 41.4789, lng:-81.6473, count: 1},{lat: 41.813, lng:-87.7134, count: 1},{lat: 41.8917, lng:-87.9359, count: 1},{lat: 35.0911, lng:-89.651, count: 1},{lat: 32.6102, lng:-117.03, count: 1},{lat: 41.758, lng:-72.7444, count: 1},{lat: 39.8062, lng:-86.1407, count: 1},{lat: 41.872, lng:-88.1662, count: 1},{lat: 34.1404, lng:-81.3369, count: 1},{lat: 46.15, lng:-60.1667, count: 1},{lat: 36.0679, lng:-86.7194, count: 1},{lat: 43.45, lng:-80.5, count: 1},{lat: 44.3833, lng:-79.7, count: 1},{lat: 45.4167, lng:-75.7, count: 2},{lat: 43.75, lng:-79.2, count: 2},{lat: 45.2667, lng:-66.0667, count: 3},{lat: 42.9833, lng:-81.25, count: 2},{lat: 44.25, lng:-79.4667, count: 3},{lat: 45.2667, lng:-66.0667, count: 2},{lat: 34.3667, lng:-118.478, count: 3},{lat: 42.734, lng:-87.8211, count: 1},{lat: 39.9738, lng:-86.1765, count: 1},{lat: 33.7438, lng:-117.866, count: 1},{lat: 37.5741, lng:-122.321, count: 1},{lat: 42.2843, lng:-85.2293, count: 1},{lat: 34.6574, lng:-92.5295, count: 1},{lat: 41.4881, lng:-87.4424, count: 1},{lat: 25.72, lng:-80.2707, count: 1},{lat: 34.5873, lng:-118.245, count: 1},{lat: 35.8278, lng:-78.6421, count: 1}]
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
heatmap.setData(testData);
|
|
62
|
+
|
|
63
|
+
</script>
|
|
64
|
+
</body>
|
|
65
|
+
</html>
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Legend Example (DOM Legends) | 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; font-weight:200;}
|
|
16
|
+
#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);}
|
|
17
|
+
</style>
|
|
18
|
+
</head>
|
|
19
|
+
<body>
|
|
20
|
+
<div id="heatmapContainerWrapper">
|
|
21
|
+
<div id="heatmapContainer">
|
|
22
|
+
|
|
23
|
+
</div>
|
|
24
|
+
<div id="heatmapLegend">
|
|
25
|
+
<h2>Descriptive Legend Title</h2>
|
|
26
|
+
<span id="min"></span>
|
|
27
|
+
<span id="max"></span>
|
|
28
|
+
<img id="gradient" src="" style="width:100%" />
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<h1>Adding a custom legend to heatmap.js</h1>
|
|
32
|
+
<div id="all-examples-info">
|
|
33
|
+
<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 & inline documentation.
|
|
34
|
+
</div>
|
|
35
|
+
<script src="../../build/heatmap.js"></script>
|
|
36
|
+
<script>
|
|
37
|
+
window.onload = function() {
|
|
38
|
+
// helper function
|
|
39
|
+
function $(id) {
|
|
40
|
+
return document.getElementById(id);
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
/* legend code */
|
|
44
|
+
// we want to display the gradient, so we have to draw it
|
|
45
|
+
var legendCanvas = document.createElement('canvas');
|
|
46
|
+
legendCanvas.width = 100;
|
|
47
|
+
legendCanvas.height = 10;
|
|
48
|
+
|
|
49
|
+
var legendCtx = legendCanvas.getContext('2d');
|
|
50
|
+
var gradientCfg = {};
|
|
51
|
+
|
|
52
|
+
function updateLegend(data) {
|
|
53
|
+
// the onExtremaChange callback gives us min, max, and the gradientConfig
|
|
54
|
+
// so we can update the legend
|
|
55
|
+
$('min').innerHTML = data.min;
|
|
56
|
+
$('max').innerHTML = data.max;
|
|
57
|
+
// regenerate gradient image
|
|
58
|
+
if (data.gradient != gradientCfg) {
|
|
59
|
+
gradientCfg = data.gradient;
|
|
60
|
+
var gradient = legendCtx.createLinearGradient(0, 0, 100, 1);
|
|
61
|
+
for (var key in gradientCfg) {
|
|
62
|
+
gradient.addColorStop(key, gradientCfg[key]);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
legendCtx.fillStyle = gradient;
|
|
66
|
+
legendCtx.fillRect(0, 0, 100, 10);
|
|
67
|
+
$('gradient').src = legendCanvas.toDataURL();
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
/* legend code end */
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
// create a heatmap instance
|
|
74
|
+
var heatmap = h337.create({
|
|
75
|
+
container: document.getElementById('heatmapContainer'),
|
|
76
|
+
maxOpacity: .5,
|
|
77
|
+
radius: 10,
|
|
78
|
+
blur: .75,
|
|
79
|
+
// dataStack: false,
|
|
80
|
+
// update the legend whenever there's an extrema change
|
|
81
|
+
onExtremaChange: function onExtremaChange(data) {
|
|
82
|
+
updateLegend(data);
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
// boundaries for data generation
|
|
87
|
+
var width = (+window.getComputedStyle(document.body).width.replace(/px/,''));
|
|
88
|
+
var height = (+window.getComputedStyle(document.body).height.replace(/px/,''));
|
|
89
|
+
|
|
90
|
+
// generate 1000 datapoints
|
|
91
|
+
var generate = function() {
|
|
92
|
+
// randomly generate extremas
|
|
93
|
+
var extremas = [(Math.random() * 1000) >> 0,(Math.random() * 1000) >> 0];
|
|
94
|
+
var max = 100;
|
|
95
|
+
var min = 0;
|
|
96
|
+
var t = [];
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
for (var i = 0; i < 10; i++) {
|
|
100
|
+
var x = 500;
|
|
101
|
+
var y = 600;
|
|
102
|
+
var c = 30;
|
|
103
|
+
// btw, we can set a radius on a point basis
|
|
104
|
+
var r = 80;
|
|
105
|
+
// add to dataset
|
|
106
|
+
t.push({ x: x, y:y, value: c, radius: r });
|
|
107
|
+
}
|
|
108
|
+
var init = +new Date;
|
|
109
|
+
// set the generated dataset
|
|
110
|
+
heatmap.setData({
|
|
111
|
+
min: min,
|
|
112
|
+
max: max,
|
|
113
|
+
data: t
|
|
114
|
+
});
|
|
115
|
+
console.log('took ', (+new Date) - init, 'ms');
|
|
116
|
+
};
|
|
117
|
+
// initial generate
|
|
118
|
+
generate();
|
|
119
|
+
|
|
120
|
+
// whenever a user clicks on the ContainerWrapper the data will be regenerated -> new max & min
|
|
121
|
+
document.getElementById('heatmapContainerWrapper').onclick = function() { generate(); };
|
|
122
|
+
|
|
123
|
+
};
|
|
124
|
+
</script>
|
|
125
|
+
</body>
|
|
126
|
+
</html>
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Leaflet Heatmap Layer Plugin</title>
|
|
6
|
+
<style>
|
|
7
|
+
body, html { margin:0; padding:0; height:100%;}
|
|
8
|
+
body { font-family:sans-serif; }
|
|
9
|
+
body * { font-weight:200;}
|
|
10
|
+
h1 { position:absolute; background:white; padding:10px;}
|
|
11
|
+
#map { height:100%; }
|
|
12
|
+
.leaflet-container {
|
|
13
|
+
background: rgba(0,0,0,.8) !important;
|
|
14
|
+
}
|
|
15
|
+
h1 { position:absolute; background:black; color:white; padding:10px; font-weight:200; z-index:10000;}
|
|
16
|
+
#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);}
|
|
17
|
+
</style>
|
|
18
|
+
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
|
|
19
|
+
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
|
|
20
|
+
<script src="/build/heatmap.js"></script>
|
|
21
|
+
<script src="/plugins/leaflet-heatmap/leaflet-heatmap.js"></script>
|
|
22
|
+
</head>
|
|
23
|
+
<body>
|
|
24
|
+
<h1>Leaflet Heatmap Layer Example</h1>
|
|
25
|
+
|
|
26
|
+
<div id="map"></div>
|
|
27
|
+
|
|
28
|
+
<div id="all-examples-info">
|
|
29
|
+
<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 & inline documentation.
|
|
30
|
+
</div>
|
|
31
|
+
<script>
|
|
32
|
+
window.onload = function() {
|
|
33
|
+
|
|
34
|
+
var testData = {
|
|
35
|
+
max: 8,
|
|
36
|
+
data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1},{lat: 52.6333, lng:1.75, count: 1},{lat: 48.15, lng:9.4667, count: 1},{lat: 52.35, lng:4.9167, count: 2},{lat: 60.8, lng:11.1, count: 1},{lat: 43.561, lng:-116.214, count: 1},{lat: 47.5036, lng:-94.685, count: 1},{lat: 42.1818, lng:-71.1962, count: 1},{lat: 42.0477, lng:-74.1227, count: 1},{lat: 40.0326, lng:-75.719, count: 1},{lat: 40.7128, lng:-73.2962, count: 2},{lat: 27.9003, lng:-82.3024, count: 1},{lat: 38.2085, lng:-85.6918, count: 1},{lat: 46.8159, lng:-100.706, count: 1},{lat: 30.5449, lng:-90.8083, count: 1},{lat: 44.735, lng:-89.61, count: 1},{lat: 41.4201, lng:-75.6485, count: 2},{lat: 39.4209, lng:-74.4977, count: 1},{lat: 39.7437, lng:-104.979, count: 1},{lat: 39.5593, lng:-105.006, count: 1},{lat: 45.2673, lng:-93.0196, count: 1},{lat: 41.1215, lng:-89.4635, count: 1},{lat: 43.4314, lng:-83.9784, count: 1},{lat: 43.7279, lng:-86.284, count: 1},{lat: 40.7168, lng:-73.9861, count: 1},{lat: 47.7294, lng:-116.757, count: 1},{lat: 47.7294, lng:-116.757, count: 2},{lat: 35.5498, lng:-118.917, count: 1},{lat: 34.1568, lng:-118.523, count: 1},{lat: 39.501, lng:-87.3919, count: 3},{lat: 33.5586, lng:-112.095, count: 1},{lat: 38.757, lng:-77.1487, count: 1},{lat: 33.223, lng:-117.107, count: 1},{lat: 30.2316, lng:-85.502, count: 1},{lat: 39.1703, lng:-75.5456, count: 8},{lat: 30.0041, lng:-95.2984, count: 2},{lat: 29.7755, lng:-95.4152, count: 1},{lat: 41.8014, lng:-87.6005, count: 1},{lat: 37.8754, lng:-121.687, count: 7},{lat: 38.4493, lng:-122.709, count: 1},{lat: 40.5494, lng:-89.6252, count: 1},{lat: 42.6105, lng:-71.2306, count: 1},{lat: 40.0973, lng:-85.671, count: 1},{lat: 40.3987, lng:-86.8642, count: 1},{lat: 40.4224, lng:-86.8031, count: 4},{lat: 47.2166, lng:-122.451, count: 1},{lat: 32.2369, lng:-110.956, count: 1},{lat: 41.3969, lng:-87.3274, count: 2},{lat: 41.7364, lng:-89.7043, count: 2},{lat: 42.3425, lng:-71.0677, count: 1},{lat: 33.8042, lng:-83.8893, count: 1},{lat: 36.6859, lng:-121.629, count: 2},{lat: 41.0957, lng:-80.5052, count: 1},{lat: 46.8841, lng:-123.995, count: 1},{lat: 40.2851, lng:-75.9523, count: 2},{lat: 42.4235, lng:-85.3992, count: 1},{lat: 39.7437, lng:-104.979, count: 2},{lat: 25.6586, lng:-80.3568, count: 7},{lat: 33.0975, lng:-80.1753, count: 1},{lat: 25.7615, lng:-80.2939, count: 1},{lat: 26.3739, lng:-80.1468, count: 1},{lat: 37.6454, lng:-84.8171, count: 1},{lat: 34.2321, lng:-77.8835, count: 1},{lat: 34.6774, lng:-82.928, count: 1},{lat: 39.9744, lng:-86.0779, count: 1},{lat: 35.6784, lng:-97.4944, count: 2},{lat: 33.5547, lng:-84.1872, count: 1},{lat: 27.2498, lng:-80.3797, count: 1},{lat: 41.4789, lng:-81.6473, count: 1},{lat: 41.813, lng:-87.7134, count: 1},{lat: 41.8917, lng:-87.9359, count: 1},{lat: 35.0911, lng:-89.651, count: 1},{lat: 32.6102, lng:-117.03, count: 1},{lat: 41.758, lng:-72.7444, count: 1},{lat: 39.8062, lng:-86.1407, count: 1},{lat: 41.872, lng:-88.1662, count: 1},{lat: 34.1404, lng:-81.3369, count: 1},{lat: 46.15, lng:-60.1667, count: 1},{lat: 36.0679, lng:-86.7194, count: 1},{lat: 43.45, lng:-80.5, count: 1},{lat: 44.3833, lng:-79.7, count: 1},{lat: 45.4167, lng:-75.7, count: 2},{lat: 43.75, lng:-79.2, count: 2},{lat: 45.2667, lng:-66.0667, count: 3},{lat: 42.9833, lng:-81.25, count: 2},{lat: 44.25, lng:-79.4667, count: 3},{lat: 45.2667, lng:-66.0667, count: 2},{lat: 34.3667, lng:-118.478, count: 3},{lat: 42.734, lng:-87.8211, count: 1},{lat: 39.9738, lng:-86.1765, count: 1},{lat: 33.7438, lng:-117.866, count: 1},{lat: 37.5741, lng:-122.321, count: 1},{lat: 42.2843, lng:-85.2293, count: 1},{lat: 34.6574, lng:-92.5295, count: 1},{lat: 41.4881, lng:-87.4424, count: 1},{lat: 25.72, lng:-80.2707, count: 1},{lat: 34.5873, lng:-118.245, count: 1},{lat: 35.8278, lng:-78.6421, count: 1}]
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
var baseLayer = L.tileLayer(
|
|
40
|
+
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
|
|
41
|
+
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
|
|
42
|
+
maxZoom: 18
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
|
|
46
|
+
var cfg = {
|
|
47
|
+
// radius should be small ONLY if scaleRadius is true (or small radius is intended)
|
|
48
|
+
"radius": 2,
|
|
49
|
+
"maxOpacity": .8,
|
|
50
|
+
// scales the radius based on map zoom
|
|
51
|
+
"scaleRadius": true,
|
|
52
|
+
// if set to false the heatmap uses the global maximum for colorization
|
|
53
|
+
// if activated: uses the data maximum within the current map boundaries
|
|
54
|
+
// (there will always be a red spot with useLocalExtremas true)
|
|
55
|
+
"useLocalExtrema": true,
|
|
56
|
+
// which field name in your data represents the latitude - default "lat"
|
|
57
|
+
latField: 'lat',
|
|
58
|
+
// which field name in your data represents the longitude - default "lng"
|
|
59
|
+
lngField: 'lng',
|
|
60
|
+
// which field name in your data represents the data value - default "value"
|
|
61
|
+
valueField: 'count'
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
var heatmapLayer = new HeatmapOverlay(cfg);
|
|
66
|
+
|
|
67
|
+
var map = new L.Map('map', {
|
|
68
|
+
center: new L.LatLng(25.6586, -80.3568),
|
|
69
|
+
zoom: 4,
|
|
70
|
+
layers: [baseLayer, heatmapLayer]
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
heatmapLayer.setData(testData);
|
|
74
|
+
|
|
75
|
+
// make accessible for debugging
|
|
76
|
+
layer = heatmapLayer;
|
|
77
|
+
};
|
|
78
|
+
</script>
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|