leaflet-virtual-grid - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0

package.json

 {
   "name": "leaflet-virtual-grid",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "A lightweight DOM-less tile layer for Leaflet that can be used to query APIs with bounding boxes or center/radius as opposed to loading tiles.",
@@ -48,4 +48,4 @@ "main": "dist/virtual-grid.js",
   "dependencies": {
-    "leaflet": "^0.7.3"
+    "leaflet": "^1.0.0-beta.2"
   }
 }

src/virtual-grid.js

 import L from 'leaflet';
 
-var VirtualGrid = L.Class.extend({
-  includes: L.Mixin.Events,
+var VirtualGrid = L.Layer.extend({
 
@@ -13,2 +12,3 @@ options: {
     options = L.setOptions(this, options);
+    this._zooming = false;
   },
@@ -18,6 +18,3 @@
     this._map = map;
-    this._update = L.Util.limitExecByInterval(this._update, this.options.updateInterval, this);
-
-    this._map.addEventListener(this.getEvents(), this);
-
+    this._update = L.Util.throttle(this._update, this.options.updateInterval, this);
     this._reset();
@@ -34,5 +31,5 @@ this._update();
     var events = {
-      viewreset: this._reset,
       moveend: this._update,
-      zoomend: this._onZoom
+      zoomstart: this._zoomstart,
+      zoomend: this._reset
     };
@@ -53,10 +50,4 @@
 
-  _onZoom: function () {
-    var zoom = this._map.getZoom();
-
-    if (zoom > this.options.maxZoom || zoom < this.options.minZoom) {
-      this._removeCells();
-    } else if (!this._map.hasLayer(this)) {
-      this._update();
-    }
+  _zoomstart: function () {
+    this._zooming = true;
   },
@@ -71,4 +62,6 @@
     this._cellsTotal = 0;
+    this._cellNumBounds = this._getCellNumBounds();
 
     this._resetWrap();
+    this._zooming = false;
   },
@@ -80,5 +73,3 @@
 
-    if (crs.infinite) {
-      return;
-    }
+    if (crs.infinite) { return; }
 
@@ -114,3 +105,2 @@ var cellSize = this._getCellSize();
     var cellSize = this._getCellSize();
-    var cellPadding = [cellSize / 2, cellSize / 2];
 
@@ -122,10 +112,6 @@ if (zoom > this.options.maxZoom || zoom < this.options.minZoom) {
     // cell coordinates range for the current view
-    var topLeft = bounds.min.subtract(cellPadding).divideBy(cellSize).floor();
+    var cellBounds = L.bounds(
+      bounds.min.divideBy(cellSize).floor(),
+      bounds.max.divideBy(cellSize).floor());
 
-    topLeft.x = Math.max(topLeft.x, 0);
-    topLeft.y = Math.max(topLeft.y, 0);
-
-    var cellBounds = L.bounds(topLeft, bounds.max.add(cellPadding).divideBy(cellSize).floor());
-
-    // remove any present cells that are off the specified bounds
     this._removeOtherCells(cellBounds);
@@ -141,18 +127,19 @@ this._addCells(cellBounds);
     var zoom = this._map.getZoom();
+
     var j, i, coords;
-
     // create a queue of coordinates to load cells from
     for (j = bounds.min.y; j <= bounds.max.y; j++) {
       for (i = bounds.min.x; i <= bounds.max.x; i++) {
-        coords = new L.Point(i, j);
+        coords = L.point(i, j);
         coords.z = zoom;
 
-        queue.push(coords);
+        if (this._isValidCell(coords)) {
+          queue.push(coords);
+        }
       }
     }
+
     var cellsToLoad = queue.length;
 
-    if (cellsToLoad === 0) {
-      return;
-    }
+    if (cellsToLoad === 0) { return; }
 
@@ -172,2 +159,25 @@ this._cellsToLoad += cellsToLoad;
 
+  _isValidCell: function (coords) {
+    var crs = this._map.options.crs;
+
+    if (!crs.infinite) {
+      // don't load cell if it's out of bounds and not wrapped
+      var bounds = this._cellNumBounds;
+      if (
+        (!crs.wrapLng && (coords.x < bounds.min.x || coords.x > bounds.max.x)) ||
+        (!crs.wrapLat && (coords.y < bounds.min.y || coords.y > bounds.max.y))
+      ) {
+        return false;
+      }
+    }
+
+    if (!this.options.bounds) {
+      return true;
+    }
+
+    // don't load cell if it doesn't intersect the bounds in options
+    var cellBounds = this._cellCoordsToBounds(coords);
+    return L.latLngBounds(this.options.bounds).intersects(cellBounds);
+  },
+
   // converts cell coordinates to its geographical bounds
@@ -177,10 +187,8 @@ _cellCoordsToBounds: function (coords) {
     var cellSize = this.options.cellSize;
-
     var nwPoint = coords.multiplyBy(cellSize);
     var sePoint = nwPoint.add([cellSize, cellSize]);
+    var nw = map.wrapLatLng(map.unproject(nwPoint, coords.z));
+    var se = map.wrapLatLng(map.unproject(sePoint, coords.z));
 
-    var nw = map.unproject(nwPoint, coords.z).wrap();
-    var se = map.unproject(sePoint, coords.z).wrap();
-
-    return new L.LatLngBounds(nw, se);
+    return L.latLngBounds(nw, se);
   },
@@ -199,3 +207,3 @@
 
-    return new L.Point(x, y);
+    return L.point(x, y);
   },
@@ -293,2 +301,12 @@
     coords.y = this._wrapLat ? L.Util.wrapNum(coords.y, this._wrapLat) : coords.y;
+  },
+
+  // get the global cell coordinates range for the current zoom
+  _getCellNumBounds: function () {
+    var bounds = this._map.getPixelWorldBounds();
+    var size = this._getCellSize();
+
+    return bounds ? L.bounds(
+        bounds.min.divideBy(size).floor(),
+        bounds.max.divideBy(size).ceil().subtract([1, 1])) : null;
   }
@@ -295,0 +313,0 @@ });

test/virtual-grid.js

@@ -49,3 +49,3 @@ import VirtualGrid from '../src/virtual-grid.js';
 test('should create cells when the map zooms in', function (t) {
-  t.plan(8);
+  t.plan(5);
 
@@ -59,10 +59,8 @@ var map = createMap().setView([0, 0], 1);
     t.ok(grid.cellLeave.getCall(0).args[1].equals(L.point([0, 0, 1])));
-    t.ok(grid.cellLeave.getCall(1).args[1].equals(L.point([1, 0, 1])));
-    t.ok(grid.cellLeave.getCall(2).args[1].equals(L.point([0, 1, 1])));
-    t.ok(grid.cellLeave.getCall(3).args[1].equals(L.point([1, 1, 1])));
-    t.ok(grid.createCell.getCall(4).args[1].equals(L.point([0, 0, 2])));
-    t.ok(grid.createCell.getCall(5).args[1].equals(L.point([1, 0, 2])));
-    t.ok(grid.createCell.getCall(6).args[1].equals(L.point([0, 1, 2])));
-    t.ok(grid.createCell.getCall(7).args[1].equals(L.point([1, 1, 2])));
 
+    t.ok(grid.createCell.getCall(1).args[1].equals(L.point([0, 0, 2])));
+    t.ok(grid.createCell.getCall(2).args[1].equals(L.point([1, 0, 2])));
+    t.ok(grid.createCell.getCall(3).args[1].equals(L.point([0, 1, 2])));
+    t.ok(grid.createCell.getCall(4).args[1].equals(L.point([1, 1, 2])));
+
     map.remove();
@@ -75,3 +73,3 @@ });
 test('should create cells when the map is panned', function (t) {
-  t. plan(2);
+  t.plan(2);
 
@@ -89,3 +87,3 @@ var map = createMap().setView([0, 0], 4);
 
-  map.panBy([256, 256], {
+  map.panBy([512, 512], {
     animate: false,
@@ -92,0 +90,0 @@ duration: 0

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108370

increased by0.34%

Lines of code

303

increased by5.21%

Number of low quality alerts

0

decreased by-100%

Dependency changes

• + Addedleaflet@1.9.4(transitive)

• - Removedleaflet@0.7.7(transitive)

• Updatedleaflet@^1.0.0-beta.2