leaflet-markers-canvas - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

dist/leaflet-markers-canvas.js

@@ -195,3 +195,3 @@ (function (global, factory) {
         "canvas",
-        "leaflet-canvas-icon-layer leaflet-layer"
+        "leaflet-markers-canvas-layer leaflet-layer"
       );
@@ -198,0 +198,0 @@ this._canvas.width = x;

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(r,e){"use strict";r=r&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r;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 r.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=[],n=[];e.forEach(function(e){var t=s._addMarker(e),i=t.markerBox,e=t.positionBox,t=t.isVisible;i&&t&&a.push(i),e&&n.push(e)}),this._markersTree.load(a),this._positionsTree.load(n)},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){r.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 r.Util.setOptions(this,e),this.redraw()},_initCanvas:function(){var e=this._map.getSize(),t=e.x,i=e.y,e=this._map.options.zoomAnimation&&r.Browser.any3d;this._canvas=r.DomUtil.create("canvas","leaflet-canvas-icon-layer leaflet-layer"),this._canvas.width=t,this._canvas.height=i,this._context=this._canvas.getContext("2d"),r.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,r.Util.stamp(e);var t=e.getLatLng(),i=this._map.getBounds().contains(t),s=this._map.latLngToContainerPoint(t),a=s.x,n=s.y,o=e.options.icon.options,s=o.iconSize,o=o.iconAnchor,o={minX:a-o[0],minY:n-o[1],maxX:a+s[0]-o[0],maxY:n+s[1]-o[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:n}),this._markers.push(e),{markerBox:o,positionBox:t,isVisible:i}},_drawMarker:function(e,t){var s=this,i=t.x,a=t.y,n=e.options.icon.options.iconUrl;e.image?this._drawImage(e,{x:i,y:a}):this._icons[n]?(e.image=this._icons[n].image,this._icons[n].isLoaded?this._drawImage(e,{x:i,y:a}):this._icons[n].elements.push({marker:e,x:i,y:a})):((t=new Image).src=n,e.image=t,this._icons[n]={image:t,isLoaded:!1,elements:[{marker:e,x:i,y:a}]},t.onload=function(){s._icons[n].isLoaded=!0,s._icons[n].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,n=a.rotationAngle,t=a.iconAnchor,a=a.iconSize,n=n||0;this._context.save(),this._context.translate(i,s),this._context.rotate(n*Math.PI/180),this._context.drawImage(e.image,-t[0],-t[1],a[0],a[1]),this._context.restore()},_redraw:function(e){var n,o=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()},n=[],this._positionsTree.search(e).forEach(function(e){var t=e.marker,i=t.getLatLng(),s=o._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};n.push(i),o._drawMarker(t,{x:a,y:e})}),this._markersTree.clear(),this._markersTree.load(n))},_reset:function(){var e=this._map.containerPointToLayerPoint([0,0]);r.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;r.DomUtil.setTransform(this._canvas,e,t)}};r.MarkersCanvas=r.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)},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.0",
+  "version": "0.2.1",
   "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

@@ -19,4 +19,4 @@ # leaflet-markers-canvas
 
-- Install from npm (`npm i leaflet-markers-canvas`)
-- or download [leaflet-markers-canvas.js](https://github.com/francoisromain/leaflet-markers-canvas/blob/master/dist/leaflet-markers-canvas.js) from the dist folder.
+- Install from npm: `npm i leaflet-markers-canvas`
+- or download [leaflet-markers-canvas.js](https://github.com/francoisromain/leaflet-markers-canvas/blob/master/dist/leaflet-markers-canvas.js)
 
@@ -28,8 +28,7 @@ ### Exemple
 var tiles = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
-  attribution:
-    '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>',
   preferCanvas: true,
 }).addTo(map);
 
-var markersCanvas = new L.markersCanvas();
+var markersCanvas = new L.MarkersCanvas();
 markersCanvas.addTo(map);
@@ -43,11 +42,2 @@
 
-var methods = {
-  mouseover(e) {
-    this.openPopup();
-  },
-  mouseout(e) {
-    this.closePopup();
-  },
-};
-
 var markers = [];
@@ -58,6 +48,13 @@
     [58.5578 + Math.random() * 1.8, 29.0087 + Math.random() * 3.6],
-    { icon: icon }
+    { icon }
   )
     .bindPopup("I Am " + i)
-    .on(methods);
+    .on({
+      mouseover(e) {
+        this.openPopup();
+      },
+      mouseout(e) {
+        this.closePopup();
+      },
+    });
 
@@ -86,4 +83,4 @@ markers.push(marker);
 
-### To-do
+## To-do
 
 - Complete documentation

src/leaflet-markers-canvas.js

@@ -179,3 +179,3 @@ import L from "leaflet";
       "canvas",
-      "leaflet-canvas-icon-layer leaflet-layer"
+      "leaflet-markers-canvas-layer leaflet-layer"
     );
@@ -182,0 +182,0 @@ this._canvas.width = x;

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

Worsened metrics

Total package byte prevSize

66049

decreased by-0.16%

Number of lines in readme file

82

decreased by-3.53%

No dependency changes