leaflet-canvas-marker
Version:
Leaflet plugin to display markers on canvas instead of DOM
1 lines • 6.13 kB
JavaScript
!function(t){var a={};function n(e){if(a[e])return a[e].exports;var i=a[e]={i:e,l:!1,exports:{}};return t[e].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=a,n.d=function(t,a,e){n.o(t,a)||Object.defineProperty(t,a,{enumerable:!0,get:e})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,a){if(1&a&&(t=n(t)),8&a)return t;if(4&a&&"object"==typeof t&&t&&t.__esModule)return t;var e=Object.create(null);if(n.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:t}),2&a&&"string"!=typeof t)for(var i in t)n.d(e,i,function(a){return t[a]}.bind(null,i));return e},n.n=function(t){var a=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(a,"a",a),a},n.o=function(t,a){return Object.prototype.hasOwnProperty.call(t,a)},n.p="",n(n.s=4)}([,,,function(t,a,n){"use strict";t.exports=function(t){var a=(t.Layer?t.Layer:t.Class).extend({initialize:function(a){t.setOptions(this,a),this._onClickListeners=[],this._onHoverListeners=[]},setOptions:function(a){return t.setOptions(this,a),this.redraw()},redraw:function(){this._redraw(!0)},addMarkers:function(t){var a=this,n=[],e=[];t.forEach(function(t){if("markerPane"==t.options.pane&&t.options.icon){var i=t.getLatLng(),r=a._map.getBounds().contains(i),o=a._addMarker(t,i,r);!0===r&&n.push(o[0]),e.push(o[1])}else console.error("Layer isn't a marker")}),a._markers.load(n),a._latlngMarkers.load(e)},addMarker:function(t){var a=t.getLatLng(),n=this._map.getBounds().contains(a),e=this._addMarker(t,a,n);!0===n&&this._markers.insert(e[0]),this._latlngMarkers.insert(e[1])},addLayer:function(t){"markerPane"==t.options.pane&&t.options.icon?this.addMarker(t):console.error("Layer isn't a marker")},addLayers:function(t){this.addMarkers(t)},removeLayer:function(t){this.removeMarker(t,!0)},removeMarker:function(t,a){t.minX&&(t=t.data);var n=t.getLatLng(),e=this._map.getBounds().contains(n),i={minX:n.lng,minY:n.lat,maxX:n.lng,maxY:n.lat,data:t};this._latlngMarkers.remove(i,function(t,a){return t.data._leaflet_id===a.data._leaflet_id}),this._latlngMarkers.total--,this._latlngMarkers.dirty++,!0===e&&!0===a&&this._redraw(!0)},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.on("resize",this._reset,this),t.on("click",this._executeListeners,this),t.on("mousemove",this._executeListeners,this)},onRemove:function(t){this.options.pane?this.getPane().removeChild(this._canvas):t.getPanes().overlayPane.removeChild(this._canvas)},addTo:function(t){return t.addLayer(this),this},_addMarker:function(a,n,e){a._map=this._map,this._markers||(this._markers=new rbush),this._latlngMarkers||(this._latlngMarkers=new rbush,this._latlngMarkers.dirty=0,this._latlngMarkers.total=0),t.Util.stamp(a);var i=this._map.latLngToContainerPoint(n),r=a.options.icon.options.iconSize,o=r[0]/2,s=r[1]/2,c=[{minX:i.x-o,minY:i.y-s,maxX:i.x+o,maxY:i.y+s,data:a},{minX:n.lng,minY:n.lat,maxX:n.lng,maxY:n.lat,data:a}];return this._latlngMarkers.dirty++,this._latlngMarkers.total++,!0===e&&this._drawMarker(a,i),c},_drawMarker:function(t,a){var n=this;this._imageLookup||(this._imageLookup={}),a||(a=n._map.latLngToContainerPoint(t.getLatLng()));var e=t.options.icon.options.iconUrl;if(t.canvas_img)n._drawImage(t,a);else if(n._imageLookup[e])t.canvas_img=n._imageLookup[e][0],!1===n._imageLookup[e][1]?n._imageLookup[e][2].push([t,a]):n._drawImage(t,a);else{var i=new Image;i.src=e,t.canvas_img=i,n._imageLookup[e]=[i,!1,[[t,a]]],i.onload=function(){n._imageLookup[e][1]=!0,n._imageLookup[e][2].forEach(function(t){n._drawImage(t[0],t[1])})}}},_drawImage:function(t,a){var n=t.options.icon.options;this._context.drawImage(t.canvas_img,a.x-n.iconAnchor[0],a.y-n.iconAnchor[1],n.iconSize[0],n.iconSize[1])},_reset:function(){var a=this._map.containerPointToLayerPoint([0,0]);t.DomUtil.setPosition(this._canvas,a);var n=this._map.getSize();this._canvas.width=n.x,this._canvas.height=n.y,this._redraw()},_redraw:function(t){var a=this;if(this._map){t&&this._context.clearRect(0,0,this._canvas.width,this._canvas.height);var n=[];a._latlngMarkers.dirty/a._latlngMarkers.total>=.1&&(a._latlngMarkers.all().forEach(function(t){n.push(t)}),a._latlngMarkers.clear(),a._latlngMarkers.load(n),a._latlngMarkers.dirty=0,n=[]);var e=a._map.getBounds(),i={minX:e.getWest(),minY:e.getSouth(),maxX:e.getEast(),maxY:e.getNorth()};a._latlngMarkers.search(i).forEach(function(t){var e=a._map.latLngToContainerPoint(t.data.getLatLng()),i=t.data.options.icon.options.iconSize,r=i[0]/2,o=i[1]/2,s={minX:e.x-r,minY:e.y-o,maxX:e.x+r,maxY:e.y+o,data:t.data};n.push(s),a._drawMarker(t.data,e)}),this._markers.clear(),this._markers.load(n)}},_initCanvas:function(){this._canvas=t.DomUtil.create("canvas","leaflet-canvas-icon-layer leaflet-layer");var a=t.DomUtil.testProp(["transformOrigin","WebkitTransformOrigin","msTransformOrigin"]);this._canvas.style[a]="50% 50%";var n=this._map.getSize();this._canvas.width=n.x,this._canvas.height=n.y,this._context=this._canvas.getContext("2d");var e=this._map.options.zoomAnimation&&t.Browser.any3d;t.DomUtil.addClass(this._canvas,"leaflet-zoom-"+(e?"animated":"hide"))},addOnClickListener:function(t){this._onClickListeners.push(t)},addOnHoverListener:function(t){this._onHoverListeners.push(t)},_executeListeners:function(t){var a=this,n=t.containerPoint.x,e=t.containerPoint.y;a._openToolTip&&(a._openToolTip.closeTooltip(),delete a._openToolTip);var i=this._markers.search({minX:n,minY:e,maxX:n,maxY:e});i&&i.length>0?(a._map._container.style.cursor="pointer","click"===t.type&&(i[0].data.getPopup()&&i[0].data.openPopup(),a._onClickListeners.forEach(function(a){a(t,i)})),"mousemove"===t.type&&(i[0].data.getTooltip()&&(a._openToolTip=i[0].data,i[0].data.openTooltip()),a._onHoverListeners.forEach(function(a){a(t,i)}))):a._map._container.style.cursor=""}});t.canvasIconLayer=function(t){return new a(t)}}},function(t,a,n){var e=n(3);window.L.CanvasIconLayer=e(L)}]);