Allow sources to provide a ".coord" property (#3222)

fixes #3010

js/source/image_source.js

@@ -103,7 +103,7 @@ ImageSource.prototype = util.inherit(Evented, /** @lends ImageSource.prototype *
         centerCoord.row = Math.round(centerCoord.row);
 
         this.minzoom = this.maxzoom = centerCoord.zoom;
-        this._coord = new TileCoord(centerCoord.zoom, centerCoord.column, centerCoord.row);
+        this.coord = new TileCoord(centerCoord.zoom, centerCoord.column, centerCoord.row);
         this._tileCoords = cornerZ0Coords.map(function(coord) {
             var zoomedCoord = coord.zoomTo(centerCoord.zoom);
             return new Point(
@@ -154,11 +154,11 @@ ImageSource.prototype = util.inherit(Evented, /** @lends ImageSource.prototype *
     },
 
     loadTile: function(tile, callback) {
-        // We have a single tile -- whoose coordinates are this._coord -- that
+        // We have a single tile -- whoose coordinates are this.coord -- that
         // covers the image we want to render.  If that's the one being
         // requested, set it up with the image; otherwise, mark the tile as
         // `errored` to indicate that we have no data for it.
-        if (this._coord && this._coord.toString() === tile.coord.toString()) {
+        if (this.coord && this.coord.toString() === tile.coord.toString()) {
             this._setTile(tile);
             callback(null);
         } else {

js/source/source_cache.js

@@ -318,9 +318,17 @@ SourceCache.prototype = util.inherit(Evented, {
         // better, retained tiles. They are not drawn separately.
         this._coveredTiles = {};
 
-        var required = this.used ? transform.coveringTiles(this._source) : [];
-        for (i = 0; i < required.length; i++) {
-            coord = required[i];
+        var visibleCoords;
+        if (!this.used) {
+            visibleCoords = [];
+        } else if (this._source.coord) {
+            visibleCoords = [this._source.coord];
+        } else {
+            visibleCoords = transform.coveringTiles(this._source);
+        }
+
+        for (i = 0; i < visibleCoords.length; i++) {
+            coord = visibleCoords[i];
             tile = this.addTile(coord);
 
             retain[coord.id] = true;

js/source/video_source.js

@@ -127,7 +127,7 @@ VideoSource.prototype = util.inherit(Evented, /** @lends VideoSource.prototype *
         centerCoord.row = Math.round(centerCoord.row);
 
         this.minzoom = this.maxzoom = centerCoord.zoom;
-        this._coord = new TileCoord(centerCoord.zoom, centerCoord.column, centerCoord.row);
+        this.coord = new TileCoord(centerCoord.zoom, centerCoord.column, centerCoord.row);
         this._tileCoords = cornerZ0Coords.map(function(coord) {
             var zoomedCoord = coord.zoomTo(centerCoord.zoom);
             return new Point(
@@ -179,11 +179,11 @@ VideoSource.prototype = util.inherit(Evented, /** @lends VideoSource.prototype *
     },
 
     loadTile: function(tile, callback) {
-        // We have a single tile -- whoose coordinates are this._coord -- that
+        // We have a single tile -- whoose coordinates are this.coord -- that
         // covers the video frame we want to render.  If that's the one being
         // requested, set it up with the image; otherwise, mark the tile as
         // `errored` to indicate that we have no data for it.
-        if (this._coord && this._coord.toString() === tile.coord.toString()) {
+        if (this.coord && this.coord.toString() === tile.coord.toString()) {
             this._setTile(tile);
             callback(null);
         } else {

package.json

@@ -60,7 +60,7 @@
     "jsdom": "^9.4.2",
     "json-loader": "^0.5.4",
     "lodash": "^4.13.1",
-    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#f6746fe4a0cafe5a6276f9455187b87c8263e3e4",
+    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#01c2e8d1e7bb7a6b2a58ec0df4816eee21dd8646",
     "memory-fs": "^0.3.0",
     "minifyify": "^7.0.1",
     "npm-run-all": "^3.0.0",