Add maxTileCacheSize option (#4778)

Workaround for #4052

src/source/source_cache.js

@@ -53,12 +53,14 @@ class SourceCache extends Evented {
         this._cache = new Cache(0, this.unloadTile.bind(this));
         this._timers = {};
         this._cacheTimers = {};
+        this._maxTileCacheSize = null;
 
         this._isIdRenderable = this._isIdRenderable.bind(this);
     }
 
     onAdd(map) {
         this.map = map;
+        this._maxTileCacheSize = map ? map._maxTileCacheSize : null;
         if (this._source && this._source.onAdd) {
             this._source.onAdd(map);
         }
@@ -278,7 +280,8 @@ class SourceCache extends Evented {
     }
 
     /**
-     * Resizes the tile cache based on the current viewport's size.
+     * Resizes the tile cache based on the current viewport's size
+     * or the maxTileCacheSize option passed during map creation
      *
      * Larger viewports use more tiles and need larger caches. Larger viewports
      * are more likely to be found on devices with more memory and on pages where
@@ -291,7 +294,11 @@ class SourceCache extends Evented {
         const heightInTiles = Math.ceil(transform.height / transform.tileSize) + 1;
         const approxTilesInView = widthInTiles * heightInTiles;
         const commonZoomRange = 5;
-        this._cache.setMaxSize(Math.floor(approxTilesInView * commonZoomRange));
+
+        const viewDependentMaxSize = Math.floor(approxTilesInView * commonZoomRange);
+        const maxSize = typeof this._maxTileCacheSize === 'number' ? Math.min(this._maxTileCacheSize, viewDependentMaxSize) : viewDependentMaxSize;
+
+        this._cache.setMaxSize(maxSize);
     }
 
     /**

src/ui/map.js

@@ -57,7 +57,9 @@ const defaultOptions = {
 
     renderWorldCopies: true,
 
-    refreshExpiredTiles: true
+    refreshExpiredTiles: true,
+
+    maxTileCacheSize: null
 };
 
 /**
@@ -123,6 +125,7 @@ const defaultOptions = {
  * @param {number} [options.bearing=0] The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north. If `bearing` is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`.
  * @param {number} [options.pitch=0] The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-60). If `pitch` is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`.
  * @param {boolean} [options.renderWorldCopies=true]  If `true`, multiple copies of the world will be rendered, when zoomed out.
+  * @param {number} [options.maxTileCacheSize=null]  The maxiumum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport.
  * @example
  * var map = new mapboxgl.Map({
  *   container: 'map',
@@ -146,6 +149,7 @@ class Map extends Camera {
         super(transform, options);
 
         this._interactive = options.interactive;
+        this._maxTileCacheSize = options.maxTileCacheSize;
         this._failIfMajorPerformanceCaveat = options.failIfMajorPerformanceCaveat;
         this._preserveDrawingBuffer = options.preserveDrawingBuffer;
         this._trackResize = options.trackResize;