forked from pa7/heatmap.js
-
Notifications
You must be signed in to change notification settings - Fork 1
/
leaflet.html
322 lines (301 loc) · 15.3 KB
/
leaflet.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!DOCTYPE html lang="en-UK">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet Heatmap demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" />
<![endif]-->
<style type="text/css" media="screen">
body{
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100%;
}
.what{position:absolute; top:0; left:0; width:400px; height:450px; background-color:#fff; color:#000; font-size:19px; z-index:1000}
b.heatmapcolorsetting{display:block; width:20px; height:20px;}
b.heatmapcolorsetting01{background-color:rgb(0,0,255)}
b.heatmapcolorsetting02{background-color:rgb(0,255,255)}
b.heatmapcolorsetting03{background-color:rgb(0,255,0)}
b.heatmapcolorsetting04{background-color:yellow}
b.heatmapcolorsetting05{background-color:rgb(255,0,0)}
</style>
<script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet-src.js"></script>
<script type="text/javascript" src="js/heatmap.js"></script>
<script type="text/javascript" src="js/heatmap-leaflet.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
var baseLayer = L.tileLayer(
'http://{s}.tile.cloudmade.com/ad132e106cd246ec961bbdfbe0228fe8/997/256/{z}/{x}/{y}.png',{
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>',
maxZoom: 30
}
);
var heatmapLayer = L.TileLayer.heatMap({
radius: 20,
opacity: 0.8,
gradient: {
0.05: "rgb(0,0,255)",
0.25: "rgb(47,142,133)",
0.40: "rgb(176,255,0)",
0.55: "rgb(0,255,255)",
0.65: "rgb(0,255,0)",
0.95: "yellow",
1.0: "rgb(255,0,0)"
}
});
var heatMapOptionsGradient = heatmapLayer.options.gradient;
$("div.what").append(heatMapOptionsGradient);
console.log(heatmapLayer.options.gradient);
heatmapLayer.addData(testData.data);
var overlayMaps = {
'Heatmap': heatmapLayer
};
var controls = L.control.layers(null, overlayMaps, {collapsed: false});
var map = new L.Map('map', {
center: new L.LatLng(36.8506, -75.9779),
zoom: 12,
layers: [baseLayer, heatmapLayer]
});
controls.addTo(map);
// make accessible for debugging
layer = heatmapLayer;
});
</script>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript" charset="utf-8">
var testData={
max: 30000,
data: [{lat: 36.697375927269, lon:-75.980077146085, value: 266},
{lat: 36.658132506398, lon:-75.990188986193, value: 356},
{lat: 36.579853450218, lon:-76.101155168135, value: 487},
{lat: 36.652512095259, lon:-76.009452315421, value: 578},
{lat: 36.618495602728, lon:-76.108161427931, value: 790},
{lat: 36.566747375503, lon:-76.076772262599, value: 937},
{lat: 36.647748808399, lon:-76.015127610031, value: 1456},
{lat: 36.91437579296, lon:-76.121553393469, value: 1587},
{lat: 36.725057775006, lon:-75.992456717909, value: 1745},
{lat: 36.901721905161, lon:-76.155025452903, value: 1975},
{lat: 36.746766268969, lon:-75.996052491349, value: 2017},
{lat: 36.759163487542, lon:-76.099021006614, value: 2116},
{lat: 36.864903588286, lon:-76.141361445456, value: 2175},
{lat: 36.746687392209, lon:-76.027416375338, value: 2403},
{lat: 36.644506932081, lon:-76.096430683101, value: 2467},
{lat: 36.856569988766, lon:-76.138976110811, value: 2621},
{lat: 36.734491424951, lon:-76.056415326661, value: 2750},
{lat: 36.722014814993, lon:-76.005065762641, value: 2779},
{lat: 36.734982135316, lon:-76.053843099801, value: 2973},
{lat: 36.894301162337, lon:-76.175265580016, value: 3302},
{lat: 36.842756976329, lon:-76.152094930688, value: 3389},
{lat: 36.8522016274, lon:-76.08514272159, value: 3408},
{lat: 36.850824061452, lon:-75.98725793497, value: 3419},
{lat: 36.882698903312, lon:-76.192728590205, value: 3503},
{lat: 36.836970855504, lon:-76.139274964951, value: 3587},
{lat: 36.613280955888, lon:-76.078558704607, value: 3594},
{lat: 36.850012254515, lon:-75.976052974082, value: 3671},
{lat: 36.789208645044, lon:-76.191417574212, value: 3754},
{lat: 36.809972715558, lon:-76.176870535233, value: 3781},
{lat: 36.844505161764, lon:-75.9906898601, value: 3807},
{lat: 36.864772175914, lon:-76.053329525787, value: 3944},
{lat: 36.738814874763, lon:-75.942944367013, value: 3954},
{lat: 36.86398274358, lon:-76.1504954471, value: 3987},
{lat: 36.849577195439, lon:-76.144046131101, value: 4016},
{lat: 36.848607395227, lon:-76.146204666956, value: 4036},
{lat: 36.911796645409, lon:-75.994310176998, value: 4045},
{lat: 36.845985695864, lon:-76.102085025261, value: 4141},
{lat: 36.837560781121, lon:-75.972731765443, value: 4263},
{lat: 36.832235597896, lon:-76.167594244403, value: 4328},
{lat: 36.819416716229, lon:-76.003206203626, value: 4344},
{lat: 36.801531884259, lon:-76.104949767219, value: 4344},
{lat: 36.750357593871, lon:-76.124589146504, value: 4526},
{lat: 36.847308662034, lon:-76.091543417336, value: 4587},
{lat: 36.811778624109, lon:-76.149209091961, value: 4666},
{lat: 36.749625416351, lon:-76.107993426423, value: 4721},
{lat: 36.799961633273, lon:-76.149685464997, value: 4771},
{lat: 36.840318101638, lon:-76.038732454276, value: 4789},
{lat: 36.761961239981, lon:-76.118828912461, value: 4865},
{lat: 36.819295089344, lon:-76.059873735413, value: 4935},
{lat: 36.854662603707, lon:-76.034011596751, value: 5052},
{lat: 36.828976335275, lon:-76.128573693677, value: 5262},
{lat: 36.8379899493, lon:-76.146831400592, value: 5337},
{lat: 36.869030213779, lon:-76.137330029567, value: 5375},
{lat: 36.832146141316, lon:-76.120207496418, value: 5436},
{lat: 36.658254689063, lon:-76.031987820228, value: 5520},
{lat: 36.862226830897, lon:-75.978942659485, value: 5618},
{lat: 36.776093410542, lon:-76.139282498729, value: 5680},
{lat: 36.812961582668, lon:-76.157038271089, value: 5715},
{lat: 36.846253007204, lon:-75.982573749515, value: 5828},
{lat: 36.800465657764, lon:-76.116456417644, value: 5903},
{lat: 36.811060051565, lon:-75.985767905527, value: 5936},
{lat: 36.723329128693, lon:-76.063899034565, value: 6183},
{lat: 36.893221946306, lon:-76.18555602421, value: 6526},
{lat: 36.841568432147, lon:-76.173155844617, value: 6926},
{lat: 36.865276283523, lon:-76.162897805436, value: 6993},
{lat: 36.842722271828, lon:-76.162563384157, value: 7006},
{lat: 36.794457740755, lon:-76.024494529877, value: 7397},
{lat: 36.84224208823, lon:-76.154808635569, value: 7456},
{lat: 36.78482817471, lon:-76.176304035579, value: 7523},
{lat: 36.864476355677, lon:-76.146446274472, value: 7607},
{lat: 36.801653968199, lon:-76.105222229653, value: 7723},
{lat: 36.818303695948, lon:-76.088131834639, value: 7871},
{lat: 36.758198068348, lon:-76.14042277219, value: 7934},
{lat: 36.802320342454, lon:-76.157222453392, value: 7998},
{lat: 36.864067383572, lon:-76.033499746506, value: 8047},
{lat: 36.874781961627, lon:-76.031057674087, value: 8112},
{lat: 36.910054813672, lon:-76.133113136632, value: 8331},
{lat: 36.793771929213, lon:-76.075063100941, value: 8398},
{lat: 36.898349798598, lon:-76.125630464574, value: 8439},
{lat: 36.840949526179, lon:-75.973404167514, value: 8567},
{lat: 36.718078031404, lon:-76.020278366471, value: 8636},
{lat: 36.827818805059, lon:-76.084937991342, value: 8783},
{lat: 36.865320848201, lon:-76.050790917235, value: 9249},
{lat: 36.785179525072, lon:-75.993129756493, value: 9277},
{lat: 36.864654488338, lon:-75.984272647721, value: 9335},
{lat: 36.809692561553, lon:-76.115337421893, value: 9349},
{lat: 36.841008086066, lon:-76.069891605868, value: 9425},
{lat: 36.862182955677, lon:-76.135517120679, value: 10287},
{lat: 36.764264201385, lon:-76.135488761135, value: 10525},
{lat: 36.845755447321, lon:-76.075916155511, value: 10910},
{lat: 36.780446864105, lon:-76.122717666648, value: 11024},
{lat: 36.783548191627, lon:-76.169285528161, value: 11029},
{lat: 36.846573318652, lon:-76.129898638861, value: 11116},
{lat: 36.825680941335, lon:-76.110854380615, value: 11607},
{lat: 36.848399931816, lon:-76.134639551805, value: 11611},
{lat: 36.757364897891, lon:-76.051615162705, value: 11811},
{lat: 36.89294646371, lon:-76.164741451245, value: 12175},
{lat: 36.851829931963, lon:-76.033739913535, value: 12194},
{lat: 36.789627345387, lon:-76.063953660541, value: 12222},
{lat: 36.788896111473, lon:-76.106622720896, value: 12249},
{lat: 36.837543578343, lon:-75.987222232445, value: 12266},
{lat: 36.739727398027, lon:-76.018983433153, value: 12310},
{lat: 36.831919349399, lon:-76.088604464314, value: 12463},
{lat: 36.789707191762, lon:-76.164196160603, value: 12524},
{lat: 36.744691677196, lon:-75.994013996267, value: 12653},
{lat: 36.817850280617, lon:-76.120655112513, value: 12781},
{lat: 36.776725071306, lon:-76.089890612588, value: 12875},
{lat: 36.830673383037, lon:-75.997477730951, value: 12884},
{lat: 36.917601579884, lon:-76.05256551254, value: 13434},
{lat: 36.901817801723, lon:-76.136499022953, value: 13668},
{lat: 36.746327500003, lon:-76.066305315442, value: 13752},
{lat: 36.84070684244, lon:-76.1344599868, value: 13828},
{lat: 36.803788845955, lon:-76.122746806708, value: 13988},
{lat: 36.775069660763, lon:-76.154623496355, value: 14110},
{lat: 36.81330305186, lon:-76.057236185231, value: 14263},
{lat: 36.843094137082, lon:-75.985607385793, value: 14294},
{lat: 36.842416493066, lon:-76.009776457495, value: 14422},
{lat: 36.838823619193, lon:-76.114827253064, value: 14485},
{lat: 36.871874220919, lon:-76.173993054736, value: 14799},
{lat: 36.849199988811, lon:-75.979764551147, value: 15214},
{lat: 36.835859555128, lon:-76.059438445276, value: 16424},
{lat: 36.869074042372, lon:-76.031497276505, value: 17085},
{lat: 36.895541187625, lon:-75.989867794875, value: 17303},
{lat: 36.777909849018, lon:-76.131429684108, value: 17384},
{lat: 36.914064600979, lon:-76.062882328609, value: 17642},
{lat: 36.760328484918, lon:-76.004699407989, value: 17793},
{lat: 36.85969217898, lon:-76.148358839138, value: 17990},
{lat: 36.79456034149, lon:-76.099002285289, value: 18073},
{lat: 36.872412017472, lon:-76.145372905289, value: 18239},
{lat: 36.789145515897, lon:-76.142345150102, value: 18448},
{lat: 36.791745474382, lon:-76.122944257317, value: 20039},
{lat: 36.89636971672, lon:-76.138924058046, value: 20418},
{lat: 36.787621450914, lon:-75.990768279644, value: 20798},
{lat: 36.842763497926, lon:-76.015403613115, value: 20860},
{lat: 36.849287518126, lon:-75.976917611132, value: 20895},
{lat: 36.840336697351, lon:-75.974186027021, value: 21527},
{lat: 36.779530626246, lon:-76.043313035855, value: 22060},
{lat: 36.86996215114, lon:-76.161778946854, value: 22642},
{lat: 36.812086634341, lon:-76.097936268408, value: 22664},
{lat: 36.869459901731, lon:-75.981993379387, value: 22821},
{lat: 36.864487542768, lon:-75.980686801702, value: 23022},
{lat: 36.826291599977, lon:-76.145424179559, value: 23685},
{lat: 36.791094082601, lon:-76.082397284851, value: 24549},
{lat: 36.781839297914, lon:-76.0479065771, value: 25137},
{lat: 36.904157341983, lon:-76.068994981944, value: 25158},
{lat: 36.838408344257, lon:-76.064595838978, value: 25704},
{lat: 36.902930861527, lon:-76.145647341091, value: 26071},
{lat: 36.843718959952, lon:-75.995841203485, value: 26206},
{lat: 36.834420134442, lon:-76.178329302955, value: 27079},
{lat: 36.841818203653, lon:-76.048443426925, value: 27184},
{lat: 36.896226785116, lon:-76.181318205643, value: 27748},
{lat: 36.811388619541, lon:-76.138729702912, value: 27864},
{lat: 36.894331624326, lon:-76.159193985249, value: 28169},
{lat: 36.841132047236, lon:-76.185512303837, value: 29364},
{lat: 36.851482158962, lon:-76.015915326004, value: 29472},
{lat: 36.907012806017, lon:-76.165622976869, value: 29518},
{lat: 36.793134761942, lon:-76.080032109008, value: 29662},
{lat: 36.807591281947, lon:-76.167742383301, value: 29884},
{lat: 36.851965713958, lon:-76.004600736396, value: 29905},
{lat: 36.806331582327, lon:-76.116993885114, value: 30504},
{lat: 36.826514604847, lon:-76.052824275601, value: 30924},
{lat: 36.816809682301, lon:-76.165183500074, value: 30977},
{lat: 36.775777870215, lon:-76.199031098078, value: 31077},
{lat: 36.858009967065, lon:-75.987760538682, value: 31115},
{lat: 36.805270111582, lon:-75.991748353262, value: 31296},
{lat: 36.786140834525, lon:-76.079261380342, value: 31935},
{lat: 36.870032387341, lon:-76.041235876704, value: 32236},
{lat: 36.800623969361, lon:-76.063466377443, value: 33379},
{lat: 36.821634057736, lon:-76.097199492188, value: 33464},
{lat: 36.794973560205, lon:-76.104037215311, value: 33577},
{lat: 36.81874501971, lon:-76.218201459759, value: 33753},
{lat: 36.775627678023, lon:-76.005405338034, value: 33914},
{lat: 36.906521753741, lon:-76.181576518171, value: 35244},
{lat: 36.846527167098, lon:-76.020543098937, value: 35500},
{lat: 36.843164958391, lon:-76.025661268192, value: 35531},
{lat: 36.818710591744, lon:-76.148231041359, value: 36221},
{lat: 36.815932379, lon:-76.105783336296, value: 36509},
{lat: 36.895417871389, lon:-76.060275690877, value: 37122},
{lat: 36.817115939442, lon:-76.126597513313, value: 38573},
{lat: 36.822065933033, lon:-76.067466429472, value: 38675},
{lat: 36.800273950385, lon:-76.129871759962, value: 38982},
{lat: 36.851329159695, lon:-76.168982049731, value: 39094},
{lat: 36.843547346543, lon:-76.077232326403, value: 39223},
{lat: 36.797181551712, lon:-76.14225383454, value: 40571},
{lat: 36.846090837847, lon:-76.1335531441, value: 40873},
{lat: 36.850057334197, lon:-76.04888190582, value: 41559},
{lat: 36.820373915225, lon:-76.12324104511, value: 41662},
{lat: 36.881439397181, lon:-76.044794262415, value: 41986},
{lat: 36.785982667614, lon:-76.080155166543, value: 41995},
{lat: 36.779551915859, lon:-76.08484148341, value: 42020},
{lat: 36.829666257044, lon:-76.067175360751, value: 42851},
{lat: 36.78232144751, lon:-76.060325366377, value: 44585},
{lat: 36.795324359861, lon:-76.164276297387, value: 44882},
{lat: 36.887445150528, lon:-76.135954408506, value: 49028},
{lat: 36.859451475719, lon:-76.026379747069, value: 39209},
{lat: 36.842703012534, lon:-76.117491575084, value: 52102},
{lat: 36.841987592815, lon:-76.055257821171, value: 53649},
{lat: 36.794571111014, lon:-76.167628660056, value: 55776},
{lat: 36.869624527638, lon:-76.13307757841, value: 55794},
{lat: 36.841064541109, lon:-76.094375472831, value: 55931},
{lat: 36.789913097412, lon:-75.997604112924, value: 61472},
{lat: 36.800518516459, lon:-76.180156988492, value: 65209},
{lat: 36.827238247273, lon:-76.132282481386, value: 72685}
]
};
</script>
<div class="what">
<h2>Heatmap Settings</h2>
<ul>
<li>radius: 20</li>
<li>opacity: 0.8</li>
<li>gradient:
<ul>
<li>.45: "rgb(0,0,255)", <b class="heatmapcolorsetting heatmapcolorsetting01"></b></li>
<li>0.55: "rgb(0,255,255)", <b class="heatmapcolorsetting heatmapcolorsetting02"></b></li>
<li>0.65: "rgb(0,255,0)", <b class="heatmapcolorsetting heatmapcolorsetting03"></b></li>
<li>0.95: "yellow", <b class="heatmapcolorsetting heatmapcolorsetting04"></b></li>
<li>1.0: "rgb(255,0,0)", <b class="heatmapcolorsetting heatmapcolorsetting05"></b></li>
</ul>
</li>
</ul>
</div>
</html>