@daishu10000/leaflet-heat 0.2.2 → 0.3.1
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 +1 -0
- package/dist/leaflet-heat.js +12 -11
- package/package.json +33 -32
- package/rollup.config.js +37 -0
- package/src/index.js +9 -0
- package/src/simpleheat.js +140 -0
package/LICENSE
CHANGED
package/dist/leaflet-heat.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
/*
|
|
2
|
-
(c) 2014, Vladimir Agafonkin
|
|
3
|
-
simpleheat, a tiny JavaScript library for drawing heatmaps with Canvas
|
|
4
|
-
https://github.com/mourner/simpleheat
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
(c) 2014, Vladimir Agafonkin
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
/*
|
|
2
|
+
(c) 2014, Vladimir Agafonkin
|
|
3
|
+
simpleheat, a tiny JavaScript library for drawing heatmaps with Canvas
|
|
4
|
+
https://github.com/mourner/simpleheat
|
|
5
|
+
*/
|
|
6
|
+
/*
|
|
7
|
+
(c) 2014, Vladimir Agafonkin
|
|
8
|
+
(c) 2026, daishu0000 <daishu10000@gmail.com>
|
|
9
|
+
Leaflet.heat, a tiny and fast heatmap plugin for Leaflet.
|
|
10
|
+
https://github.com/daishu0000/Leaflet.heat
|
|
11
|
+
*/
|
|
12
|
+
!function(){"use strict";function t(i){if(!(this instanceof t))return new t(i);this._canvas=i="string"==typeof i?document.getElementById(i):i,this._ctx=i.getContext("2d",{willReadFrequently:!0}),this._width=i.width,this._height=i.height,this._max=1,this._data=[]}t.prototype={defaultRadius:25,defaultGradient:{.4:"blue",.6:"cyan",.7:"lime",.8:"yellow",1:"red"},data:function(t){return this._data=t,this},max:function(t){return this._max=t,this},add:function(t){return this._data.push(t),this},clear:function(){return this._data=[],this},radius:function(t,i){i=void 0===i?15:i;var a=this._circle=this._createCanvas(),s=a.getContext("2d"),e=this._r=t+i;return a.width=a.height=2*e,s.shadowOffsetX=s.shadowOffsetY=2*e,s.shadowBlur=i,s.shadowColor="black",s.beginPath(),s.arc(-e,-e,t,0,2*Math.PI,!0),s.closePath(),s.fill(),this},resize:function(){this._width=this._canvas.width,this._height=this._canvas.height},gradient:function(t){var i=this._createCanvas(),a=i.getContext("2d",{willReadFrequently:!0}),s=a.createLinearGradient(0,0,0,256);for(var e in i.width=1,i.height=256,t)s.addColorStop(+e,t[e]);return a.fillStyle=s,a.fillRect(0,0,1,256),this._grad=a.getImageData(0,0,1,256).data,this},draw:function(t){this._circle||this.radius(this.defaultRadius),this._grad||this.gradient(this.defaultGradient);var i=this._ctx;i.clearRect(0,0,this._width,this._height);for(var a,s=0,e=this._data.length;s<e;s++)a=this._data[s],i.globalAlpha=Math.min(Math.max(a[2]/this._max,void 0===t?.05:t),1),i.drawImage(this._circle,a[0]-this._r,a[1]-this._r);var n=i.getImageData(0,0,this._width,this._height);return this._colorize(n.data,this._grad),i.putImageData(n,0,0),this},_colorize:function(t,i){for(var a,s=0,e=t.length;s<e;s+=4)(a=4*t[s+3])&&(t[s]=i[a],t[s+1]=i[a+1],t[s+2]=i[a+2])},_createCanvas:function(){return"undefined"!=typeof document?document.createElement("canvas"):new this._canvas.constructor}},L.HeatLayer=(L.Layer?L.Layer:L.Class).extend({initialize:function(t,i){this._latlngs=t,L.setOptions(this,i)},setLatLngs:function(t){return this._latlngs=t,this.redraw()},addLatLng:function(t){return this._latlngs.push(t),this.redraw()},setOptions:function(t){return L.setOptions(this,t),this._heat&&this._updateOptions(),this.redraw()},getBounds:function(){return L.latLngBounds(this._latlngs)},redraw:function(){return this._heat&&!this._frame&&this._map&&!this._map._animating&&(this._frame=L.Util.requestAnimFrame(this._redraw,this)),this},onAdd:function(t){this._map=t,this._canvas||this._initCanvas(),this.options.pane?this.getPane().appendChild(this._canvas):t._panes.overlayPane.appendChild(this._canvas),t.on("moveend",this._reset,this),t.options.zoomAnimation&&L.Browser.any3d&&t.on("zoomanim",this._animateZoom,this),this._reset()},onRemove:function(t){this.options.pane?this.getPane().removeChild(this._canvas):t.getPanes().overlayPane.removeChild(this._canvas),t.off("moveend",this._reset,this),t.options.zoomAnimation&&t.off("zoomanim",this._animateZoom,this)},addTo:function(t){return t.addLayer(this),this},_initCanvas:function(){var t=this._canvas=L.DomUtil.create("canvas","leaflet-heatmap-layer leaflet-layer"),i=L.DomUtil.testProp(["transformOrigin","WebkitTransformOrigin","msTransformOrigin"]);t.style[i]="50% 50%";var a=this._map.getSize();t.width=a.x,t.height=a.y;var s=this._map.options.zoomAnimation&&L.Browser.any3d;L.DomUtil.addClass(t,"leaflet-zoom-"+(s?"animated":"hide")),this._heat=simpleheat(t),this._updateOptions()},_updateOptions:function(){this._heat.radius(this.options.radius||this._heat.defaultRadius,this.options.blur),this.options.gradient&&this._heat.gradient(this.options.gradient),this.options.max&&this._heat.max(this.options.max)},_reset:function(){var t=this._map.containerPointToLayerPoint([0,0]);L.DomUtil.setPosition(this._canvas,t);var i=this._map.getSize();this._heat._width!==i.x&&(this._canvas.width=this._heat._width=i.x),this._heat._height!==i.y&&(this._canvas.height=this._heat._height=i.y),this._redraw()},_redraw:function(){if(this._map){var t,i,a,s,e,n,h,o,r,d=[],_=this._heat._r,l=this._map.getSize(),m=new L.Bounds(L.point([-_,-_]),l.add([_,_])),u=void 0===this.options.max?1:this.options.max,c=void 0===this.options.maxZoom?this._map.getMaxZoom():this.options.maxZoom,f=1/Math.pow(2,Math.max(0,Math.min(c-this._map.getZoom(),12))),g=_/2,p=[],v=this._map._getMapPanePos(),w=v.x%g,y=v.y%g;for(t=0,i=this._latlngs.length;t<i;t++){if(a=this._map.latLngToContainerPoint(this._latlngs[t]),a=L.point(a.x,a.y),m.contains(a))e=Math.floor((a.x-w)/g)+2,n=Math.floor((a.y-y)/g)+2,r=(void 0!==this._latlngs[t].alt?this._latlngs[t].alt:void 0!==this._latlngs[t][2]?+this._latlngs[t][2]:1)*f,p[n]=p[n]||[],(s=p[n][e])?(s[0]=(s[0]*s[2]+a.x*r)/(s[2]+r),s[1]=(s[1]*s[2]+a.y*r)/(s[2]+r),s[2]+=r):p[n][e]=[a.x,a.y,r]}for(t=0,i=p.length;t<i;t++)if(p[t])for(h=0,o=p[t].length;h<o;h++)(s=p[t][h])&&d.push([Math.round(s[0]),Math.round(s[1]),Math.min(s[2],u)]);this._heat.max(u*f),this._heat.data(d).draw(this.options.minOpacity),this._frame=null}},_animateZoom:function(t){var i=this._map.getZoomScale(t.zoom),a=this._map._getCenterOffset(t.center)._multiplyBy(-i).subtract(this._map._getMapPanePos());L.DomUtil.setTransform?L.DomUtil.setTransform(this._canvas,a,i):this._canvas.style[L.DomUtil.TRANSFORM]=L.DomUtil.getTranslateString(a)+" scale("+i+")"}}),L.heatLayer=function(t,i){return new L.HeatLayer(t,i)},"undefined"!=typeof window&&(window.simpleheat=t)}();
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@daishu10000/leaflet-heat",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1",
|
|
4
|
+
"type": "module",
|
|
4
5
|
"description": "A tiny and fast Leaflet heatmap plugin (community bugfix fork).",
|
|
5
|
-
"homepage": "https://github.com/
|
|
6
|
+
"homepage": "https://github.com/daishu0000/Leaflet.heat",
|
|
6
7
|
"keywords": [
|
|
7
8
|
"heatmap",
|
|
8
9
|
"canvas",
|
|
@@ -11,44 +12,44 @@
|
|
|
11
12
|
"leaflet",
|
|
12
13
|
"plugin"
|
|
13
14
|
],
|
|
14
|
-
"author": "
|
|
15
|
+
"author": "daishu0000",
|
|
16
|
+
"license": "BSD-2-Clause",
|
|
15
17
|
"repository": {
|
|
16
18
|
"type": "git",
|
|
17
|
-
"url": "git://github.com/
|
|
19
|
+
"url": "git://github.com/daishu0000/Leaflet.heat.git"
|
|
18
20
|
},
|
|
19
21
|
"main": "dist/leaflet-heat.js",
|
|
22
|
+
"scripts": {
|
|
23
|
+
"build": "rollup -c",
|
|
24
|
+
"test": "eslint src",
|
|
25
|
+
"prepublishOnly": "npm run build"
|
|
26
|
+
},
|
|
20
27
|
"devDependencies": {
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
28
|
+
"@rollup/plugin-commonjs": "^28.0.0",
|
|
29
|
+
"@rollup/plugin-node-resolve": "^16.0.0",
|
|
30
|
+
"@rollup/plugin-terser": "^0.4.0",
|
|
31
|
+
"eslint": "^9.0.0",
|
|
32
|
+
"rollup": "^4.0.0"
|
|
25
33
|
},
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"globals": {
|
|
29
|
-
"L": false,
|
|
30
|
-
"simpleheat": false
|
|
31
|
-
}
|
|
34
|
+
"engines": {
|
|
35
|
+
"node": ">=18"
|
|
32
36
|
},
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
|
|
37
|
+
"exports": {
|
|
38
|
+
".": {
|
|
39
|
+
"import": "./dist/leaflet-heat.js",
|
|
40
|
+
"require": "./dist/leaflet-heat.js",
|
|
41
|
+
"default": "./dist/leaflet-heat.js"
|
|
42
|
+
}
|
|
36
43
|
},
|
|
37
|
-
"
|
|
38
|
-
|
|
39
|
-
"
|
|
40
|
-
|
|
41
|
-
"
|
|
42
|
-
"simpleheat": true
|
|
44
|
+
"eslintConfig": {
|
|
45
|
+
"extends": "eslint:recommended",
|
|
46
|
+
"env": {
|
|
47
|
+
"browser": true,
|
|
48
|
+
"es2022": true
|
|
43
49
|
},
|
|
44
|
-
"
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
"noempty": true,
|
|
49
|
-
"nonbsp": true,
|
|
50
|
-
"undef": true,
|
|
51
|
-
"unused": true,
|
|
52
|
-
"browser": true
|
|
50
|
+
"globals": {
|
|
51
|
+
"L": "readonly",
|
|
52
|
+
"simpleheat": "writable"
|
|
53
|
+
}
|
|
53
54
|
}
|
|
54
55
|
}
|
package/rollup.config.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import commonjs from '@rollup/plugin-commonjs';
|
|
2
|
+
import { nodeResolve } from '@rollup/plugin-node-resolve';
|
|
3
|
+
import terser from '@rollup/plugin-terser';
|
|
4
|
+
|
|
5
|
+
const banner = `/*
|
|
6
|
+
(c) 2014, Vladimir Agafonkin
|
|
7
|
+
simpleheat, a tiny JavaScript library for drawing heatmaps with Canvas
|
|
8
|
+
https://github.com/mourner/simpleheat
|
|
9
|
+
*/
|
|
10
|
+
/*
|
|
11
|
+
(c) 2014, Vladimir Agafonkin
|
|
12
|
+
(c) 2026, daishu0000 <daishu10000@gmail.com>
|
|
13
|
+
Leaflet.heat, a tiny and fast heatmap plugin for Leaflet.
|
|
14
|
+
https://github.com/daishu0000/Leaflet.heat
|
|
15
|
+
*/`;
|
|
16
|
+
|
|
17
|
+
export default {
|
|
18
|
+
input: 'src/index.js',
|
|
19
|
+
output: {
|
|
20
|
+
file: 'dist/leaflet-heat.js',
|
|
21
|
+
format: 'iife',
|
|
22
|
+
globals: { L: 'L' },
|
|
23
|
+
banner
|
|
24
|
+
},
|
|
25
|
+
external: ['L'],
|
|
26
|
+
plugins: [
|
|
27
|
+
nodeResolve(),
|
|
28
|
+
commonjs(),
|
|
29
|
+
terser({
|
|
30
|
+
compress: {},
|
|
31
|
+
mangle: true,
|
|
32
|
+
format: {
|
|
33
|
+
comments: (node, { value }) => /\(c\)|copyright|license|leaflet\.heat|simpleheat|github\.com/i.test(value)
|
|
34
|
+
}
|
|
35
|
+
})
|
|
36
|
+
]
|
|
37
|
+
};
|
package/src/index.js
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
export default function simpleheat(canvas) {
|
|
4
|
+
if (!(this instanceof simpleheat)) return new simpleheat(canvas);
|
|
5
|
+
|
|
6
|
+
this._canvas = canvas = typeof canvas === 'string' ? document.getElementById(canvas) : canvas;
|
|
7
|
+
|
|
8
|
+
this._ctx = canvas.getContext('2d', {willReadFrequently: true});
|
|
9
|
+
this._width = canvas.width;
|
|
10
|
+
this._height = canvas.height;
|
|
11
|
+
|
|
12
|
+
this._max = 1;
|
|
13
|
+
this._data = [];
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
simpleheat.prototype = {
|
|
17
|
+
|
|
18
|
+
defaultRadius: 25,
|
|
19
|
+
|
|
20
|
+
defaultGradient: {
|
|
21
|
+
0.4: 'blue',
|
|
22
|
+
0.6: 'cyan',
|
|
23
|
+
0.7: 'lime',
|
|
24
|
+
0.8: 'yellow',
|
|
25
|
+
1.0: 'red'
|
|
26
|
+
},
|
|
27
|
+
|
|
28
|
+
data: function (data) {
|
|
29
|
+
this._data = data;
|
|
30
|
+
return this;
|
|
31
|
+
},
|
|
32
|
+
|
|
33
|
+
max: function (max) {
|
|
34
|
+
this._max = max;
|
|
35
|
+
return this;
|
|
36
|
+
},
|
|
37
|
+
|
|
38
|
+
add: function (point) {
|
|
39
|
+
this._data.push(point);
|
|
40
|
+
return this;
|
|
41
|
+
},
|
|
42
|
+
|
|
43
|
+
clear: function () {
|
|
44
|
+
this._data = [];
|
|
45
|
+
return this;
|
|
46
|
+
},
|
|
47
|
+
|
|
48
|
+
radius: function (r, blur) {
|
|
49
|
+
blur = blur === undefined ? 15 : blur;
|
|
50
|
+
|
|
51
|
+
// create a grayscale blurred circle image that we'll use for drawing points
|
|
52
|
+
var circle = this._circle = this._createCanvas(),
|
|
53
|
+
ctx = circle.getContext('2d'),
|
|
54
|
+
r2 = this._r = r + blur;
|
|
55
|
+
|
|
56
|
+
circle.width = circle.height = r2 * 2;
|
|
57
|
+
|
|
58
|
+
ctx.shadowOffsetX = ctx.shadowOffsetY = r2 * 2;
|
|
59
|
+
ctx.shadowBlur = blur;
|
|
60
|
+
ctx.shadowColor = 'black';
|
|
61
|
+
|
|
62
|
+
ctx.beginPath();
|
|
63
|
+
ctx.arc(-r2, -r2, r, 0, Math.PI * 2, true);
|
|
64
|
+
ctx.closePath();
|
|
65
|
+
ctx.fill();
|
|
66
|
+
|
|
67
|
+
return this;
|
|
68
|
+
},
|
|
69
|
+
|
|
70
|
+
resize: function () {
|
|
71
|
+
this._width = this._canvas.width;
|
|
72
|
+
this._height = this._canvas.height;
|
|
73
|
+
},
|
|
74
|
+
|
|
75
|
+
gradient: function (grad) {
|
|
76
|
+
// create a 256x1 gradient that we'll use to turn a grayscale heatmap into a colored one
|
|
77
|
+
var canvas = this._createCanvas(),
|
|
78
|
+
ctx = canvas.getContext('2d', {willReadFrequently: true}),
|
|
79
|
+
gradient = ctx.createLinearGradient(0, 0, 0, 256);
|
|
80
|
+
|
|
81
|
+
canvas.width = 1;
|
|
82
|
+
canvas.height = 256;
|
|
83
|
+
|
|
84
|
+
for (var i in grad) {
|
|
85
|
+
gradient.addColorStop(+i, grad[i]);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
ctx.fillStyle = gradient;
|
|
89
|
+
ctx.fillRect(0, 0, 1, 256);
|
|
90
|
+
|
|
91
|
+
this._grad = ctx.getImageData(0, 0, 1, 256).data;
|
|
92
|
+
|
|
93
|
+
return this;
|
|
94
|
+
},
|
|
95
|
+
|
|
96
|
+
draw: function (minOpacity) {
|
|
97
|
+
if (!this._circle) this.radius(this.defaultRadius);
|
|
98
|
+
if (!this._grad) this.gradient(this.defaultGradient);
|
|
99
|
+
|
|
100
|
+
var ctx = this._ctx;
|
|
101
|
+
|
|
102
|
+
ctx.clearRect(0, 0, this._width, this._height);
|
|
103
|
+
|
|
104
|
+
// draw a grayscale heatmap by putting a blurred circle at each data point
|
|
105
|
+
for (var i = 0, len = this._data.length, p; i < len; i++) {
|
|
106
|
+
p = this._data[i];
|
|
107
|
+
ctx.globalAlpha = Math.min(Math.max(p[2] / this._max, minOpacity === undefined ? 0.05 : minOpacity), 1);
|
|
108
|
+
ctx.drawImage(this._circle, p[0] - this._r, p[1] - this._r);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// colorize the heatmap, using opacity value of each pixel to get the right color from our gradient
|
|
112
|
+
var colored = ctx.getImageData(0, 0, this._width, this._height);
|
|
113
|
+
this._colorize(colored.data, this._grad);
|
|
114
|
+
ctx.putImageData(colored, 0, 0);
|
|
115
|
+
|
|
116
|
+
return this;
|
|
117
|
+
},
|
|
118
|
+
|
|
119
|
+
_colorize: function (pixels, gradient) {
|
|
120
|
+
for (var i = 0, len = pixels.length, j; i < len; i += 4) {
|
|
121
|
+
j = pixels[i + 3] * 4; // get gradient color from opacity value
|
|
122
|
+
|
|
123
|
+
if (j) {
|
|
124
|
+
pixels[i] = gradient[j];
|
|
125
|
+
pixels[i + 1] = gradient[j + 1];
|
|
126
|
+
pixels[i + 2] = gradient[j + 2];
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
|
|
131
|
+
_createCanvas: function () {
|
|
132
|
+
if (typeof document !== 'undefined') {
|
|
133
|
+
return document.createElement('canvas');
|
|
134
|
+
} else {
|
|
135
|
+
// create a new canvas instance in node.js
|
|
136
|
+
// the canvas class needs to have a default constructor without any parameter
|
|
137
|
+
return new this._canvas.constructor();
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
};
|