mapbox-gl-leaflet - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

CHANGELOG.md

@@ -9,2 +9,9 @@ # Change Log
 
+## [0.0.8] - 2019-08-07
+
+## Added
+
+- Added a `padding` option to fix the grey backgrougd flickering around the edges of the map while panning/zooming
+- bumped the libraries in examples
+
 ## [0.0.7] - 2019-07-01
@@ -11,0 +18,0 @@

leaflet-mapbox-gl.js

@@ -14,4 +14,7 @@ (function (root, factory) {
     L.MapboxGL = L.Layer.extend({
-        options: {
-        updateInterval: 32
+            options: {
+            updateInterval: 32,
+            // How much to extend the overlay view (relative to map size)
+            // e.g. 0.15 would be 15% of map view in each direction
+            padding: 0.15
         },
@@ -28,41 +31,4 @@
 
-            /**
-             * Create a version of `fn` that only fires once every `time` millseconds.
-             *
-             * @param {Function} fn the function to be throttled
-             * @param {number} time millseconds required between function calls
-             * @param {*} context the value of `this` with which the function is called
-             * @returns {Function} debounced function
-             * @private
-             */
-            var throttle = function (fn, time, context) {
-                var lock, args, wrapperFn, later;
-
-                later = function () {
-                    // reset lock and call if queued
-                    lock = false;
-                    if (args) {
-                        wrapperFn.apply(context, args);
-                        args = false;
-                    }
-                };
-
-                wrapperFn = function () {
-                    if (lock) {
-                        // called too soon, queue to call later
-                        args = arguments;
-
-                    } else {
-                        // call and lock until later
-                        fn.apply(context, arguments);
-                        setTimeout(later, time);
-                        lock = true;
-                    }
-                };
-
-                return wrapperFn;
-            };
-
             // setup throttling the update event when panning
-            this._throttledUpdate = throttle(L.Util.bind(this._update, this), this.options.updateInterval);
+            this._throttledUpdate = L.Util.throttle(this._update, this.options.updateInterval, this);
         },
@@ -107,8 +73,17 @@
 
+        _getSize: function () {
+            return this._map.getSize().multiplyBy(1 + this.options.padding * 2);
+        },
+
         _initContainer: function () {
             var container = this._glContainer = L.DomUtil.create('div', 'leaflet-gl-layer');
 
-            var size = this._map.getSize();
+            var size = this._getSize();
+            var offset = this._map.getSize().multiplyBy(this.options.padding);
             container.style.width  = size.x + 'px';
             container.style.height = size.y + 'px';
+
+            var topLeft = this._map.containerPointToLayerPoint([0, 0]).subtract(offset);
+
+            L.DomUtil.setPosition(container, topLeft);
         },
@@ -150,9 +125,10 @@
             if (this._zooming) {
-            return;
+                return;
             }
 
-            var size = this._map.getSize(),
+            var size = this._getSize(),
                 container = this._glContainer,
                 gl = this._glMap,
-                topLeft = this._map.containerPointToLayerPoint([0, 0]);
+                offset = this._map.getSize().multiplyBy(this.options.padding),
+                topLeft = this._map.containerPointToLayerPoint([0, 0]).subtract(offset);
 
@@ -190,51 +166,75 @@ L.DomUtil.setPosition(container, topLeft);
         _pinchZoom: function (e) {
-        this._glMap.jumpTo({
-            zoom: this._map.getZoom() - 1,
-            center: this._map.getCenter()
-        });
+            this._glMap.jumpTo({
+                zoom: this._map.getZoom() - 1,
+                center: this._map.getCenter()
+            });
         },
 
-        // borrowed from L.ImageOverlay https://github.com/Leaflet/Leaflet/blob/master/src/layer/ImageOverlay.js#L139-L144
+        // borrowed from L.ImageOverlay
+        // https://github.com/Leaflet/Leaflet/blob/master/src/layer/ImageOverlay.js#L139-L144
         _animateZoom: function (e) {
-        var scale = this._map.getZoomScale(e.zoom),
-            offset = this._map._latLngToNewLayerPoint(this._map.getBounds().getNorthWest(), e.zoom, e.center);
+            var scale = this._map.getZoomScale(e.zoom);
+            var padding = this._map.getSize().multiplyBy(this.options.padding * scale);
+            var viewHalf = this._getSize()._divideBy(2);
+            // corrections for padding (scaled), adapted from
+            // https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L1490-L1508
+            var topLeft = this._map.project(e.center, e.zoom)
+                ._subtract(viewHalf)
+                ._add(this._map._getMapPanePos()
+                .add(padding))._round();
+            var offset = this._map.project(this._map.getBounds().getNorthWest(), e.zoom)
+                ._subtract(topLeft);
 
-        L.DomUtil.setTransform(this._glMap._actualCanvas, offset.subtract(this._offset), scale);
+            L.DomUtil.setTransform(
+                this._glMap._actualCanvas,
+                offset.subtract(this._offset),
+                scale
+            );
         },
 
         _zoomStart: function (e) {
-        this._zooming = true;
+            this._zooming = true;
         },
 
         _zoomEnd: function () {
-        var scale = this._map.getZoomScale(this._map.getZoom()),
-            offset = this._map._latLngToNewLayerPoint(this._map.getBounds().getNorthWest(), this._map.getZoom(), this._map.getCenter());
+            var scale = this._map.getZoomScale(this._map.getZoom()),
+                offset = this._map._latLngToNewLayerPoint(
+                    this._map.getBounds().getNorthWest(),
+                    this._map.getZoom(),
+                    this._map.getCenter()
+                );
 
-        L.DomUtil.setTransform(this._glMap._actualCanvas, offset.subtract(this._offset), scale);
+            L.DomUtil.setTransform(
+                this._glMap._actualCanvas,
+                offset.subtract(this._offset),
+                scale
+            );
 
-        this._zooming = false;
+            this._zooming = false;
 
-        this._update();
+            this._update();
         },
 
         _transitionEnd: function (e) {
-        L.Util.requestAnimFrame(function () {
-            var zoom = this._map.getZoom(),
-            center = this._map.getCenter(),
-            offset = this._map.latLngToContainerPoint(this._map.getBounds().getNorthWest());
+            L.Util.requestAnimFrame(function () {
+                var zoom = this._map.getZoom();
+                var center = this._map.getCenter();
+                var offset = this._map.latLngToContainerPoint(
+                    this._map.getBounds().getNorthWest()
+                );
 
-            // reset the scale and offset
-            L.DomUtil.setTransform(this._glMap._actualCanvas, offset, 1);
+                // reset the scale and offset
+                L.DomUtil.setTransform(this._glMap._actualCanvas, offset, 1);
 
-            // enable panning once the gl map is ready again
-            this._glMap.once('moveend', L.Util.bind(function () {
-                this._zoomEnd();
-            }, this));
+                // enable panning once the gl map is ready again
+                this._glMap.once('moveend', L.Util.bind(function () {
+                    this._zoomEnd();
+                }, this));
 
-            // update the map position
-            this._glMap.jumpTo({
-                center: center,
-                zoom: zoom - 1
-            });
-        }, this);
+                // update the map position
+                this._glMap.jumpTo({
+                    center: center,
+                    zoom: zoom - 1
+                });
+            }, this);
         }
@@ -241,0 +241,0 @@ });

package.json

 {
   "name": "mapbox-gl-leaflet",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "binding from mapbox gl to the leaflet api",
@@ -5,0 +5,0 @@ "main": "leaflet-mapbox-gl.js",

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15854

increased by2.11%

Lines of code

197

increased by1.03%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes