Improve tile overlap.

examples/deepzoom/main.js

@@ -11,8 +11,8 @@ var DeepZoom = function (arg) {
     return geo.imageTile({
       index: index,
       size: {
-        x: this._options.tileWidth + this._options.tileOverlap.x * 2,
-        y: this._options.tileHeight + this._options.tileOverlap.y * 2
+        x: this._options.tileWidth,
+        y: this._options.tileHeight
       },
       queue: this._queue,
       url: this._options.url(source || index),
@@ -30,6 +30,7 @@ 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';
+var dzi_query = dzi_url.indexOf('?') >= 0 ? dzi_url.substr(dzi_url.indexOf('?')) : '';
 
 // Read the Deep Zoom image information.
 $.get(dzi_url).then(function (dzi_info) {
@@ -60,7 +61,7 @@ $.get(dzi_url).then(function (dzi_info) {
       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;
+        return dzi_base + '/' + (index.level + 8) + '/' + index.x + '_' + index.y + '.' + format + dzi_query;
       },
       // Specify the tile overlap
       tileOverlap: {

src/imageTile.js

@@ -64,7 +64,7 @@ var imageTile = function (spec) {
   this.fetch = function () {
     var defer;
     if (!this._image) {
-      this._image = new Image(this.size.x, this.size.y);
+      this._image = new Image(this.right - this.left, this.bottom - this.top);
       // Only set the crossOrigin parameter if this is going across origins.
       if (this._cors && this._url.indexOf(':') >= 0 &&
           this._url.indexOf('/') === this._url.indexOf(':') + 1) {

src/tile.js

@@ -165,6 +165,12 @@ var tile = function (spec) {
     right = left + this.size.x + this.overlap.x * 2;
     top = this.size.y * (this.index.y - index.y) - this.overlap.y - shift.y;
     bottom = top + this.size.y + this.overlap.y * 2;
+    if (this.overlap.x && this.index.x === index.x) {
+      left += this.overlap.x;
+    }
+    if (this.overlap.y && this.index.y === index.y) {
+      top += this.overlap.y;
+    }
     return {
       left: left,
       right: right,
@@ -191,7 +197,7 @@ var tile = function (spec) {
    */
   Object.defineProperty(this, 'top', {
     get: function () {
-      return this.size.y * this.index.y - this.overlap.y;
+      return this.size.y * this.index.y - (this.index.y ? this.overlap.y : 0);
     }
   });
 
@@ -202,7 +208,7 @@ var tile = function (spec) {
    */
   Object.defineProperty(this, 'left', {
     get: function () {
-      return this.size.x * this.index.x - this.overlap.x;
+      return this.size.x * this.index.x - (this.index.x ? this.overlap.x : 0);
     }
   });
 

tests/cases/tile.js

@@ -96,8 +96,8 @@ describe('geo.tile', function () {
       });
 
       expect(t.bottom).toEqual(12);
-      expect(t.left).toEqual(-1);
-      expect(t.top).toEqual(-2);
+      expect(t.left).toEqual(0);
+      expect(t.top).toEqual(0);
       expect(t.right).toEqual(11);
 
       t = geo.tile({