enforce TileJSON bounds

src/source/load_tilejson.js

@@ -10,7 +10,7 @@ module.exports = function(options, callback) {
             return callback(err);
         }
 
-        const result = util.pick(tileJSON, ['tiles', 'minzoom', 'maxzoom', 'attribution', 'mapbox_logo']);
+        const result = util.pick(tileJSON, ['tiles', 'minzoom', 'maxzoom', 'attribution', 'mapbox_logo', 'bounds']);
 
         if (tileJSON.vector_layers) {
             result.vectorLayers = tileJSON.vector_layers;

src/source/raster_tile_source.js

@@ -5,6 +5,7 @@ const ajax = require('../util/ajax');
 const Evented = require('../util/evented');
 const loadTileJSON = require('./load_tilejson');
 const normalizeURL = require('../util/mapbox').normalizeTileURL;
+const TileBounds = require('./tile_bounds');
 
 class RasterTileSource extends Evented {
 
@@ -32,6 +33,8 @@ class RasterTileSource extends Evented {
                 return this.fire('error', err);
             }
             util.extend(this, tileJSON);
+            this.setBounds(tileJSON.bounds);
+
 
             // `content` is included here to prevent a race condition where `Style#_updateSources` is called
             // before the TileJSON arrives. this makes sure the tiles needed are loaded once TileJSON arrives
@@ -47,15 +50,27 @@ class RasterTileSource extends Evented {
         this.map = map;
     }
 
+    setBounds(bounds) {
+        this.bounds = bounds;
+        if (bounds) {
+            this.tileBounds = new TileBounds(bounds, this.minzoom, this.maxzoom);
+        }
+    }
+
     serialize() {
         return {
             type: 'raster',
             url: this.url,
             tileSize: this.tileSize,
-            tiles: this.tiles
+            tiles: this.tiles,
+            bounds: this.bounds,
         };
     }
 
+    hasTile(coord) {
+        return !this.tileBounds || this.tileBounds.contains(coord);
+    }
+
     loadTile(tile, callback) {
         const url = normalizeURL(tile.coord.url(this.tiles, null, this.scheme), this.url, this.tileSize);
 

src/source/source_cache.js

@@ -336,6 +336,10 @@ class SourceCache extends Evented {
                 roundZoom: this._source.roundZoom,
                 reparseOverscaled: this._source.reparseOverscaled
             });
+
+            if (this._source.hasTile) {
+                visibleCoords = visibleCoords.filter((coord) => this._source.hasTile(coord));
+            }
         }
 
         for (i = 0; i < visibleCoords.length; i++) {

src/source/tile_bounds.js

@@ -0,0 +1,35 @@
+'use strict';
+
+const LngLatBounds = require('../geo/lng_lat_bounds');
+const clamp = require('../util/util').clamp;
+
+class TileBounds {
+    constructor(bounds, minzoom, maxzoom) {
+        this.bounds = LngLatBounds.convert(bounds);
+        this.minzoom = minzoom || 0;
+        this.maxzoom = maxzoom || 24;
+    }
+
+    contains(coord) {
+        const level = {
+            minX: Math.floor(this.lngX(this.bounds.getWest(), coord.z)),
+            minY: Math.floor(this.latY(this.bounds.getNorth(), coord.z)),
+            maxX: Math.ceil(this.lngX(this.bounds.getEast(), coord.z)),
+            maxY: Math.ceil(this.latY(this.bounds.getSouth(), coord.z))
+        };
+        const hit = coord.x >= level.minX && coord.x < level.maxX && coord.y >= level.minY && coord.y < level.maxY;
+        return hit;
+    }
+
+    lngX(lng, zoom) {
+        return (lng + 180) * (Math.pow(2, zoom) / 360);
+    }
+
+    latY(lat, zoom) {
+        const f = clamp(Math.sin(Math.PI / 180 * lat), -0.9999, 0.9999);
+        const scale = Math.pow(2, zoom) / (2 * Math.PI);
+        return Math.pow(2, zoom - 1) + 0.5 * Math.log((1 + f) / (1 - f)) * -scale;
+    }
+}
+
+module.exports = TileBounds;

src/source/vector_tile_source.js

@@ -4,6 +4,7 @@ const Evented = require('../util/evented');
 const util = require('../util/util');
 const loadTileJSON = require('./load_tilejson');
 const normalizeURL = require('../util/mapbox').normalizeTileURL;
+const TileBounds = require('./tile_bounds');
 
 class VectorTileSource extends Evented {
 
@@ -39,6 +40,8 @@ class VectorTileSource extends Evented {
                 return;
             }
             util.extend(this, tileJSON);
+            this.setBounds(tileJSON.bounds);
+
              // `content` is included here to prevent a race condition where `Style#_updateSources` is called
             // before the TileJSON arrives. this makes sure the tiles needed are loaded once TileJSON arrives
             // ref: https://github.com/mapbox/mapbox-gl-js/pull/4347#discussion_r104418088
@@ -48,6 +51,18 @@ class VectorTileSource extends Evented {
         });
     }
 
+    setBounds(bounds) {
+        this.bounds = bounds;
+        if (bounds) {
+            this.tileBounds = new TileBounds(bounds, this.minzoom, this.maxzoom);
+        }
+    }
+
+    hasTile(coord) {
+        console.log('has tile');
+        return !this.tileBounds || this.tileBounds.contains(coord);
+    }
+
     onAdd(map) {
         this.load();
         this.map = map;

test/unit/source/raster_tile_source.test.js

@@ -0,0 +1,65 @@
+'use strict';
+const test = require('mapbox-gl-js-test').test;
+const RasterTileSource = require('../../../src/source/raster_tile_source');
+const window = require('../../../src/util/window');
+
+
+function createSource(options) {
+    const source = new RasterTileSource('id', options, { send: function() {} }, options.eventedParent);
+    source.onAdd({
+        transform: { angle: 0, pitch: 0, showCollisionBoxes: false }
+    });
+
+    source.on('error', (e) => {
+        throw e.error;
+    });
+
+    return source;
+}
+
+test('RasterTileSource', (t) => {
+    t.beforeEach((callback) => {
+        window.useFakeXMLHttpRequest();
+        callback();
+    });
+
+    t.afterEach((callback) => {
+        window.restore();
+        callback();
+    });
+
+    t.test('respects TileJSON.bounds', (t)=>{
+        const source = createSource({
+            minzoom: 0,
+            maxzoom: 22,
+            attribution: "Mapbox",
+            tiles: ["http://example.com/{z}/{x}/{y}.png"],
+        });
+        source.setBounds([[-47, -7], [-45, -5]]);
+        t.false(source.hasTile({z: 8, x:96, y: 132}), 'returns false for tiles outside bounds');
+        t.true(source.hasTile({z: 8, x:95, y: 132}), 'returns true for tiles inside bounds');
+        t.end();
+    });
+
+    t.test('respects TileJSON.bounds when loaded from TileJSON', (t)=>{
+        window.server.respondWith('/source.json', JSON.stringify({
+            minzoom: 0,
+            maxzoom: 22,
+            attribution: "Mapbox",
+            tiles: ["http://example.com/{z}/{x}/{y}.png"],
+            bounds: [[-47, -7], [-45, -5]]
+        }));
+        const source = createSource({ url: "/source.json" });
+
+        source.on('data', (e) => {
+            if (e.sourceDataType === 'metadata') {
+                t.false(source.hasTile({z: 8, x:96, y: 132}), 'returns false for tiles outside bounds');
+                t.true(source.hasTile({z: 8, x:95, y: 132}), 'returns true for tiles inside bounds');
+                t.end();
+            }
+        });
+        window.server.respond();
+    });
+    t.end();
+
+});

test/unit/source/source_cache.test.js

@@ -24,6 +24,9 @@ function MockSourceType(id, sourceOptions, _dispatcher, eventedParent) {
             this.maxzoom = 22;
             util.extend(this, sourceOptions);
             this.setEventedParent(eventedParent);
+            if (sourceOptions.hasTile) {
+                this.hasTile = sourceOptions.hasTile;
+            }
         }
         loadTile(tile, callback) {
             if (sourceOptions.expires) {
@@ -383,6 +386,27 @@ test('SourceCache#update', (t) => {
         sourceCache.onAdd();
     });
 
+    t.test('respects Source#hasTile method if it is present', (t) => {
+        const transform = new Transform();
+        transform.resize(511, 511);
+        transform.zoom = 1;
+
+        const sourceCache = createSourceCache({
+            hasTile: (coord) => (coord.x !== 0)
+        });
+        sourceCache.on('data', (e) => {
+            if (e.sourceDataType === 'metadata') {
+                sourceCache.update(transform);
+                t.deepEqual(sourceCache.getIds().sort(), [
+                    new TileCoord(1, 1, 0).id,
+                    new TileCoord(1, 1, 1).id
+                ].sort());
+                t.end();
+            }
+        });
+        sourceCache.onAdd();
+    });
+
     t.test('removes unused tiles', (t) => {
         const transform = new Transform();
         transform.resize(511, 511);

test/unit/source/vector_tile_source.test.js

@@ -16,6 +16,7 @@ function createSource(options) {
         throw e.error;
     });
 
+
     return source;
 }
 
@@ -178,5 +179,39 @@ test('VectorTileSource', (t) => {
         });
     });
 
+    t.test('respects TileJSON.bounds', (t)=>{
+        const source = createSource({
+            minzoom: 0,
+            maxzoom: 22,
+            attribution: "Mapbox",
+            tiles: ["http://example.com/{z}/{x}/{y}.png"],
+        });
+        source.setBounds([[-47, -7], [-45, -5]]);
+        t.false(source.hasTile({z: 8, x:96, y: 132}), 'returns false for tiles outside bounds');
+        t.true(source.hasTile({z: 8, x:95, y: 132}), 'returns true for tiles inside bounds');
+        t.end();
+    });
+
+
+    t.test('respects TileJSON.bounds when loaded from TileJSON', (t)=>{
+        window.server.respondWith('/source.json', JSON.stringify({
+            minzoom: 0,
+            maxzoom: 22,
+            attribution: "Mapbox",
+            tiles: ["http://example.com/{z}/{x}/{y}.png"],
+            bounds: [[-47, -7], [-45, -5]]
+        }));
+        const source = createSource({ url: "/source.json" });
+
+        source.on('data', (e) => {
+            if (e.sourceDataType === 'metadata') {
+                t.false(source.hasTile({z: 8, x:96, y: 132}), 'returns false for tiles outside bounds');
+                t.true(source.hasTile({z: 8, x:95, y: 132}), 'returns true for tiles inside bounds');
+                t.end();
+            }
+        });
+        window.server.respond();
+    });
+
     t.end();
 });