leaflet-markers-canvas - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

dist/leaflet-markers-canvas.js

@@ -134,2 +134,34 @@ (function (global, factory) {
 
+    // remove multiple markers (better for rBush performance)
+    removeMarkers: function removeMarkers(markers) {
+      var this$1 = this;
+
+      var hasChanged = false;
+
+      markers.forEach(function (marker) {
+        var latLng = marker.getLatLng();
+        var isVisible = this$1._map.getBounds().contains(latLng);
+
+        var positionBox = {
+          minX: latLng.lng,
+          minY: latLng.lat,
+          maxX: latLng.lng,
+          maxY: latLng.lat,
+          marker: marker,
+        };
+
+        this$1._positionsTree.remove(positionBox, function (a, b) {
+          return a.marker._leaflet_id === b.marker._leaflet_id;
+        });
+
+        if (isVisible) {
+          hasChanged = true;
+        }
+      });
+
+      if (hasChanged) {
+        this._redraw(true);
+      }
+    },
+
     // * * * * * * * * * * * * * * * * * * * * * * * * * * * *
@@ -136,0 +168,0 @@ //

dist/leaflet-markers-canvas.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("leaflet"),require("rbush")):"function"==typeof define&&define.amd?define(["leaflet","rbush"],t):t((e=e||self).L,e.RBush)}(this,function(o,e){"use strict";o=o&&Object.prototype.hasOwnProperty.call(o,"default")?o.default:o;var t={_map:null,_canvas:null,_context:null,_markers:[],_markersTree:new(e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e),_positionsTree:new e,_icons:{},addTo:function(e){return e.addLayer(this),this},getBounds:function(){var t=new o.LatLngBounds;return this._markers.forEach(function(e){t.extend(e.getLatLng())}),t},redraw:function(){this._redraw(!0)},clear:function(){this._positionsTree=new e,this._markersTree=new e,this._markers=[],this._redraw(!0)},addMarker:function(e){var t=this._addMarker(e),i=t.markerBox,e=t.positionBox,t=t.isVisible;i&&t&&this._markersTree.insert(i),e&&this._positionsTree.insert(e)},addMarkers:function(e){var s=this,a=[],r=[];e.forEach(function(e){var t=s._addMarker(e),i=t.markerBox,e=t.positionBox,t=t.isVisible;i&&t&&a.push(i),e&&r.push(e)}),this._markersTree.load(a),this._positionsTree.load(r)},removeMarker:function(e){var t=e.getLatLng(),i=this._map.getBounds().contains(t),e={minX:t.lng,minY:t.lat,maxX:t.lng,maxY:t.lat,marker:e};this._positionsTree.remove(e,function(e,t){return e.marker._leaflet_id===t.marker._leaflet_id}),i&&this._redraw(!0)},initialize:function(e){o.Util.setOptions(this,e)},onAdd:function(e){this._map=e,this._initCanvas(),this.getPane().appendChild(this._canvas),e.on("moveend",this._reset,this),e.on("resize",this._reset,this),e.on("click",this._fire,this),e.on("mousemove",this._fire,this),e._zoomAnimated&&e.on("zoomanim",this._animateZoom,this)},onRemove:function(e){this.getPane().removeChild(this._canvas),e.off("click",this._fire,this),e.off("mousemove",this._fire,this),e.off("moveend",this._reset,this),e.off("resize",this._reset,this),e._zoomAnimated&&e.off("zoomanim",this._animateZoom,this)},setOptions:function(e){return o.Util.setOptions(this,e),this.redraw()},_initCanvas:function(){var e=this._map.getSize(),t=e.x,i=e.y,e=this._map.options.zoomAnimation&&o.Browser.any3d;this._canvas=o.DomUtil.create("canvas","leaflet-markers-canvas-layer leaflet-layer"),this._canvas.width=t,this._canvas.height=i,this._context=this._canvas.getContext("2d"),o.DomUtil.addClass(this._canvas,"leaflet-zoom-"+(e?"animated":"hide"))},_addMarker:function(e){if("markerPane"!==e.options.pane||!e.options.icon)return console.error("This is not a marker",e),{markerBox:null,positionBox:null,isVisible:null};e._map=this._map,o.Util.stamp(e);var t=e.getLatLng(),i=this._map.getBounds().contains(t),s=this._map.latLngToContainerPoint(t),a=s.x,r=s.y,n=e.options.icon.options,s=n.iconSize,n=n.iconAnchor,n={minX:a-n[0],minY:r-n[1],maxX:a+s[0]-n[0],maxY:r+s[1]-n[1],marker:e},t={minX:t.lng,minY:t.lat,maxX:t.lng,maxY:t.lat,marker:e};return i&&this._drawMarker(e,{x:a,y:r}),this._markers.push(e),{markerBox:n,positionBox:t,isVisible:i}},_drawMarker:function(e,t){var s=this,i=t.x,a=t.y,r=e.options.icon.options.iconUrl;e.image?this._drawImage(e,{x:i,y:a}):this._icons[r]?(e.image=this._icons[r].image,this._icons[r].isLoaded?this._drawImage(e,{x:i,y:a}):this._icons[r].elements.push({marker:e,x:i,y:a})):((t=new Image).src=r,e.image=t,this._icons[r]={image:t,isLoaded:!1,elements:[{marker:e,x:i,y:a}]},t.onload=function(){s._icons[r].isLoaded=!0,s._icons[r].elements.forEach(function(e){var t=e.marker,i=e.x,e=e.y;s._drawImage(t,{x:i,y:e})})})},_drawImage:function(e,t){var i=t.x,s=t.y,a=e.options.icon.options,r=a.rotationAngle,t=a.iconAnchor,a=a.iconSize,r=r||0;this._context.save(),this._context.translate(i,s),this._context.rotate(r*Math.PI/180),this._context.drawImage(e.image,-t[0],-t[1],a[0],a[1]),this._context.restore()},_redraw:function(e){var r,n=this;e&&this._context.clearRect(0,0,this._canvas.width,this._canvas.height),this._map&&this._positionsTree&&(e={minX:(e=this._map.getBounds()).getWest(),minY:e.getSouth(),maxX:e.getEast(),maxY:e.getNorth()},r=[],this._positionsTree.search(e).forEach(function(e){var t=e.marker,i=t.getLatLng(),s=n._map.latLngToContainerPoint(i),a=s.x,e=s.y,i=t.options.icon.options,s=i.iconSize,i=i.iconAnchor,i={minX:a-i[0],minY:e-i[1],maxX:a+s[0]-i[0],maxY:e+s[1]-i[1],marker:t};r.push(i),n._drawMarker(t,{x:a,y:e})}),this._markersTree.clear(),this._markersTree.load(r))},_reset:function(){var e=this._map.containerPointToLayerPoint([0,0]);o.DomUtil.setPosition(this._canvas,e);var t=this._map.getSize(),e=t.x,t=t.y;this._canvas.width=e,this._canvas.height=t,this._redraw()},_fire:function(e){var t,i;this._markersTree&&(t=(i=e.containerPoint).x,i=i.y,(i=this._markersTree.search({minX:t,minY:i,maxX:t,maxY:i}))&&i.length?(this._map._container.style.cursor="pointer",i=i[0].marker,"click"===e.type&&i.listens("click")&&i.fire("click"),"mousemove"===e.type&&(this._mouseOverMarker&&this._mouseOverMarker!==i&&this._mouseOverMarker.listens("mouseout")&&this._mouseOverMarker.fire("mouseout"),this._mouseOverMarker&&this._mouseOverMarker===i||(this._mouseOverMarker=i).listens("mouseover")&&i.fire("mouseover"))):(this._map._container.style.cursor="","mousemove"===e.type&&this._mouseOverMarker&&(this._mouseOverMarker.listens("mouseout")&&this._mouseOverMarker.fire("mouseout"),delete this._mouseOverMarker)))},_animateZoom:function(e){var t=this._map.getZoomScale(e.zoom),e=this._map._latLngBoundsToNewLayerBounds(this._map.getBounds(),e.zoom,e.center).min;o.DomUtil.setTransform(this._canvas,e,t)}};o.MarkersCanvas=o.Layer.extend(t)});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("leaflet"),require("rbush")):"function"==typeof define&&define.amd?define(["leaflet","rbush"],t):t((e=e||self).L,e.RBush)}(this,function(o,e){"use strict";o=o&&Object.prototype.hasOwnProperty.call(o,"default")?o.default:o;var t={_map:null,_canvas:null,_context:null,_markers:[],_markersTree:new(e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e),_positionsTree:new e,_icons:{},addTo:function(e){return e.addLayer(this),this},getBounds:function(){var t=new o.LatLngBounds;return this._markers.forEach(function(e){t.extend(e.getLatLng())}),t},redraw:function(){this._redraw(!0)},clear:function(){this._positionsTree=new e,this._markersTree=new e,this._markers=[],this._redraw(!0)},addMarker:function(e){var t=this._addMarker(e),i=t.markerBox,e=t.positionBox,t=t.isVisible;i&&t&&this._markersTree.insert(i),e&&this._positionsTree.insert(e)},addMarkers:function(e){var s=this,a=[],r=[];e.forEach(function(e){var t=s._addMarker(e),i=t.markerBox,e=t.positionBox,t=t.isVisible;i&&t&&a.push(i),e&&r.push(e)}),this._markersTree.load(a),this._positionsTree.load(r)},removeMarker:function(e){var t=e.getLatLng(),i=this._map.getBounds().contains(t),e={minX:t.lng,minY:t.lat,maxX:t.lng,maxY:t.lat,marker:e};this._positionsTree.remove(e,function(e,t){return e.marker._leaflet_id===t.marker._leaflet_id}),i&&this._redraw(!0)},removeMarkers:function(e){var s=this,a=!1;e.forEach(function(e){var t=e.getLatLng(),i=s._map.getBounds().contains(t),e={minX:t.lng,minY:t.lat,maxX:t.lng,maxY:t.lat,marker:e};s._positionsTree.remove(e,function(e,t){return e.marker._leaflet_id===t.marker._leaflet_id}),i&&(a=!0)}),a&&this._redraw(!0)},initialize:function(e){o.Util.setOptions(this,e)},onAdd:function(e){this._map=e,this._initCanvas(),this.getPane().appendChild(this._canvas),e.on("moveend",this._reset,this),e.on("resize",this._reset,this),e.on("click",this._fire,this),e.on("mousemove",this._fire,this),e._zoomAnimated&&e.on("zoomanim",this._animateZoom,this)},onRemove:function(e){this.getPane().removeChild(this._canvas),e.off("click",this._fire,this),e.off("mousemove",this._fire,this),e.off("moveend",this._reset,this),e.off("resize",this._reset,this),e._zoomAnimated&&e.off("zoomanim",this._animateZoom,this)},setOptions:function(e){return o.Util.setOptions(this,e),this.redraw()},_initCanvas:function(){var e=this._map.getSize(),t=e.x,i=e.y,e=this._map.options.zoomAnimation&&o.Browser.any3d;this._canvas=o.DomUtil.create("canvas","leaflet-markers-canvas-layer leaflet-layer"),this._canvas.width=t,this._canvas.height=i,this._context=this._canvas.getContext("2d"),o.DomUtil.addClass(this._canvas,"leaflet-zoom-"+(e?"animated":"hide"))},_addMarker:function(e){if("markerPane"!==e.options.pane||!e.options.icon)return console.error("This is not a marker",e),{markerBox:null,positionBox:null,isVisible:null};e._map=this._map,o.Util.stamp(e);var t=e.getLatLng(),i=this._map.getBounds().contains(t),s=this._map.latLngToContainerPoint(t),a=s.x,r=s.y,n=e.options.icon.options,s=n.iconSize,n=n.iconAnchor,n={minX:a-n[0],minY:r-n[1],maxX:a+s[0]-n[0],maxY:r+s[1]-n[1],marker:e},t={minX:t.lng,minY:t.lat,maxX:t.lng,maxY:t.lat,marker:e};return i&&this._drawMarker(e,{x:a,y:r}),this._markers.push(e),{markerBox:n,positionBox:t,isVisible:i}},_drawMarker:function(e,t){var s=this,i=t.x,a=t.y,r=e.options.icon.options.iconUrl;e.image?this._drawImage(e,{x:i,y:a}):this._icons[r]?(e.image=this._icons[r].image,this._icons[r].isLoaded?this._drawImage(e,{x:i,y:a}):this._icons[r].elements.push({marker:e,x:i,y:a})):((t=new Image).src=r,e.image=t,this._icons[r]={image:t,isLoaded:!1,elements:[{marker:e,x:i,y:a}]},t.onload=function(){s._icons[r].isLoaded=!0,s._icons[r].elements.forEach(function(e){var t=e.marker,i=e.x,e=e.y;s._drawImage(t,{x:i,y:e})})})},_drawImage:function(e,t){var i=t.x,s=t.y,a=e.options.icon.options,r=a.rotationAngle,t=a.iconAnchor,a=a.iconSize,r=r||0;this._context.save(),this._context.translate(i,s),this._context.rotate(r*Math.PI/180),this._context.drawImage(e.image,-t[0],-t[1],a[0],a[1]),this._context.restore()},_redraw:function(e){var r,n=this;e&&this._context.clearRect(0,0,this._canvas.width,this._canvas.height),this._map&&this._positionsTree&&(e={minX:(e=this._map.getBounds()).getWest(),minY:e.getSouth(),maxX:e.getEast(),maxY:e.getNorth()},r=[],this._positionsTree.search(e).forEach(function(e){var t=e.marker,i=t.getLatLng(),s=n._map.latLngToContainerPoint(i),a=s.x,e=s.y,i=t.options.icon.options,s=i.iconSize,i=i.iconAnchor,i={minX:a-i[0],minY:e-i[1],maxX:a+s[0]-i[0],maxY:e+s[1]-i[1],marker:t};r.push(i),n._drawMarker(t,{x:a,y:e})}),this._markersTree.clear(),this._markersTree.load(r))},_reset:function(){var e=this._map.containerPointToLayerPoint([0,0]);o.DomUtil.setPosition(this._canvas,e);var t=this._map.getSize(),e=t.x,t=t.y;this._canvas.width=e,this._canvas.height=t,this._redraw()},_fire:function(e){var t,i;this._markersTree&&(t=(i=e.containerPoint).x,i=i.y,(i=this._markersTree.search({minX:t,minY:i,maxX:t,maxY:i}))&&i.length?(this._map._container.style.cursor="pointer",i=i[0].marker,"click"===e.type&&i.listens("click")&&i.fire("click"),"mousemove"===e.type&&(this._mouseOverMarker&&this._mouseOverMarker!==i&&this._mouseOverMarker.listens("mouseout")&&this._mouseOverMarker.fire("mouseout"),this._mouseOverMarker&&this._mouseOverMarker===i||(this._mouseOverMarker=i).listens("mouseover")&&i.fire("mouseover"))):(this._map._container.style.cursor="","mousemove"===e.type&&this._mouseOverMarker&&(this._mouseOverMarker.listens("mouseout")&&this._mouseOverMarker.fire("mouseout"),delete this._mouseOverMarker)))},_animateZoom:function(e){var t=this._map.getZoomScale(e.zoom),e=this._map._latLngBoundsToNewLayerBounds(this._map.getBounds(),e.zoom,e.center).min;o.DomUtil.setTransform(this._canvas,e,t)}};o.MarkersCanvas=o.Layer.extend(t)});

package.json

 {
   "name": "leaflet-markers-canvas",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A Leaflet plugin to render many markers in a canvas instead of the DOM",
@@ -5,0 +5,0 @@ "main": "dist/leaflet-markers-canvas.min.js",

readme.md

@@ -79,4 +79,6 @@ # leaflet-markers-canvas
 
+### `removeMarkers(markers)`
+
 ## To-do
 
 - Complete documentation

src/leaflet-markers-canvas.js

@@ -120,2 +120,32 @@ import L from "leaflet";
 
+  // remove multiple markers (better for rBush performance)
+  removeMarkers(markers) {
+    let hasChanged = false;
+
+    markers.forEach((marker) => {
+      const latLng = marker.getLatLng();
+      const isVisible = this._map.getBounds().contains(latLng);
+
+      const positionBox = {
+        minX: latLng.lng,
+        minY: latLng.lat,
+        maxX: latLng.lng,
+        maxY: latLng.lat,
+        marker,
+      };
+
+      this._positionsTree.remove(positionBox, (a, b) => {
+        return a.marker._leaflet_id === b.marker._leaflet_id;
+      });
+
+      if (isVisible) {
+        hasChanged = true;
+      }
+    });
+
+    if (hasChanged) {
+      this._redraw(true);
+    }
+  },
+
   // * * * * * * * * * * * * * * * * * * * * * * * * * * * *
@@ -122,0 +152,0 @@ //

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67839

increased by2.71%

Lines of code

777

increased by6.88%

Number of lines in readme file

84

increased by2.44%

No dependency changes