enforce TileJSON bounds

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,7 @@ 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 +49,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,33 @@
+'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 = [
+        [Math.floor(this.lngX(this.bounds.getWest(), coord.z)), Math.floor(this.latY(this.bounds.getNorth(), coord.z))],
+        [Math.ceil(this.lngX(this.bounds.getEast(), coord.z)), Math.ceil(this.latY(this.bounds.getSouth(), coord.z))]
+        ];
+        const hit = coord.x >= level[0][0] && coord.x < level[1][0] && coord.y >= level[0][1] && coord.y < level[1][1];
+        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/vector_tile_source.test.js

@@ -178,5 +178,18 @@ 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.end();
 });