Fix issue with rasters disappearing

The getImageData(callback) function as previously written
would invoke the callback immediately if image data was
already loaded, or asynchronously if image data was not.
(I knew this was weird so I noted this in the function's
comment.) This turns out to be a problem with Leaflet 1.x
because it expects createTile's callback (done) function
to only be invoked after createTile has returned. If done
is called too soon, then it's ignored, because done first
checks the GridLayer's tile cache to see if the tile that's
done is even still wanted. Since createTile hasn't returned
the tile isn't in the cache yet, and done becomes a no-op.

Author: jcheng5

inst/htmlwidgets/leaflet.js

@@ -2059,11 +2059,15 @@ methods.addRasterImage = function (uri, bounds, opacity, attribution, layerId, g
   var imgDataCallbacks = [];
 
   // Consumers of imgData, w, and h can call this to be notified when data
-  // is available. Unlike most async/promise-based APIs, the callback will
-  // be invoked immediately/synchronously if the data is already available.
+  // is available.
   function getImageData(callback) {
     if (imgData != null) {
-      callback(imgData, w, h, imgDataMipMapper);
+      // Must not invoke the callback immediately; it's too confusing and
+      // fragile to have a function invoke the callback *either* immediately
+      // or in the future. Better to be consistent here.
+      setTimeout(function () {
+        callback(imgData, w, h, imgDataMipMapper);
+      }, 0);
     } else {
       imgDataCallbacks.push(callback);
     }
@@ -2107,9 +2111,12 @@ methods.addRasterImage = function (uri, bounds, opacity, attribution, layerId, g
     async: true
   });
 
+  // NOTE: The done() function MUST NOT be invoked until after the current
+  // tick; done() looks in Leaflet's tile cache for the current tile, and
+  // since it's still being constructed, it won't be found.
   canvasTiles.createTile = function (tilePoint, done) {
     var zoom = tilePoint.z;
-    var canvas = _leaflet2.default.DomUtil.create("canvas", "leaflet-tile");
+    var canvas = _leaflet2.default.DomUtil.create("canvas");
     var error = void 0;
 
     // setup tile width and height according to the options
@@ -2244,6 +2251,8 @@ methods.addRasterImage = function (uri, bounds, opacity, attribution, layerId, g
         }();
 
         if ((typeof _ret7 === "undefined" ? "undefined" : _typeof(_ret7)) === "object") return _ret7.v;
+      } catch (e) {
+        error = e;
       } finally {
         done(error, canvas);
       }

javascript/src/methods.js

@@ -993,11 +993,15 @@ methods.addRasterImage = function(uri, bounds, opacity, attribution, layerId, gr
   let imgDataCallbacks = [];
 
   // Consumers of imgData, w, and h can call this to be notified when data
-  // is available. Unlike most async/promise-based APIs, the callback will
-  // be invoked immediately/synchronously if the data is already available.
+  // is available.
   function getImageData(callback) {
     if (imgData != null) {
-      callback(imgData, w, h, imgDataMipMapper);
+      // Must not invoke the callback immediately; it's too confusing and
+      // fragile to have a function invoke the callback *either* immediately
+      // or in the future. Better to be consistent here.
+      setTimeout(() => {
+        callback(imgData, w, h, imgDataMipMapper);
+      }, 0);
     } else {
       imgDataCallbacks.push(callback);
     }
@@ -1041,9 +1045,12 @@ methods.addRasterImage = function(uri, bounds, opacity, attribution, layerId, gr
     async: true
   });
 
+  // NOTE: The done() function MUST NOT be invoked until after the current
+  // tick; done() looks in Leaflet's tile cache for the current tile, and
+  // since it's still being constructed, it won't be found.
   canvasTiles.createTile = function(tilePoint, done) {
     let zoom = tilePoint.z;
-    let canvas = L.DomUtil.create("canvas", "leaflet-tile");
+    let canvas = L.DomUtil.create("canvas");
     let error;
 
     // setup tile width and height according to the options
@@ -1179,6 +1186,8 @@ methods.addRasterImage = function(uri, bounds, opacity, attribution, layerId, gr
             }
           }
         }
+      } catch(e) {
+        error = e;
       } finally {
         done(error, canvas);
       }