diff --git a/preview/index.html b/preview/index.html
index e1afa48b..48708460 100644
--- a/preview/index.html
+++ b/preview/index.html
@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
-	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
+	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
 
 	<style>
 		html {
@@ -77,7 +77,7 @@ <h4><a href="https://github.com/leaflet-extras/leaflet-providers">Leaflet-provid
 	</div>
 	<div id="map" class="map"></div>
 
-	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
+	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
 	<script src="../leaflet-providers.js"></script>
 
 	<script src="vendor/L.Control.Layers.Minimap.js"></script>
diff --git a/preview/vendor/L.Control.Layers.Minimap.js b/preview/vendor/L.Control.Layers.Minimap.js
index b31740c7..fddb885d 100644
--- a/preview/vendor/L.Control.Layers.Minimap.js
+++ b/preview/vendor/L.Control.Layers.Minimap.js
@@ -1,4 +1,4 @@
-(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 /*
  * Leaflet.layerscontrol-minimap
  *
@@ -45,25 +45,31 @@ L.Control.Layers.Minimap = L.Control.Layers.extend({
         return !L.DomUtil.hasClass(this._container, 'leaflet-control-layers-expanded');
     },
 
-    _expand: function () {
-        L.Control.Layers.prototype._expand.call(this);
+    expand: function () {
+        L.Control.Layers.prototype.expand.call(this);
         this._onListScroll();
     },
 
+    _expand: function () {
+        // backwards compatibility, should be removed when leaflet 1.1 arrives.
+        this.expand();
+    },
+
     _initLayout: function () {
         L.Control.Layers.prototype._initLayout.call(this);
-        var container = this._container;
+        L.DomUtil.addClass(this._container, 'leaflet-control-layers-minimap');
 
-        L.DomUtil.addClass(container, 'leaflet-control-layers-minimap');
-        L.DomEvent.on(container, 'scroll', this._onListScroll, this);
+        var scrollContainer = this._scrollContainer();
+        L.DomEvent.on(scrollContainer, 'scroll', this._onListScroll, this);
         // disable scroll propagation, Leaflet is going to do this too
         // https://github.com/Leaflet/Leaflet/issues/5277
-        L.DomEvent.disableScrollPropagation(container)
+        L.DomEvent.disableScrollPropagation(scrollContainer)
     },
 
     _update: function () {
         L.Control.Layers.prototype._update.call(this);
 
+        if (!this._map) { return; }
         this._map.on('resize', this._onResize, this);
         this._onResize();
         this._map.whenReady(this._onListScroll, this);
@@ -91,6 +97,7 @@ L.Control.Layers.Minimap = L.Control.Layers.extend({
         } else {
             input = this._createRadioElement('leaflet-base-layers', checked);
         }
+        this._layerControlInputs.push(input)
         input.layerId = L.stamp(obj.layer);
         span.appendChild(input);
 
@@ -112,6 +119,14 @@ L.Control.Layers.Minimap = L.Control.Layers.extend({
         this._container.style.maxHeight = (mapHeight - this.options.bottomPadding - this.options.topPadding) + 'px';
     },
 
+    _scrollContainer: function () {
+        if (this.options.collapsed) {
+            return this._container.querySelectorAll('.leaflet-control-layers-list')[0];
+        } else {
+            return this._container;
+        }
+    },
+
     _onListScroll: function () {
         if (!this._map) {
             return;
@@ -129,7 +144,7 @@ L.Control.Layers.Minimap = L.Control.Layers.extend({
         } else {
             var minimapHeight = minimaps.item(0).clientHeight;
             var container = this._container;
-            var scrollTop = container.scrollTop;
+            var scrollTop = this._scrollContainer().scrollTop;
 
             first = Math.floor(scrollTop / minimapHeight);
             last = Math.ceil((scrollTop + container.clientHeight) / minimapHeight);
@@ -232,7 +247,25 @@ function cloneLayer (layer) {
         return L.canvas(options);
     }
 
+    // GoogleMutant GridLayer
+    if (L.GridLayer.GoogleMutant && layer instanceof L.GridLayer.GoogleMutant) {
+        var googleLayer = L.gridLayer.googleMutant(options);
+
+        layer._GAPIPromise.then(function () {
+            var subLayers = Object.keys(layer._subLayers); 
+     
+            for (var i in subLayers) {
+                googleLayer.addGoogleLayer(subLayers[i]);
+            }
+        });
+
+        return googleLayer;
+    }
+
     // Tile layers
+    if (layer instanceof L.TileLayer.WMS) {
+        return L.tileLayer.wms(layer._url, options);
+    }
     if (layer instanceof L.TileLayer) {
         return L.tileLayer(layer._url, options);
     }
@@ -266,12 +299,12 @@ function cloneLayer (layer) {
         return L.geoJson(layer.toGeoJSON(), options);
     }
 
+    if (layer instanceof L.FeatureGroup) {
+        return L.featureGroup(cloneInnerLayers(layer));
+    }
     if (layer instanceof L.LayerGroup) {
         return L.layerGroup(cloneInnerLayers(layer));
     }
-    if (layer instanceof L.FeatureGroup) {
-        return L.FeatureGroup(cloneInnerLayers(layer));
-    }
 
     throw 'Unknown layer, cannot clone this layer. Leaflet-version: ' + L.version;
 }
@@ -288,10 +321,34 @@ if (typeof exports === 'object') {
 (function () {
     var NO_ANIMATION = {
         animate: false,
-        reset: true
+        reset: true,
+        disableViewprereset: true
     };
 
-    L.Map = L.Map.extend({
+    L.Sync = function () {};
+    /*
+     * Helper function to compute the offset easily.
+     *
+     * The arguments are relative positions with respect to reference and target maps of
+     * the point to sync. If you provide ratioRef=[0, 1], ratioTarget=[1, 0] will sync the
+     * bottom left corner of the reference map with the top right corner of the target map.
+     * The values can be less than 0 or greater than 1. It will sync points out of the map.
+     */
+    L.Sync.offsetHelper = function (ratioRef, ratioTarget) {
+        var or = L.Util.isArray(ratioRef) ? ratioRef : [0.5, 0.5];
+        var ot = L.Util.isArray(ratioTarget) ? ratioTarget : [0.5, 0.5];
+        return function (center, zoom, refMap, targetMap) {
+            var rs = refMap.getSize();
+            var ts = targetMap.getSize();
+            var pt = refMap.project(center, zoom)
+                           .subtract([(0.5 - or[0]) * rs.x, (0.5 - or[1]) * rs.y])
+                           .add([(0.5 - ot[0]) * ts.x, (0.5 - ot[1]) * ts.y]);
+            return refMap.unproject(pt, zoom);
+        };
+    };
+
+
+    L.Map.include({
         sync: function (map, options) {
             this._initSync();
             options = L.extend({
@@ -302,28 +359,95 @@ if (typeof exports === 'object') {
                     fillOpacity: 0.3,
                     color: '#da291c',
                     fillColor: '#fff'
+                },
+                offsetFn: function (center, zoom, refMap, targetMap) {
+                    // no transformation at all
+                    return center;
                 }
             }, options);
 
             // prevent double-syncing the map:
             if (this._syncMaps.indexOf(map) === -1) {
                 this._syncMaps.push(map);
+                this._syncOffsetFns[L.Util.stamp(map)] = options.offsetFn;
             }
 
             if (!options.noInitialSync) {
-                map.setView(this.getCenter(), this.getZoom(), NO_ANIMATION);
+                map.setView(
+                    options.offsetFn(this.getCenter(), this.getZoom(), this, map),
+                    this.getZoom(), NO_ANIMATION);
             }
             if (options.syncCursor) {
-                map.cursor = L.circleMarker([0, 0], options.syncCursorMarkerOptions).addTo(map);
+                if (typeof map.cursor === 'undefined') {
+                    map.cursor = L.circleMarker([0, 0], options.syncCursorMarkerOptions).addTo(map);
+                }
 
                 this._cursors.push(map.cursor);
 
                 this.on('mousemove', this._cursorSyncMove, this);
                 this.on('mouseout', this._cursorSyncOut, this);
             }
+
+            // on these events, we should reset the view on every synced map
+            // dragstart is due to inertia
+            this.on('resize zoomend', this._selfSetView);
+            this.on('moveend', this._syncOnMoveend);
+            this.on('dragend', this._syncOnDragend);
+            return this;
+        },
+
+
+        // unsync maps from each other
+        unsync: function (map) {
+            var self = this;
+
+            if (this._cursors) {
+                this._cursors.forEach(function (cursor, indx, _cursors) {
+                    if (cursor === map.cursor) {
+                        _cursors.splice(indx, 1);
+                    }
+                });
+            }
+
+            // TODO: hide cursor in stead of moving to 0, 0
+            if (map.cursor) {
+                map.cursor.setLatLng([0, 0]);
+            }
+
+            if (this._syncMaps) {
+                this._syncMaps.forEach(function (synced, id) {
+                    if (map === synced) {
+                        delete self._syncOffsetFns[L.Util.stamp(map)];
+                        self._syncMaps.splice(id, 1);
+                    }
+                });
+            }
+
+            if (!this._syncMaps || this._syncMaps.length == 0) {
+                // no more synced maps, so these events are not needed.
+                this.off('resize zoomend', this._selfSetView);
+                this.off('moveend', this._syncOnMoveend);
+                this.off('dragend', this._syncOnDragend);
+            }
+
             return this;
         },
 
+        // Checks if the map is synced with anything or a specifyc map
+        isSynced: function (otherMap) {
+            var has = (this.hasOwnProperty('_syncMaps') && Object.keys(this._syncMaps).length > 0);
+            if (has && otherMap) {
+                // Look for this specific map
+                has = false;
+                this._syncMaps.forEach(function (synced) {
+                    if (otherMap == synced) { has = true; }
+                });
+            }
+            return has;
+        },
+
+
+        // Callbacks for events...
         _cursorSyncMove: function (e) {
             this._cursors.forEach(function (cursor) {
                 cursor.setLatLng(e.latlng);
@@ -337,32 +461,30 @@ if (typeof exports === 'object') {
             });
         },
 
+        _selfSetView: function (e) {
+            // reset the map, and let setView synchronize the others.
+            this.setView(this.getCenter(), this.getZoom(), NO_ANIMATION);
+        },
 
-        // unsync maps from each other
-        unsync: function (map) {
-            var self = this;
-
-            if (this._syncMaps) {
-                this._syncMaps.forEach(function (synced, id) {
-                    if (map === synced) {
-                        self._syncMaps.splice(id, 1);
-                        if (map.cursor) {
-                            map.cursor.removeFrom(map);
-                        }
-                    }
+        _syncOnMoveend: function (e) {
+            if (this._syncDragend) {
+                // This is 'the moveend' after the dragend.
+                // Without inertia, it will be right after,
+                // but when inertia is on, we need this to detect that.
+                this._syncDragend = false; // before calling setView!
+                this._selfSetView(e);
+                this._syncMaps.forEach(function (toSync) {
+                    toSync.fire('moveend');
                 });
             }
-            this.off('mousemove', this._cursorSyncMove, this);
-            this.off('mouseout', this._cursorSyncOut, this);
-
-            return this;
         },
 
-        // Checks if the maps is synced with anything
-        isSynced: function () {
-            return (this.hasOwnProperty('_syncMaps') && Object.keys(this._syncMaps).length > 0);
+        _syncOnDragend: function (e) {
+            // It is ugly to have state, but we need it in case of inertia.
+            this._syncDragend = true;
         },
 
+
         // overload methods on originalMap to replay interactions on _syncMaps;
         _initSync: function () {
             if (this._syncMaps) {
@@ -372,15 +494,47 @@ if (typeof exports === 'object') {
 
             this._syncMaps = [];
             this._cursors = [];
+            this._syncOffsetFns = {};
 
             L.extend(originalMap, {
                 setView: function (center, zoom, options, sync) {
+                    // Use this sandwich to disable and enable viewprereset
+                    // around setView call
+                    function sandwich (obj, fn) {
+                        var viewpreresets = [];
+                        var doit = options && options.disableViewprereset && obj && obj._events;
+                        if (doit) {
+                            // The event viewpreresets does an invalidateAll,
+                            // that reloads all the tiles.
+                            // That causes an annoying flicker.
+                            viewpreresets = obj._events.viewprereset;
+                            obj._events.viewprereset = [];
+                        }
+                        var ret = fn(obj);
+                        if (doit) {
+                            // restore viewpreresets event to its previous values
+                            obj._events.viewprereset = viewpreresets;
+                        }
+                        return ret;
+                    }
+
+                    // Looks better if the other maps 'follow' the active one,
+                    // so call this before _syncMaps
+                    var ret = sandwich(this, function (obj) {
+                        return L.Map.prototype.setView.call(obj, center, zoom, options);
+                    });
+
                     if (!sync) {
                         originalMap._syncMaps.forEach(function (toSync) {
-                            toSync.setView(center, zoom, options, true);
+                            sandwich(toSync, function (obj) {
+                                return toSync.setView(
+                                    originalMap._syncOffsetFns[L.Util.stamp(toSync)](center, zoom, originalMap, toSync),
+                                    zoom, options, true);
+                            });
                         });
                     }
-                    return L.Map.prototype.setView.call(this, center, zoom, options);
+
+                    return ret;
                 },
 
                 panBy: function (offset, options, sync) {
@@ -399,15 +553,18 @@ if (typeof exports === 'object') {
                         });
                     }
                     return L.Map.prototype._onResize.call(this, event);
+                },
+
+                _stop: function (sync) {
+                    L.Map.prototype._stop.call(this);
+                    if (!sync) {
+                        originalMap._syncMaps.forEach(function (toSync) {
+                            toSync._stop(true);
+                        });
+                    }
                 }
             });
 
-            originalMap.on('zoomend', function () {
-                originalMap._syncMaps.forEach(function (toSync) {
-                    toSync.setView(originalMap.getCenter(), originalMap.getZoom(), NO_ANIMATION);
-                });
-            }, this);
-
             originalMap.dragging._draggable._updatePosition = function () {
                 L.Draggable.prototype._updatePosition.call(this);
                 var self = this;
@@ -415,10 +572,12 @@ if (typeof exports === 'object') {
                     L.DomUtil.setPosition(toSync.dragging._draggable._element, self._newPos);
                     toSync.eachLayer(function (layer) {
                         if (layer._google !== undefined) {
-                            layer._google.setCenter(originalMap.getCenter());
+                            var offsetFn = originalMap._syncOffsetFns[L.Util.stamp(toSync)];
+                            var center = offsetFn(originalMap.getCenter(), originalMap.getZoom(), originalMap, toSync);
+                            layer._google.setCenter(center);
                         }
                     });
-                    toSync.fire('moveend');
+                    toSync.fire('move');
                 });
             };
         }
diff --git a/preview/vendor/control.layers.minimap.css b/preview/vendor/control.layers.minimap.css
index bded678d..b42446bb 100644
--- a/preview/vendor/control.layers.minimap.css
+++ b/preview/vendor/control.layers.minimap.css
@@ -37,3 +37,7 @@
 .leaflet-minimap-container.leaflet-minimap-hidden {
     display: none;
 }
+.leaflet-control-layers-minimap .leaflet-control-layers-scrollbar{
+    overflow-y: unset;
+    overflow-x: unset;
+}