use zoom level 22 as default maxZoom for World Imagery

instead of artificially capping the zoom for World Imagery at 19,
interrogate the esri tilemap when zooming begins to see whether all tiles
in an 8x8 grid at the next zoom level are present.

if they aren't, use leaflet's new built in option to downsample the existing tiles.

src/Layers/BasemapLayer.js

@@ -102,7 +102,9 @@ export var BasemapLayer = TileLayer.extend({
         urlTemplate: tileProtocol + '//{s}.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
         options: {
           minZoom: 1,
-          maxZoom: 19,
+          maxZoom: 22,
+          maxNativeZoom: 22,
+          downsampled: false,
           subdomains: ['server', 'services'],
           attribution: 'DigitalGlobe, GeoEye, i-cubed, USDA, USGS, AEX, Getmapping, Aerogrid, IGN, IGP, swisstopo, and the GIS User Community'
         }
@@ -215,6 +217,8 @@ export var BasemapLayer = TileLayer.extend({
 
     map.on('moveend', _updateMapAttribution);
 
+    map.on('zoomanim', _fetchTilemap, this);
+
     TileLayer.prototype.onAdd.call(this, map);
   },
 
@@ -239,6 +243,53 @@ export var BasemapLayer = TileLayer.extend({
   }
 });
 
+/*
+  to do:
+  implement same logic on big pans?
+  try and get rid of the screen flash when missing tiles are replaced with resampled tiles
+*/
+function _fetchTilemap (evt) {
+  var map = evt.target;
+  if (!map) { return; }
+
+  var oldZoom = map.getZoom();
+  var newZoom = evt.zoom;
+  var newCenter = map.wrapLatLng(evt.center);
+
+  if (newZoom > oldZoom && newZoom > 13 && !this.options.downsampled) {
+    // convert wrapped lat/long coords into tile coordinates and use them to generate the tilemap url
+    var tilePoint = map.project(newCenter, newZoom).divideBy(256).floor();
+    var tileUrl = Util.template(this._url, Util.extend({
+      s: this._getSubdomain(tilePoint),
+      x: tilePoint.x,
+      y: tilePoint.y,
+      z: newZoom
+    }, this.options));
+
+    // 8x8 grids are cached by the service
+    var tilemapUrl = tileUrl.replace(/tile/, 'tilemap') + '/8/8';
+
+    // the array of boolean values returned indicate whether any tiles are missing
+    L.esri.request(tilemapUrl, {}, function (err, response) {
+      if (!err) {
+        for (var i = 0; i < response.data.length; i++) {
+          if (!response.data[i]) {
+            // if a tile is missing, the layer should just resample the current zoom
+            this.options.maxNativeZoom = newZoom - 1;
+            this.options.downsampled = true;
+            break;
+          }
+          // if no tiles are missing, the original maximum zoom level is appropriate
+          this.options.maxNativeZoom = 22;
+        }
+      }
+    }, this);
+  } else if (newZoom < 13) {
+    // when users move from one region to another, it will be time to test again
+    this.options.downsampled = false;
+  }
+}
+
 export function basemapLayer (key, options) {
   return new BasemapLayer(key, options);
 }