Fix mapbox#47 again...

patrickarlt · Nov 22, 2016 · 8e6d0ad · 8e6d0ad
1 parent 049d593
commit 8e6d0ad
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/examples/basic.html b/examples/basic.html
@@ -2,7 +2,14 @@
 <head>
     <title>WebGL</title>
     <meta charset="utf-8">
-    <style>#map { width: 800px; height: 600px; }</style>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      html, body, #map {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
+    </style>
 
     <!-- Leaflet -->
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0/leaflet.css" />

diff --git a/leaflet-mapbox-gl.js b/leaflet-mapbox-gl.js
@@ -66,13 +66,13 @@ L.MapboxGL = L.Layer.extend({
 
         // work around https://github.com/mapbox/mapbox-gl-leaflet/issues/47
         if (map.options.zoomAnimation) {
-            L.DomEvent.on(map._proxy, L.DomUtil.TRANSITION_END, this._zoomEnd, this);
+            L.DomEvent.on(map._proxy, L.DomUtil.TRANSITION_END, this._transitionEnd, this);
         }
     },
 
     onRemove: function (map) {
         if (this._map.options.zoomAnimation) {
-            L.DomEvent.off(this._map._proxy, L.DomUtil.TRANSITION_END, this._zoomEnd, this);
+            L.DomEvent.off(this._map._proxy, L.DomUtil.TRANSITION_END, this._transitionEnd, this);
         }
 
         map.getPanes().tilePane.removeChild(this._glContainer);
@@ -86,6 +86,7 @@ L.MapboxGL = L.Layer.extend({
             zoomanim: this._animateZoom, // applys the zoom animation to the <canvas>
             zoom: this._pinchZoom, // animate every zoom event for smoother pinch-zooming
             zoomstart: this._zoomStart, // flag starting a zoom to disable panning
+            zoomend: this._zoomEnd
         };
     },
 
@@ -171,7 +172,14 @@ L.MapboxGL = L.Layer.extend({
       this._zooming = true;
     },
 
-    _zoomEnd: function (e) {
+    _zoomEnd: function () {
+      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._canvas, offset.subtract(this._offset), scale);
+    },
+
+    _transitionEnd: function (e) {
       L.Util.requestAnimFrame(function () {
           var zoom = this._map.getZoom(),
           center = this._map.getCenter(),
@@ -183,6 +191,7 @@ L.MapboxGL = L.Layer.extend({
           // enable panning once the gl map is ready again
           this._glMap.once('moveend', L.Util.bind(function () {
               this._zooming = false;
+              this._zoomEnd();
           }, this));
 
           // update the map position