diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2407460 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +package-lock.json +yarn.lock +node_modules +.idea diff --git a/README.md b/README.md index 1e1a7c6..ab12f09 100644 --- a/README.md +++ b/README.md @@ -39,8 +39,10 @@ To build the dist files run: Constructs a heatmap layer given an array of points and an object with the following options: - **minOpacity** - the minimum opacity the heat will start at -- **maxZoom** - zoom level where the points reach maximum intensity (as intensity scales with zoom), +- **maxIntensityZoom** - zoom level where the points reach maximum intensity (as intensity scales with zoom), equals `maxZoom` of the map by default +- **maxZoom** - maximum zoom level to draw +- **minZoom** - minimum zoom level to draw - **max** - maximum point intensity, `1.0` by default - **radius** - radius of each "point" of the heatmap, `25` by default - **blur** - amount of blur, `15` by default diff --git a/dist/leaflet-heat.js b/dist/leaflet-heat.js index aa8031a..7c35294 100644 --- a/dist/leaflet-heat.js +++ b/dist/leaflet-heat.js @@ -1,11 +1 @@ -/* - (c) 2014, Vladimir Agafonkin - simpleheat, a tiny JavaScript library for drawing heatmaps with Canvas - https://github.com/mourner/simpleheat -*/ -!function(){"use strict";function t(i){return this instanceof t?(this._canvas=i="string"==typeof i?document.getElementById(i):i,this._ctx=i.getContext("2d"),this._width=i.width,this._height=i.height,this._max=1,void this.clear()):new t(i)}t.prototype={defaultRadius:25,defaultGradient:{.4:"blue",.6:"cyan",.7:"lime",.8:"yellow",1:"red"},data:function(t,i){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=i||15;var a=this._circle=document.createElement("canvas"),s=a.getContext("2d"),e=this._r=t+i;return a.width=a.height=2*e,s.shadowOffsetX=s.shadowOffsetY=200,s.shadowBlur=i,s.shadowColor="black",s.beginPath(),s.arc(e-200,e-200,t,0,2*Math.PI,!0),s.closePath(),s.fill(),this},gradient:function(t){var i=document.createElement("canvas"),a=i.getContext("2d"),s=a.createLinearGradient(0,0,0,256);i.width=1,i.height=256;for(var e in 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;e>s;s++)a=this._data[s],i.globalAlpha=Math.max(a[2]/this._max,t||.05),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=3,e=t.length;e>s;s+=4)a=4*t[s],a&&(t[s-3]=i[a],t[s-2]=i[a+1],t[s-1]=i[a+2])}},window.simpleheat=t}(),/* - (c) 2014, Vladimir Agafonkin - Leaflet.heat, a tiny and fast heatmap plugin for Leaflet. - https://github.com/Leaflet/Leaflet.heat -*/ -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()},redraw:function(){return!this._heat||this._frame||this._map._animating||(this._frame=L.Util.requestAnimFrame(this._redraw,this)),this},onAdd:function(t){this._map=t,this._canvas||this._initCanvas(),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){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(){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([_,_])),c=void 0===this.options.max?1:this.options.max,u=void 0===this.options.maxZoom?this._map.getMaxZoom():this.options.maxZoom,f=1/Math.pow(2,Math.max(0,Math.min(u-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;i>t;t++)if(a=this._map.latLngToContainerPoint(this._latlngs[t]),m.contains(a)){e=Math.floor((a.x-w)/g)+2,n=Math.floor((a.y-y)/g)+2;var x=void 0!==this._latlngs[t].alt?this._latlngs[t].alt:void 0!==this._latlngs[t][2]?+this._latlngs[t][2]:1;r=x*f,p[n]=p[n]||[],s=p[n][e],s?(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;i>t;t++)if(p[t])for(h=0,o=p[t].length;o>h;h++)s=p[t][h],s&&d.push([Math.round(s[0]),Math.round(s[1]),Math.min(s[2],c)]);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)}; \ No newline at end of file +"use strict";function simpleheat(t){if(!(this instanceof simpleheat))return new simpleheat(t);this._canvas=t="string"==typeof t?document.getElementById(t):t,this._ctx=t.getContext("2d"),this._width=t.width,this._height=t.height,this._max=1,this._data=[]}"undefined"!=typeof module&&(module.exports=simpleheat),simpleheat.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._ctx.clearRect(0,0,this._width,this._height),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,a=this._createCanvas(),s=a.getContext("2d"),e=s.createLinearGradient(0,0,0,256);for(i in a.width=1,a.height=256,t)e.addColorStop(+i,t[i]);return s.fillStyle=e,s.fillRect(0,0,1,256),this._grad=s.getImageData(0,0,1,256).data,this},draw:function(t,i){this._circle||this.radius(this.defaultRadius),this._grad||this.gradient(this.defaultGradient);var a=this._ctx;a.clearRect(0,0,this._width,this._height);for(var s,e=0,h=this._data.length;e<h;e++)s=this._data[e],a.globalAlpha=Math.min(Math.max(s[2]/this._max,void 0===t?.05:t),1),a.drawImage(this._circle,s[0]-this._r,s[1]-this._r);var n=a.getImageData(0,0,this._width,this._height);return this._colorize(n.data,this._grad,i),a.putImageData(n,0,0),this},_colorize:function(t,i,a){for(var s,e=0,h=t.length;e<h;e+=4)(s=4*t[e+3])&&(t[e]=i[s],t[e+1]=i[1+s],t[e+2]=i[2+s],a&&(t[e+3]=t[e+3]*a))},_createCanvas:function(){return"undefined"!=typeof document?document.createElement("canvas"):new this._canvas.constructor}},L.HeatLayer=(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()},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():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():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"]),i=(t.style[i]="50% 50%",this._map.getSize()),i=(t.width=i.x,t.height=i.y,this._map.options.zoomAnimation&&L.Browser.any3d);L.DomUtil.addClass(t,"leaflet-zoom-"+(i?"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]),t=(L.DomUtil.setPosition(this._canvas,t),this._map.getSize());this._heat._width!==t.x&&(this._canvas.width=this._heat._width=t.x),this._heat._height!==t.y&&(this._canvas.height=this._heat._height=t.y),this._redraw()},_redraw:function(){if(this._map){var t=void 0===this.options.maxZoom?this._map.getMaxZoom():this.options.maxZoom,i=void 0===this.options.minZoom?this._map.getMinZoom():this.options.minZoom,a=this._map.getZoom();if(t<a||a<i)this._heat.clear();else{for(var s,e,h,n=[],t=this._heat._r,a=this._map.getSize(),o=new L.Bounds(L.point([-t,-t]),a.add([t,t])),r=void 0===this.options.max?1:this.options.max,i=void 0===this.options.maxIntensityZoom?this._map.getMaxZoom():this.options.maxIntensityZoom,_=1/Math.pow(2,Math.max(0,Math.min(i-this._map.getZoom(),12))),m=t/2,d=[],a=this._map._getMapPanePos(),l=a.x%m,c=a.y%m,p=0,u=this._latlngs.length;p<u;p++){var f,g,v,w=this._map.latLngToContainerPoint(this._latlngs[p]);o.contains(w)&&(f=Math.floor((w.x-l)/m)+2,g=Math.floor((w.y-c)/m)+2,v=(void 0!==this._latlngs[p].alt?this._latlngs[p].alt:void 0!==this._latlngs[p][2]?+this._latlngs[p][2]:1)*_,d[g]=d[g]||[],(s=d[g][f])?(s[0]=(s[0]*s[2]+w.x*v)/(s[2]+v),s[1]=(s[1]*s[2]+w.y*v)/(s[2]+v),s[2]+=v):d[g][f]=[w.x,w.y,v])}for(p=0,u=d.length;p<u;p++)if(d[p])for(e=0,h=d[p].length;e<h;e++)(s=d[p][e])&&n.push([Math.round(s[0]),Math.round(s[1]),Math.min(s[2],r)]);this._heat.data(n).draw(this.options.minOpacity,this.options.alpha),this._frame=null}}},_animateZoom:function(t){var i=this._map.getZoomScale(t.zoom),t=this._map._getCenterOffset(t.center)._multiplyBy(-i).subtract(this._map._getMapPanePos());L.DomUtil.setTransform?L.DomUtil.setTransform(this._canvas,t,i):this._canvas.style[L.DomUtil.TRANSFORM]=L.DomUtil.getTranslateString(t)+" scale("+i+")"}}),L.heatLayer=function(t,i){return new L.HeatLayer(t,i)}; \ No newline at end of file diff --git a/package.json b/package.json index 372d687..b8d5ab6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "leaflet.heat", - "version": "0.2.0", + "version": "0.4.1", "description": "A tiny and fast Leaflet heatmap plugin.", "homepage": "https://github.com/Leaflet/Leaflet.heat", "keywords": [ @@ -20,7 +20,7 @@ "devDependencies": { "eslint": "^1.7.3", "eslint-config-mourner": "^1.0.1", - "simpleheat": "~0.2.0", + "simpleheat": ">=0.4.1", "uglify-js": "^2.5.0" }, "eslintConfig": { diff --git a/src/HeatLayer.js b/src/HeatLayer.js index 9c020da..52286dc 100644 --- a/src/HeatLayer.js +++ b/src/HeatLayer.js @@ -4,10 +4,13 @@ L.HeatLayer = (L.Layer ? L.Layer : L.Class).extend({ // options: { // minOpacity: 0.05, - // maxZoom: 18, + // maxIntensityZoom: 18, + // maxZoom: 32, + // minZoom: 8, // radius: 25, // blur: 15, - // max: 1.0 + // max: 1.0, + // alpha: 0.5 // }, initialize: function (latlngs, options) { @@ -49,7 +52,7 @@ L.HeatLayer = (L.Layer ? L.Layer : L.Class).extend({ if (this.options.pane) { this.getPane().appendChild(this._canvas); - }else{ + } else { map._panes.overlayPane.appendChild(this._canvas); } @@ -65,7 +68,7 @@ L.HeatLayer = (L.Layer ? L.Layer : L.Class).extend({ onRemove: function (map) { if (this.options.pane) { this.getPane().removeChild(this._canvas); - }else{ + } else { map.getPanes().overlayPane.removeChild(this._canvas); } @@ -129,6 +132,13 @@ L.HeatLayer = (L.Layer ? L.Layer : L.Class).extend({ if (!this._map) { return; } + var maxZoom = this.options.maxZoom === undefined ? this._map.getMaxZoom() : this.options.maxZoom; + var minZoom = this.options.minZoom === undefined ? this._map.getMinZoom() : this.options.minZoom; + var currentZoom = this._map.getZoom(); + if (currentZoom > maxZoom || currentZoom < minZoom) { + this._heat.clear(); + return; + } var data = [], r = this._heat._r, size = this._map.getSize(), @@ -137,8 +147,8 @@ L.HeatLayer = (L.Layer ? L.Layer : L.Class).extend({ size.add([r, r])), max = this.options.max === undefined ? 1 : this.options.max, - maxZoom = this.options.maxZoom === undefined ? this._map.getMaxZoom() : this.options.maxZoom, - v = 1 / Math.pow(2, Math.max(0, Math.min(maxZoom - this._map.getZoom(), 12))), + maxIntensityZoom = this.options.maxIntensityZoom === undefined ? this._map.getMaxZoom() : this.options.maxIntensityZoom, + v = 1 / Math.pow(2, Math.max(0, Math.min(maxIntensityZoom - this._map.getZoom(), 12))), cellSize = r / 2, grid = [], panePos = this._map._getMapPanePos(), @@ -189,7 +199,7 @@ L.HeatLayer = (L.Layer ? L.Layer : L.Class).extend({ // console.timeEnd('process'); // console.time('draw ' + data.length); - this._heat.data(data).draw(this.options.minOpacity); + this._heat.data(data).draw(this.options.minOpacity, this.options.alpha); // console.timeEnd('draw ' + data.length); this._frame = null;