maplibre-gl 3.0.1 → 3.1.0

package/src/source/vector_tile_source.test.ts

@@ -41,7 +41,7 @@ describe('VectorTileSource', () => {
         const source = createSource({
             minzoom: 1,
             maxzoom: 10,
-            attribution: 'Maplibre',
+            attribution: 'MapLibre',
             tiles: ['http://example.com/{z}/{x}/{y}.png']
         });
 
@@ -50,7 +50,7 @@ describe('VectorTileSource', () => {
                 expect(source.tiles).toEqual(['http://example.com/{z}/{x}/{y}.png']);
                 expect(source.minzoom).toBe(1);
                 expect(source.maxzoom).toBe(10);
-                expect((source as Source).attribution).toBe('Maplibre');
+                expect((source as Source).attribution).toBe('MapLibre');
                 done();
             }
         });
@@ -66,7 +66,7 @@ describe('VectorTileSource', () => {
                 expect(source.tiles).toEqual(['http://example.com/{z}/{x}/{y}.png']);
                 expect(source.minzoom).toBe(1);
                 expect(source.maxzoom).toBe(10);
-                expect((source as Source).attribution).toBe('Maplibre');
+                expect((source as Source).attribution).toBe('MapLibre');
                 done();
             }
         });
@@ -125,14 +125,14 @@ describe('VectorTileSource', () => {
         const source = createSource({
             minzoom: 1,
             maxzoom: 10,
-            attribution: 'Maplibre',
+            attribution: 'MapLibre',
             tiles: ['http://example.com/{z}/{x}/{y}.png']
         });
         expect(source.serialize()).toEqual({
             type: 'vector',
             minzoom: 1,
             maxzoom: 10,
-            attribution: 'Maplibre',
+            attribution: 'MapLibre',
             tiles: ['http://example.com/{z}/{x}/{y}.png']
         });
     });
@@ -142,7 +142,7 @@ describe('VectorTileSource', () => {
             const source = createSource({
                 minzoom: 1,
                 maxzoom: 10,
-                attribution: 'Maplibre',
+                attribution: 'MapLibre',
                 tiles: ['http://example.com/{z}/{x}/{y}.png'],
                 scheme
             });
@@ -229,7 +229,7 @@ describe('VectorTileSource', () => {
         const source = createSource({
             minzoom: 0,
             maxzoom: 22,
-            attribution: 'Maplibre',
+            attribution: 'MapLibre',
             tiles: ['http://example.com/{z}/{x}/{y}.png'],
             bounds: [-47, -7, -45, -5]
         });
@@ -246,7 +246,7 @@ describe('VectorTileSource', () => {
         const source = createSource({
             minzoom: 0,
             maxzoom: 22,
-            attribution: 'Maplibre',
+            attribution: 'MapLibre',
             tiles: ['http://example.com/{z}/{x}/{y}.png'],
             bounds: [-47, -7, -45, 91]
         });
@@ -263,7 +263,7 @@ describe('VectorTileSource', () => {
         server.respondWith('/source.json', JSON.stringify({
             minzoom: 0,
             maxzoom: 22,
-            attribution: 'Maplibre',
+            attribution: 'MapLibre',
             tiles: ['http://example.com/{z}/{x}/{y}.png'],
             bounds: [-47, -7, -45, -5]
         }));
@@ -331,7 +331,7 @@ describe('VectorTileSource', () => {
         const source = createSource({
             minzoom: 1,
             maxzoom: 10,
-            attribution: 'Maplibre',
+            attribution: 'MapLibre',
             tiles: ['http://example.com/{z}/{x}/{y}.png']
         });
         source.setTiles(['http://example2.com/{z}/{x}/{y}.png']);
@@ -339,7 +339,7 @@ describe('VectorTileSource', () => {
             type: 'vector',
             minzoom: 1,
             maxzoom: 10,
-            attribution: 'Maplibre',
+            attribution: 'MapLibre',
             tiles: ['http://example2.com/{z}/{x}/{y}.png']
         });
     });

package/src/source/vector_tile_worker_source.ts

@@ -116,7 +116,7 @@ class VectorTileWorkerSource implements WorkerSource {
             }
 
             const rawTileData = response.rawData;
-            const cacheControl = {} as {expires: any; cacheControl: any};
+            const cacheControl = {} as ExpiryData;
             if (response.expires) cacheControl.expires = response.expires;
             if (response.cacheControl) cacheControl.cacheControl = response.cacheControl;
 

package/src/style/style_layer/custom_style_layer.ts

@@ -3,7 +3,7 @@ import type Map from '../../ui/map';
 import {mat4} from 'gl-matrix';
 import {LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
 
-type CustomRenderMethod = (gl: WebGL2RenderingContext, matrix: mat4) => void;
+type CustomRenderMethod = (gl: WebGLRenderingContext|WebGL2RenderingContext, matrix: mat4) => void;
 
 /**
  * Interface for custom style layers. This is a specification for
@@ -103,7 +103,7 @@ export interface CustomLayerInterface {
      * @memberof CustomLayerInterface
      * @instance
      * @name render
-     * @param {WebGL2RenderingContext} gl The map's gl context.
+     * @param {WebGLRenderingContext | WebGL2RenderingContext} gl The map's gl context.
      * @param {Array<number>} matrix The map's camera matrix. It projects spherical mercator
      * coordinates to gl coordinates. The spherical mercator coordinate `[0, 0]` represents the
      * top left corner of the mercator world and `[1, 1]` represents the bottom right corner. When
@@ -139,9 +139,9 @@ export interface CustomLayerInterface {
      * @instance
      * @name onAdd
      * @param {Map} map The Map this custom layer was just added to.
-     * @param {WebGL2RenderingContext} gl The gl context for the map.
+     * @param {WebGLRenderingContext | WebGL2RenderingContext} gl The gl context for the map.
      */
-    onAdd?(map: Map, gl: WebGL2RenderingContext): void;
+    onAdd?(map: Map, gl: WebGLRenderingContext | WebGL2RenderingContext): void;
     /**
      * Optional method called when the layer has been removed from the Map with {@link Map#removeLayer}. This
      * gives the layer a chance to clean up gl resources and event listeners.
@@ -151,9 +151,9 @@ export interface CustomLayerInterface {
      * @instance
      * @name onRemove
      * @param {Map} map The Map this custom layer was just added to.
-     * @param {WebGL2RenderingContext} gl The gl context for the map.
+     * @param {WebGLRenderingContext | WebGL2RenderingContext} gl The gl context for the map.
      */
-    onRemove?(map: Map, gl: WebGL2RenderingContext): void;
+    onRemove?(map: Map, gl: WebGLRenderingContext | WebGL2RenderingContext): void;
 }
 
 export function validateCustomStyleLayer(layerObject: CustomLayerInterface) {

package/src/ui/control/attribution_control.ts

@@ -13,7 +13,7 @@ type AttributionOptions = {
  * An `AttributionControl` control presents the map's attribution information. By default, the attribution control is expanded (regardless of map width).
  *
  * @implements {IControl}
- * @param {Object} [options]
+ * @param {AttributionOptions} [options]
  * @param {boolean} [options.compact] If `true`, the attribution control will always collapse when moving the map. If `false`, force the expanded attribution control. The default is a responsive attribution that collapses when the user moves the map on maps less than 640 pixels wide.  **Attribution should not be collapsed if it can comfortably fit on the map. `compact` should only be used to modify default attribution when map size makes it impossible to fit default attribution and when the automatic compact resizing for default settings are not sufficient.**
  * @param {string | Array<string>} [options.customAttribution] String or strings to show in addition to any other attributions.
  * @example

package/src/ui/control/fullscreen_control.ts

@@ -17,7 +17,7 @@ type FullscreenOptions = {
  * is in fullscreen mode, and is restored when the map exist fullscreen mode.
  *
  * @implements {IControl}
- * @param {Object} [options]
+ * @param {FullscreenOptions} [options]
  * @param {HTMLElement} [options.container] `container` is the [compatible DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen#Compatible_elements) which should be made full screen. By default, the map container element will be made full screen.
  *
  * @example

package/src/ui/control/geolocate_control.ts

@@ -55,12 +55,12 @@ let noTimeout = false;
  * These interaction states can't be controlled programmatically, rather they are set based on user interactions.
  *
  * @implements {IControl}
- * @param {Object} [options]
- * @param {Object} [options.positionOptions={enableHighAccuracy: false, timeout: 6000}] A Geolocation API [PositionOptions](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions) object.
- * @param {Object} [options.fitBoundsOptions={maxZoom: 15}] A {@link Map#fitBounds} options object to use when the map is panned and zoomed to the user's location. The default is to use a `maxZoom` of 15 to limit how far the map will zoom in for very accurate locations.
- * @param {Object} [options.trackUserLocation=false] If `true` the Geolocate Control becomes a toggle button and when active the map will receive updates to the user's location as it changes.
- * @param {Object} [options.showAccuracyCircle=true] By default, if showUserLocation is `true`, a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to `false` to disable. Always disabled when showUserLocation is `false`.
- * @param {Object} [options.showUserLocation=true] By default a dot will be shown on the map at the user's location. Set to `false` to disable.
+ * @param {GeolocateOptions} [options]
+ * @param {PositionOptions} [options.positionOptions={enableHighAccuracy: false, timeout: 6000}] A Geolocation API [PositionOptions](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions) object.
+ * @param {FitBoundsOptions} [options.fitBoundsOptions={maxZoom: 15}] A {@link Map#fitBounds} options object to use when the map is panned and zoomed to the user's location. The default is to use a `maxZoom` of 15 to limit how far the map will zoom in for very accurate locations.
+ * @param {boolean} [options.trackUserLocation=false] If `true` the Geolocate Control becomes a toggle button and when active the map will receive updates to the user's location as it changes.
+ * @param {boolean} [options.showAccuracyCircle=true] By default, if showUserLocation is `true`, a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to `false` to disable. Always disabled when showUserLocation is `false`.
+ * @param {boolean} [options.showUserLocation=true] By default a dot will be shown on the map at the user's location. Set to `false` to disable.
  *
  * @example
  * map.addControl(new maplibregl.GeolocateControl({

package/src/ui/control/navigation_control.ts

@@ -24,10 +24,10 @@ const defaultOptions: NavigationOptions = {
  * A `NavigationControl` control contains zoom buttons and a compass.
  *
  * @implements {IControl}
- * @param {Object} [options]
- * @param {Boolean} [options.showCompass=true] If `true` the compass button is included.
- * @param {Boolean} [options.showZoom=true] If `true` the zoom-in and zoom-out buttons are included.
- * @param {Boolean} [options.visualizePitch=false] If `true` the pitch is visualized by rotating X-axis of compass.
+ * @param {NavigationOptions} [options]
+ * @param {boolean} [options.showCompass=true] If `true` the compass button is included.
+ * @param {boolean} [options.showZoom=true] If `true` the zoom-in and zoom-out buttons are included.
+ * @param {boolean} [options.visualizePitch=false] If `true` the pitch is visualized by rotating X-axis of compass.
  * @example
  * var nav = new maplibregl.NavigationControl();
  * map.addControl(nav, 'top-left');

package/src/ui/control/scale_control.ts

@@ -20,7 +20,7 @@ const defaultOptions: ScaleOptions = {
  * A `ScaleControl` control displays the ratio of a distance on the map to the corresponding distance on the ground.
  *
  * @implements {IControl}
- * @param {Object} [options]
+ * @param {ScaleOptions} [options]
  * @param {number} [options.maxWidth='100'] The maximum length of the scale control in pixels.
  * @param {string} [options.unit='metric'] Unit of the distance (`'imperial'`, `'metric'` or `'nautical'`).
  * @example

package/src/ui/control/terrain_control.ts

@@ -6,13 +6,12 @@ import type {IControl} from './control';
 import type {TerrainSpecification} from '@maplibre/maplibre-gl-style-spec';
 
 /**
- * An `TerrainControl` control adds a button to turn terrain on and off.
+ * A `TerrainControl` control contains a button for turning the terrain on and off.
  *
  * @implements {IControl}
- * @param {Object} [options]
- * @param {string} [options.id] The ID of the raster-dem source to use.
- * @param {Object} [options.options]
- * @param {number} [options.options.exaggeration]
+ * @param {TerrainSpecification} [options]
+ * @param {string} [options.source] The ID of the raster-dem source to use.
+ * @param {number} [options.exaggeration]
  * @example
  * var map = new maplibregl.Map({TerrainControl: false})
  *     .addControl(new maplibregl.TerrainControl({

package/src/ui/map.test.ts

@@ -20,6 +20,7 @@ import Transform from '../geo/transform';
 import {StyleImageInterface} from '../style/style_image';
 import Style from '../style/style';
 import {MapSourceDataEvent} from './events';
+import config from '../util/config';
 
 function createStyleSource() {
     return {
@@ -164,6 +165,16 @@ describe('Map', () => {
     });
 
     describe('#mapOptions', () => {
+        test('maxTileCacheZoomLevels: Default value is set', () => {
+            const map = createMap();
+            expect(map._maxTileCacheZoomLevels).toBe(config.MAX_TILE_CACHE_ZOOM_LEVELS);
+        });
+
+        test('maxTileCacheZoomLevels: Value can be set via map options', () => {
+            const map = createMap({maxTileCacheZoomLevels: 1});
+            expect(map._maxTileCacheZoomLevels).toBe(1);
+        });
+
         test('Style validation is enabled by default', () => {
             let validationOption = false;
             jest.spyOn(Style.prototype, 'loadJSON').mockImplementationOnce((styleJson, options) => {

package/src/ui/map.ts

@@ -64,6 +64,7 @@ import type {ControlPosition, IControl} from './control/control';
 import type {MapGeoJSONFeature} from '../util/vectortile_to_geojson';
 import Terrain from '../render/terrain';
 import RenderToTexture from '../render/render_to_texture';
+import config from '../util/config';
 
 const version = packageJSON.version;
 /* eslint-enable no-use-before-define */
@@ -101,6 +102,7 @@ export type MapOptions = {
     pitch?: number;
     renderWorldCopies?: boolean;
     maxTileCacheSize?: number;
+    maxTileCacheZoomLevels?: number;
     transformRequest?: RequestTransformFunction;
     transformCameraUpdate?: CameraUpdateTransformFunction;
     locale?: any;
@@ -194,6 +196,7 @@ const defaultOptions = {
     renderWorldCopies: true,
     refreshExpiredTiles: true,
     maxTileCacheSize: null,
+    maxTileCacheZoomLevels: config.MAX_TILE_CACHE_ZOOM_LEVELS,
     localIdeographFontFamily: 'sans-serif',
     transformRequest: null,
     transformCameraUpdate: null,
@@ -254,7 +257,7 @@ const defaultOptions = {
  * @param {boolean|Object} [options.touchPitch=true] If `true`, the "drag to pitch" interaction is enabled. An `Object` value is passed as options to {@link TwoFingersTouchPitchHandler#enable}.
  * @param {boolean|GestureOptions} [options.cooperativeGestures=undefined] If `true` or set to an options object, map is only accessible on desktop while holding Command/Ctrl and only accessible on mobile with two fingers. Interacting with the map using normal gestures will trigger an informational screen. With this option enabled, "drag to pitch" requires a three-finger gesture. Cooperative gestures are disabled when a map enters fullscreen using {@link #FullscreenControl}.
  * @param {boolean} [options.trackResize=true] If `true`, the map will automatically resize when the browser window resizes.
- * @param {LngLatLike} [options.center=[0, 0]] The initial geographical centerpoint of the map. If `center` is not specified in the constructor options, MapLibre 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, 0]` Note: MapLibre GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON.
+ * @param {LngLatLike} [options.center=[0, 0]] The initial geographical centerpoint of the map. If `center` is not specified in the constructor options, MapLibre 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, 0]` Note: MapLibre GL JS uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON.
  * @param {number} [options.zoom=0] The initial zoom level of the map. If `zoom` is not specified in the constructor options, MapLibre 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.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, MapLibre 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-85). If `pitch` is not specified in the constructor options, MapLibre 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`. Values greater than 60 degrees are experimental and may result in rendering issues. If you encounter any, please raise an issue with details in the MapLibre project.
@@ -265,8 +268,9 @@ const defaultOptions = {
  * container, there will be blank space beyond 180 and -180 degrees longitude.
  * - Features that cross 180 and -180 degrees longitude will be cut in two (with one portion on the right edge of the
  * map and the other on the left edge of the map) at every zoom level.
- * @param {number} [options.maxTileCacheSize=null] The maximum 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.
- * @param {string} [options.validateStyle=true] If false, style validation will be skipped. Useful in production environment.
+ * @param {number} [options.maxTileCacheSize=null] The maximum 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 which can be set using `maxTileCacheZoomLevels` constructor options.
+ * @param {number} [options.maxTileCacheZoomLevels=5] The maximum number of zoom levels for which to store tiles for a given source. Tile cache dynamic size is calculated by multiplying `maxTileCacheZoomLevels` with approx number of tiles in the viewport for a given source.
+ * @param {boolean} [options.validateStyle=true] If false, style validation will be skipped. Useful in production environment.
  * @param {string} [options.localIdeographFontFamily='sans-serif'] Defines a CSS
  * font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs', 'Hiragana', 'Katakana' and 'Hangul Syllables' ranges.
  * In these ranges, font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold).
@@ -321,6 +325,7 @@ class Map extends Camera {
     _vertices: boolean;
     _canvas: HTMLCanvasElement;
     _maxTileCacheSize: number;
+    _maxTileCacheZoomLevels: number;
     _frame: Cancelable;
     _styleDirty: boolean;
     _sourcesDirty: boolean;
@@ -434,6 +439,7 @@ class Map extends Camera {
         this._cooperativeGestures = options.cooperativeGestures;
         this._metaKey = navigator.platform.indexOf('Mac') === 0 ? 'metaKey' : 'ctrlKey';
         this._maxTileCacheSize = options.maxTileCacheSize;
+        this._maxTileCacheZoomLevels = options.maxTileCacheZoomLevels;
         this._failIfMajorPerformanceCaveat = options.failIfMajorPerformanceCaveat;
         this._preserveDrawingBuffer = options.preserveDrawingBuffer;
         this._antialias = options.antialias;
@@ -1328,7 +1334,7 @@ class Map extends Camera {
      * @param {FilterSpecification} [options.filter] (optional) A [filter](https://maplibre.org/maplibre-style-spec/layers/#filter)
      * to limit query results.
      * @param {Array<string>} [options.availableImages] (optional) An array of string representing the available images
-     * @param {boolean} [options.validate=true] (optional) Whether to check if the [options.filter] conforms to the MapLibre GL Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
+     * @param {boolean} [options.validate=true] (optional) Whether to check if the [options.filter] conforms to the MapLibre Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
      *
      * @returns {Array<MapGeoJSONFeature>} An array of MapGeoJSONFeature objects.
      *
@@ -1419,7 +1425,7 @@ class Map extends Camera {
      * to query. *For vector tile sources, this parameter is required.* For GeoJSON sources, it is ignored.
      * @param {Array} [parameters.filter] A [filter](https://maplibre.org/maplibre-style-spec/layers/#filter)
      * to limit query results.
-     * @param {boolean} [parameters.validate=true] Whether to check if the [parameters.filter] conforms to the MapLibre GL Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
+     * @param {boolean} [parameters.validate=true] Whether to check if the [parameters.filter] conforms to the MapLibre Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
      *
      * @returns {Array<MapGeoJSONFeature>} An array of MapGeoJSONFeature objects.
      *
@@ -2272,7 +2278,7 @@ class Map extends Camera {
      * @param {Array | null | undefined} filter The filter, conforming to the MapLibre Style Specification's
      * [filter definition](https://maplibre.org/maplibre-style-spec/layers/#filter).  If `null` or `undefined` is provided, the function removes any existing filter from the layer.
      * @param {Object} [options] Options object.
-     * @param {boolean} [options.validate=true] Whether to check if the filter conforms to the MapLibre GL Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
+     * @param {boolean} [options.validate=true] Whether to check if the filter conforms to the MapLibre Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
      * @returns {Map} `this`
      *
      * @example
@@ -2310,7 +2316,7 @@ class Map extends Camera {
      * @param {*} value The value of the paint property to set.
      * Must be of a type appropriate for the property, as defined in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/).
      * @param {Object} [options] Options object.
-     * @param {boolean} [options.validate=true] Whether to check if `value` conforms to the MapLibre GL Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
+     * @param {boolean} [options.validate=true] Whether to check if `value` conforms to the MapLibre Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
      * @returns {Map} `this`
      * @example
      * map.setPaintProperty('my-layer', 'fill-color', '#faafee');
@@ -2340,7 +2346,7 @@ class Map extends Camera {
      * @param {string} name The name of the layout property to set.
      * @param {*} value The value of the layout property. Must be of a type appropriate for the property, as defined in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/).
      * @param {Object} [options] Options object.
-     * @param {boolean} [options.validate=true] Whether to check if `value` conforms to the MapLibre GL Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
+     * @param {boolean} [options.validate=true] Whether to check if `value` conforms to the MapLibre Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
      * @returns {Map} `this`
      * @example
      * map.setLayoutProperty('my-layer', 'visibility', 'none');
@@ -2366,7 +2372,7 @@ class Map extends Camera {
      *
      * @param glyphsUrl Glyph URL to set. Must conform to the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/glyphs/).
      * @param {StyleSetterOptions} [options] Options object.
-     * @param {boolean} [options.validate=true] Whether to check if the filter conforms to the MapLibre GL Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
+     * @param {boolean} [options.validate=true] Whether to check if the filter conforms to the MapLibre Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
      * @returns {Map} `this`
      * @example
      * map.setGlyphs('https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf');
@@ -2438,7 +2444,7 @@ class Map extends Camera {
      *
      * @param spriteUrl Sprite URL to set.
      * @param {StyleSetterOptions} [options] Options object.
-     * @param {boolean} [options.validate=true] Whether to check if the filter conforms to the MapLibre GL Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
+     * @param {boolean} [options.validate=true] Whether to check if the filter conforms to the MapLibre Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
      * @returns {Map} `this`
      * @example
      * map.setSprite('YOUR_SPRITE_URL');
@@ -2458,7 +2464,7 @@ class Map extends Camera {
      *
      * @param light Light properties to set. Must conform to the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/#light).
      * @param {Object} [options] Options object.
-     * @param {boolean} [options.validate=true] Whether to check if the filter conforms to the MapLibre GL Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
+     * @param {boolean} [options.validate=true] Whether to check if the filter conforms to the MapLibre Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
      * @returns {Map} `this`
      * @example
      * var layerVisibility = map.getLayoutProperty('my-layer', 'visibility');
@@ -2743,7 +2749,8 @@ class Map extends Camera {
         }, {once: true});
 
         const gl =
-            this._canvas.getContext('webgl2', attributes) as WebGL2RenderingContext;
+        this._canvas.getContext('webgl2', attributes) as WebGL2RenderingContext ||
+        this._canvas.getContext('webgl', attributes) as WebGLRenderingContext;
 
         if (!gl) {
             const msg = 'Failed to initialize WebGL';

package/src/ui/marker.ts

@@ -27,9 +27,9 @@ type MarkerOptions = {
 
 /**
  * Creates a marker component
- * @param {Object} [options]
+ * @param {MarkerOptions} [options]
  * @param {HTMLElement} [options.element] DOM element to use as a marker. The default is a light blue, droplet-shaped SVG marker.
- * @param {string} [options.anchor='center'] A string indicating the part of the Marker that should be positioned closest to the coordinate set via {@link Marker#setLngLat}.
+ * @param {PositionAnchor} [options.anchor='center'] A string indicating the part of the Marker that should be positioned closest to the coordinate set via {@link Marker#setLngLat}.
  * Options are `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`.
  * @param {PointLike} [options.offset] The offset in pixels as a {@link PointLike} object to apply relative to the element's center. Negatives indicate left and up.
  * @param {string} [options.color='#3FB1CE'] The color to use for the default marker if options.element is not provided. The default is light blue.

package/src/ui/popup.ts

@@ -48,7 +48,7 @@ const focusQuerySelector = [
 /**
  * A popup component.
  *
- * @param {Object} [options]
+ * @param {PopupOptions} [options]
  * @param {boolean} [options.closeButton=true] If `true`, a close button will appear in the
  * top right corner of the popup.
  * @param {boolean} [options.closeOnClick=true] If `true`, the popup will closed when the
@@ -57,7 +57,7 @@ const focusQuerySelector = [
  * map moves.
  * @param {boolean} [options.focusAfterOpen=true] If `true`, the popup will try to focus the
  * first focusable element inside the popup.
- * @param {string} [options.anchor] - A string indicating the part of the Popup that should
+ * @param {PositionAnchor} [options.anchor] - A string indicating the part of the Popup that should
  * be positioned closest to the coordinate set via {@link Popup#setLngLat}.
  * Options are `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`,
  * `'top-right'`, `'bottom-left'`, and `'bottom-right'`. If unset the anchor will be

package/src/util/browser.ts

@@ -23,12 +23,12 @@ const exported = {
         return {cancel: () => cancelAnimationFrame(frame)};
     },
 
-    getImageData(img: CanvasImageSource, padding: number = 0): ImageData {
+    getImageData(img:  HTMLImageElement | ImageBitmap, padding: number = 0): ImageData {
         const context = this.getImageCanvasContext(img);
         return context.getImageData(-padding, -padding, img.width as number + 2 * padding, img.height as number + 2 * padding);
     },
 
-    getImageCanvasContext(img: CanvasImageSource): CanvasRenderingContext2D {
+    getImageCanvasContext(img: HTMLImageElement | ImageBitmap): CanvasRenderingContext2D {
         const canvas = window.document.createElement('canvas') as HTMLCanvasElement;
         const context = canvas.getContext('2d', {willReadFrequently: true});
         if (!context) {

package/src/util/config.ts

@@ -4,6 +4,7 @@ import type {RequestParameters, ResponseCallback} from './ajax';
 type Config = {
     MAX_PARALLEL_IMAGE_REQUESTS: number;
     MAX_PARALLEL_IMAGE_REQUESTS_PER_FRAME: number;
+    MAX_TILE_CACHE_ZOOM_LEVELS: number;
     REGISTERED_PROTOCOLS: {[x: string]: (requestParameters: RequestParameters, callback: ResponseCallback<any>) => Cancelable};
     WORKER_URL: string;
 };
@@ -11,6 +12,7 @@ type Config = {
 const config: Config = {
     MAX_PARALLEL_IMAGE_REQUESTS: 16,
     MAX_PARALLEL_IMAGE_REQUESTS_PER_FRAME: 8,
+    MAX_TILE_CACHE_ZOOM_LEVELS: 5,
     REGISTERED_PROTOCOLS: {},
     WORKER_URL: ''
 };

package/src/util/test/mock_webgl.ts

@@ -73,7 +73,10 @@ export function setWebGlContext() {
     const originalGetContext = global.HTMLCanvasElement.prototype.getContext;
 
     function imitateWebGlGetContext(type, attributes) {
-        if (type === 'webgl2' || type === 'webgl') {
+        if (type === 'webgl2') {
+            return null;
+        }
+        if (type === 'webgl') {
             if (!this._webGLContext) {
                 this._webGLContext = gl(this.width, this.height, attributes);
                 if (!this._webGLContext) {

package/src/util/webp_supported.ts

@@ -5,7 +5,7 @@ const exported = {
 
 export default exported;
 
-let glForTesting: WebGL2RenderingContext;
+let glForTesting: WebGLRenderingContext|WebGL2RenderingContext;
 let webpCheckComplete = false;
 let webpImgTest;
 let webpImgTestOnloadComplete = false;
@@ -24,7 +24,7 @@ if (typeof document !== 'undefined') {
     webpImgTest.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA=';
 }
 
-function testSupport(gl: WebGL2RenderingContext) {
+function testSupport(gl: WebGLRenderingContext | WebGL2RenderingContext) {
     if (webpCheckComplete || !webpImgTest) return;
 
     // HTMLImageElement.complete is set when an image is done loading it's source
@@ -41,7 +41,7 @@ function testSupport(gl: WebGL2RenderingContext) {
     }
 }
 
-function testWebpTextureUpload(gl: WebGL2RenderingContext) {
+function testWebpTextureUpload(gl: WebGLRenderingContext|WebGL2RenderingContext) {
     // Edge 18 supports WebP but not uploading a WebP image to a gl texture
     // Test support for this before allowing WebP images.
     // https://github.com/mapbox/mapbox-gl-js/issues/7671