From 35ec4a21270dcacb5c2682b06c49c6ad475dd251 Mon Sep 17 00:00:00 2001
From: mattesCZ <osmmtb@gmail.com>
Date: Mon, 20 Jan 2020 16:51:47 +0100
Subject: [PATCH] Check destination bounds in isCurrent tiles on zoom
 transitions

---
 src/Leaflet.VectorGrid.Protobuf.js | 24 +++++++++++++++------
 src/Leaflet.VectorGrid.js          | 34 ++++++++++++++----------------
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/Leaflet.VectorGrid.Protobuf.js b/src/Leaflet.VectorGrid.Protobuf.js
index 4c34f7a..a6fb296 100644
--- a/src/Leaflet.VectorGrid.Protobuf.js
+++ b/src/Leaflet.VectorGrid.Protobuf.js
@@ -86,20 +86,21 @@ L.VectorGrid.Protobuf = L.VectorGrid.extend({
 
 	_getSubdomain: L.TileLayer.prototype._getSubdomain,
 
-	_isCurrentTile : function(coords, tileBounds) {
+	_isCurrentTile: function(coords) {
 
 		if (!this._map) {
 			return true;
 		}
 
 		var zoom = this._map._animatingZoom ? this._map._animateToZoom : this._map._zoom;
+		var center = this._map._animatingZoom ? this._map._animateToCenter : this._map.getCenter();
 		var currentZoom = zoom === coords.z;
+		var destinationBounds = this._getViewBounds(center, zoom);
 
 		var tileBounds = this._tileCoordsToBounds(coords);
-		var currentBounds = this._map.getBounds().overlaps(tileBounds); 
+		var currentBounds = destinationBounds.overlaps(tileBounds);
 
 		return currentZoom && currentBounds;
-
 	},
 
 	_getVectorTilePromise: function(coords, tileBounds) {
@@ -118,7 +119,7 @@ L.VectorGrid.Protobuf = L.VectorGrid.extend({
 			data['-y'] = invertedY;
 		}
 
-		if (!this._isCurrentTile(coords, tileBounds)) {
+		if (!this._isCurrentTile(coords)) {
 			return Promise.resolve({layers:[]});
 		}
 
@@ -128,7 +129,7 @@ L.VectorGrid.Protobuf = L.VectorGrid.extend({
 
 			if (!response.ok || !this._isCurrentTile(coords)) {
 				return {layers:[]};
-			} 
+			}
 
 			return response.blob().then( function (blob) {
 
@@ -162,7 +163,18 @@ L.VectorGrid.Protobuf = L.VectorGrid.extend({
 
 			return json;
 		});
-	}
+	},
+
+	_getViewBounds: function (center, zoom) {
+		var projectedCenter = this._map.project(center, zoom);
+		var size = this._map.getSize();
+		var swPoint = L.point(projectedCenter.x - size.x / 2, projectedCenter.y - size.y / 2);
+		var nePoint = L.point(projectedCenter.x + size.x / 2, projectedCenter.y + size.y / 2);
+		var sw = this._map.unproject(swPoint, zoom);
+		var ne = this._map.unproject(nePoint, zoom);
+
+		return L.latLngBounds(sw, ne);
+	},
 });
 
 
diff --git a/src/Leaflet.VectorGrid.js b/src/Leaflet.VectorGrid.js
index 6ad3b46..3126a98 100644
--- a/src/Leaflet.VectorGrid.js
+++ b/src/Leaflet.VectorGrid.js
@@ -67,9 +67,7 @@ L.VectorGrid = L.GridLayer.extend({
 		var tileSize = this.getTileSize();
 		var renderer = this.options.rendererFactory(coords, tileSize, this.options);
 
-		var tileBounds = this._tileCoordsToBounds(coords);	
-
-		var vectorTilePromise = this._getVectorTilePromise(coords, tileBounds);
+		var vectorTilePromise = this._getVectorTilePromise(coords);
 
 		if (storeFeatures) {
 			this._vectorTiles[this._tileCoordsToKey(coords)] = renderer;
@@ -83,16 +81,16 @@ L.VectorGrid = L.GridLayer.extend({
 				for (var layerName in vectorTile.layers) {
 					this._dataLayerNames[layerName] = true;
 					var layer = vectorTile.layers[layerName];
-	
+
 					var pxPerExtent = this.getTileSize().divideBy(layer.extent);
-	
+
 					var layerStyle = this.options.vectorTileLayerStyles[ layerName ] ||
 					L.Path.prototype.options;
-	
+
 					for (var i = 0; i < layer.features.length; i++) {
 						var feat = layer.features[i];
 						var id;
-	
+
 						if (this.options.filter instanceof Function &&
 							!this.options.filter(feat.properties, coords.z)) {
 							continue;
@@ -110,31 +108,31 @@ L.VectorGrid = L.GridLayer.extend({
 								}
 							}
 						}
-	
+
 						if (styleOptions instanceof Function) {
 							styleOptions = styleOptions(feat.properties, coords.z);
 						}
-	
+
 						if (!(styleOptions instanceof Array)) {
 							styleOptions = [styleOptions];
 						}
-	
+
 						if (!styleOptions.length) {
 							continue;
 						}
-	
+
 						var featureLayer = this._createLayer(feat, pxPerExtent);
-	
+
 						for (var j = 0; j < styleOptions.length; j++) {
 							var style = L.extend({}, L.Path.prototype.options, styleOptions[j]);
 							featureLayer.render(renderer, style);
 							renderer._addPath(featureLayer);
 						}
-	
+
 						if (this.options.interactive) {
 							featureLayer.makeInteractive();
 						}
-	
+
 						if (storeFeatures) {
 							// multiple features may share the same id, add them
 							// to an array of features
@@ -148,15 +146,15 @@ L.VectorGrid = L.GridLayer.extend({
 							});
 						}
 					}
-	
+
 				}
-	
+
 			}
-		
+
 			if (this._map != null) {
 				renderer.addTo(this._map);
 			}
-	
+
 			L.Util.requestAnimFrame(done.bind(coords, null, null));
 
 		}.bind(this));