Merge pull request #875 from OpenGeoscience/fix-deep-zoom-example

Fix the Deep Zoom example.

examples/deepzoom/example.json

@@ -1,7 +1,14 @@
 {
-  "title": "Deepzoom tiled image example",
+  "title": "Deep Zoom tiled image example",
   "exampleJs": ["main.js"],
   "about": {
-    "text": "Rendering a tiled image using the Deepzoom protocol."
-  }
+    "text": "Rendering a tiled image using the Deep Zoom protocol."
+  },
+  "tests": [{
+    "description": "data is loaded from the Deep Zoom server",
+    "idle": ["$('#map.geojs-map').data('data-geojs-map').onIdle"],
+    "tests": [
+      "Object.keys($('#map.geojs-map').data('data-geojs-map').layers()[0]._activeTiles).length === 11"
+    ]
+  }]
 }

examples/deepzoom/main.js

@@ -1,63 +1,72 @@
 /* globals utils */
 
-// Run after the DOM loads
-$(function () {
-  'use strict';
-
-  var query = utils.getQuery();
-
-  // custom tileLayer for deepzoom
-  var DeepZoom = function (arg) {
-    if (!(this instanceof DeepZoom)) {
-      return new DeepZoom(arg);
-    }
-    geo.tileLayer.call(this, arg);
-
-    this._getTile = function (index, source) {
-      return geo.imageTile({
-        index: index,
-        size: {x: this._options.tileWidth, y: this._options.tileHeight},
-        queue: this._queue,
-        url: this._options.url(source || index)
-      });
-    };
+// custom tileLayer for deepzoom
+var DeepZoom = function (arg) {
+  if (!(this instanceof DeepZoom)) {
+    return new DeepZoom(arg);
+  }
+  geo.tileLayer.call(this, arg);
+
+  this._getTile = function (index, source) {
+    return geo.imageTile({
+      index: index,
+      size: {
+        x: this._options.tileWidth + this._options.tileOverlap.x * 2,
+        y: this._options.tileHeight + this._options.tileOverlap.y * 2
+      },
+      queue: this._queue,
+      url: this._options.url(source || index),
+      overlap: this._options.tileOverlap,
+      crossDomain: this._options.crossDomain
+    });
   };
+};
+DeepZoom.defaults = $.extend({}, geo.tileLayer.defaults);
+geo.inherit(DeepZoom, geo.tileLayer);
+geo.registerLayer('deepzoom', DeepZoom);
+
+var query = utils.getQuery();
+
+// You can specify a different Deep Zoom image via ?url=(url to dzi or xml)
+var dzi_url = query.url || 'https://mars.nasa.gov/msl/multimedia/deepzoom/images/PIA19818/dzc_output.xml';
+var dzi_base = dzi_url.split('.').slice(0, -1).join('.') + '_files';
 
-  // We know the size of the image we are requesting, and we want to use
-  // pixel coordinates on our map.
-  var sizeX = 103583, sizeY = 70014, tileSize = 256;
+// Read the Deep Zoom image information.
+$.get(dzi_url).then(function (dzi_info) {
+  // Parse the Deep Zoom image information to get the tile size, format, and
+  // image size.  The actual tile images are (TileSize + 2 * Overlap) pixels in
+  // width and height.
+  var tileSize = +$('Image', dzi_info).attr('TileSize'),
+      tileOverlap = +$('Image', dzi_info).attr('Overlap') || 0,
+      format = $('Image', dzi_info).attr('Format'),
+      sizeX = +$('Image>Size', dzi_info).attr('Width'),
+      sizeY = +$('Image>Size', dzi_info).attr('Height');
+
+  // get some standard parameters for map and level in pixel-coordinate space
   var defaultParams = geo.util.pixelCoordinateParams(
-        '#map', sizeX, sizeY, tileSize, tileSize);
-
-  DeepZoom.defaults = $.extend({}, geo.tileLayer.defaults, defaultParams.layer, {
-    levelOffset: 8,
-    url: function (index) {
-      return 'http://node15.cci.emory.edu/cgi-bin/iipsrv.fcgi?DeepZoom=/bigdata2/' +
-      'PYRAMIDS/CDSA/ACC_Diagnostic/nationwidechildrens.org_ACC.diagnostic_images.' +
-      'Level_1.304.4.0/TCGA-OR-A5J1-01Z-00-DX1.600C7D8C-F04C-4125-AF14-B1E76DC01A1E.' +
-      'svs.dzi.tif_files/' + (index.level + 8) + '/' + index.x + '_' + index.y + '.jpg';
-    }
-  });
-  geo.inherit(DeepZoom, geo.tileLayer);
-  geo.registerLayer('tiledFish', DeepZoom);
+      '#map', sizeX, sizeY, tileSize, tileSize);
+
   // Create a map object
-  var map = geo.map($.extend({}, defaultParams.map, {
-    node: '#map',
-    clampBoundsX: false,
-    clampBoundsY: false,
-    clampZoom: false,
-    zoom: 4
-  }));
-
-  // Add the osm layer with a custom tile url.
-  // We ask to use the quad.imageFixedScale feature, since the IIP server
-  // returns partial tiles at the right and bottom edges.  If the tile server
-  // returns complete tiles that we need to crop, we would ask for the
-  // quad.imageCrop feature instead.
+  var map = geo.map(defaultParams.map);
+
   map.createLayer(
-    'tiledFish', {
+    'deepzoom', $.extend({}, defaultParams.layer, {
+      // For testing, we can ask for a specific renderer
       renderer: query.renderer ? (query.renderer === 'html' ? null : query.renderer) : undefined,
-      features: query.renderer ? undefined : ['quad.imageFixedScale']
-    }
+      // We ask to use the quad.imageFixedScale feature, since the Deep Zoom
+      // server returns partial tiles at the right and bottom edges.  If the
+      // tile server returned complete tiles that we need to crop, we would ask
+      // for the quad.imageCrop feature instead.
+      features: query.renderer ? undefined : ['quad.imageFixedScale'],
+      // Specify a custom url for tiles.  Deep Zoom offsets the level by 8
+      url: function (index) {
+        return dzi_base + '/' + (index.level + 8) + '/' + index.x + '_' + index.y + '.' + format;
+      },
+      // Specify the tile overlap
+      tileOverlap: {
+        x: tileOverlap,
+        y: tileOverlap
+      }
+    })
   );
 });

tests/headed-cases/examples.js

@@ -80,13 +80,22 @@ describe('examples', function () {
           (test.idle || []).forEach(function (idleFunc) {
             var defer = ex$.Deferred();
             deferreds.push(defer);
-            var idle = exampleWindow.eval(idleFunc);
-            if (!ex$.isFunction(idle)) {
-              idle = idle.then || idle.done;
-            }
-            idle(function () {
-              defer.resolve();
-            });
+            var interval;
+            interval = exampleWindow.setInterval(function () {
+              var idle;
+              try {
+                idle = exampleWindow.eval(idleFunc);
+              } catch (err) { }
+              if (idle) {
+                exampleWindow.clearInterval(interval);
+                if (!ex$.isFunction(idle)) {
+                  idle = idle.then || idle.done;
+                }
+                idle(function () {
+                  defer.resolve();
+                });
+              }
+            }, 10);
           });
           (test.wait || []).forEach(function (waitCondition) {
             var defer = ex$.Deferred();