maplibre-gl 3.1.0 → 3.2.0-pre.2

package/src/source/video_source.ts

@@ -1,15 +1,15 @@
 import {getVideo} from '../util/ajax';
 import {ResourceType} from '../util/request_manager';
 
-import ImageSource from './image_source';
+import {ImageSource} from './image_source';
 import rasterBoundsAttributes from '../data/raster_bounds_attributes';
-import SegmentVector from '../data/segment';
-import Texture from '../render/texture';
+import {SegmentVector} from '../data/segment';
+import {Texture} from '../render/texture';
 import {Event, ErrorEvent} from '../util/evented';
 import {ValidationError} from '@maplibre/maplibre-gl-style-spec';
 
-import type Map from '../ui/map';
-import type Dispatcher from '../util/dispatcher';
+import type {Map} from '../ui/map';
+import type {Dispatcher} from '../util/dispatcher';
 import type {Evented} from '../util/evented';
 import type {VideoSourceSpecification} from '@maplibre/maplibre-gl-style-spec';
 
@@ -17,7 +17,10 @@ import type {VideoSourceSpecification} from '@maplibre/maplibre-gl-style-spec';
  * A data source containing video.
  * (See the [Style Specification](https://maplibre.org/maplibre-style-spec/#sources-video) for detailed documentation of options.)
  *
+ * @group Sources
+ *
  * @example
+ * ```ts
  * // add to map
  * map.addSource('some id', {
  *    type: 'video',
@@ -34,7 +37,7 @@ import type {VideoSourceSpecification} from '@maplibre/maplibre-gl-style-spec';
  * });
  *
  * // update
- * var mySource = map.getSource('some id');
+ * let mySource = map.getSource('some id');
  * mySource.setCoordinates([
  *     [-76.54335737228394, 39.18579907229748],
  *     [-76.52803659439087, 39.1838364847587],
@@ -43,17 +46,15 @@ import type {VideoSourceSpecification} from '@maplibre/maplibre-gl-style-spec';
  * ]);
  *
  * map.removeSource('some id');  // remove
- * @see [Add a video](https://maplibre.org/maplibre-gl-js-docs/example/video-on-a-map/)
+ * ```
+ * @see [Add a video](https://maplibre.org/maplibre-gl-js/docs/examples/video-on-a-map/)
  */
-class VideoSource extends ImageSource {
+export class VideoSource extends ImageSource {
     options: VideoSourceSpecification;
     urls: Array<string>;
     video: HTMLVideoElement;
     roundZoom: boolean;
 
-    /**
-     * @private
-     */
     constructor(id: string, options: VideoSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
         super(id, options, dispatcher, eventedParent);
         this.roundZoom = true;
@@ -61,7 +62,7 @@ class VideoSource extends ImageSource {
         this.options = options;
     }
 
-    load() {
+    load = () => {
         this._loaded = false;
         const options = this.options;
 
@@ -91,7 +92,7 @@ class VideoSource extends ImageSource {
                 this._finishLoading();
             }
         });
-    }
+    };
 
     /**
      * Pauses the video.
@@ -113,7 +114,6 @@ class VideoSource extends ImageSource {
 
     /**
      * Sets playback to a timestamp, in seconds.
-     * @private
      */
     seek(seconds: number) {
         if (this.video) {
@@ -127,9 +127,9 @@ class VideoSource extends ImageSource {
     /**
      * Returns the HTML `video` element.
      *
-     * @returns {HTMLVideoElement} The HTML `video` element.
+     * @returns The HTML `video` element.
      */
-    getVideo() {
+    getVideo(): HTMLVideoElement {
         return this.video;
     }
 
@@ -146,14 +146,9 @@ class VideoSource extends ImageSource {
     /**
      * Sets the video's coordinates and re-renders the map.
      *
-     * @method setCoordinates
-     * @instance
-     * @memberof VideoSource
-     * @returns {VideoSource} this
+     * @returns `this`
      */
-    // setCoordinates inherited from ImageSource
-
-    prepare() {
+    prepare = (): this => {
         if (Object.keys(this.tiles).length === 0 || this.video.readyState < 2) {
             return; // not enough data for current position
         }
@@ -190,19 +185,17 @@ class VideoSource extends ImageSource {
         if (newTilesLoaded) {
             this.fire(new Event('data', {dataType: 'source', sourceDataType: 'idle', sourceId: this.id}));
         }
-    }
+    };
 
-    serialize() {
+    serialize = (): VideoSourceSpecification => {
         return {
             type: 'video',
             urls: this.urls,
             coordinates: this.coordinates
         };
-    }
+    };
 
     hasTransition() {
         return this.video && !this.video.paused;
     }
 }
-
-export default VideoSource;

package/src/source/worker.ts

@@ -1,9 +1,8 @@
-import Actor from '../util/actor';
-
-import StyleLayerIndex from '../style/style_layer_index';
-import VectorTileWorkerSource from './vector_tile_worker_source';
-import RasterDEMTileWorkerSource from './raster_dem_tile_worker_source';
-import GeoJSONWorkerSource from './geojson_worker_source';
+import {Actor} from '../util/actor';
+import {StyleLayerIndex} from '../style/style_layer_index';
+import {VectorTileWorkerSource} from './vector_tile_worker_source';
+import {RasterDEMTileWorkerSource} from './raster_dem_tile_worker_source';
+import {GeoJSONWorkerSource} from './geojson_worker_source';
 import {plugin as globalRTLTextPlugin} from './rtl_text_plugin';
 import {isWorker} from '../util/util';
 
@@ -22,7 +21,7 @@ import type {LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
 import type {PluginState} from './rtl_text_plugin';
 
 /**
- * @private
+ * The Worker class responsidble for background thread related execution
  */
 export default class Worker {
     self: WorkerGlobalScopeInterface;
@@ -174,7 +173,6 @@ export default class Worker {
      * Load a {@link WorkerSource} script at params.url.  The script is run
      * (using importScripts) with `registerWorkerSource` in scope, which is a
      * function taking `(name, workerSourceObject)`.
-     *  @private
      */
     loadWorkerSource(map: string, params: {
         url: string;

package/src/source/worker_source.ts

@@ -1,12 +1,12 @@
 import type {RequestParameters} from '../util/ajax';
 import type {RGBAImage, AlphaImage} from '../util/image';
 import type {GlyphPositions} from '../render/glyph_atlas';
-import type ImageAtlas from '../render/image_atlas';
+import type {ImageAtlas} from '../render/image_atlas';
 import type {OverscaledTileID} from './tile_id';
 import type {Bucket} from '../data/bucket';
-import type FeatureIndex from '../data/feature_index';
+import type {FeatureIndex} from '../data/feature_index';
 import type {CollisionBoxArray} from '../data/array_types.g';
-import type DEMData from '../data/dem_data';
+import type {DEMData} from '../data/dem_data';
 import type {StyleGlyph} from '../style/style_glyph';
 import type {StyleImage} from '../style/style_image';
 import type {PromoteIdSpecification} from '@maplibre/maplibre-gl-style-spec';
@@ -40,6 +40,9 @@ export type WorkerDEMTileParameters = TileParameters & {
     encoding: 'mapbox' | 'terrarium';
 };
 
+/**
+ * The worker tile's result type
+ */
 export type WorkerTileResult = {
     buckets: Array<Bucket>;
     imageAtlas: ImageAtlas;
@@ -71,11 +74,6 @@ export type WorkerDEMTileCallback = (err?: Error | null, result?: DEMData | null
  * `dispatcher.getActor().send('source-type.methodname', params, callback)`.
  *
  * @see {@link Map#addSourceType}
- * @private
- *
- * @class WorkerSource
- * @param actor
- * @param layerIndex
  */
 export interface WorkerSource {
     availableImages: Array<string>;

package/src/source/worker_tile.test.ts

@@ -1,9 +1,9 @@
-import WorkerTile from '../source/worker_tile';
-import Wrapper, {Feature} from '../source/geojson_wrapper';
+import {WorkerTile} from '../source/worker_tile';
+import {GeoJSONWrapper, Feature} from '../source/geojson_wrapper';
 import {OverscaledTileID} from '../source/tile_id';
-import StyleLayerIndex from '../style/style_layer_index';
+import {StyleLayerIndex} from '../style/style_layer_index';
 import {WorkerTileParameters} from './worker_source';
-import Actor from '../util/actor';
+import {Actor} from '../util/actor';
 import {VectorTile} from '@mapbox/vector-tile';
 
 function createWorkerTile() {
@@ -19,7 +19,7 @@ function createWorkerTile() {
 }
 
 function createWrapper() {
-    return new Wrapper([{
+    return new GeoJSONWrapper([{
         type: 1,
         geometry: [0, 0],
         tags: {}

package/src/source/worker_tile.ts

@@ -1,22 +1,21 @@
-import FeatureIndex from '../data/feature_index';
-
+import {FeatureIndex} from '../data/feature_index';
 import {performSymbolLayout} from '../symbol/symbol_layout';
 import {CollisionBoxArray} from '../data/array_types.g';
-import DictionaryCoder from '../util/dictionary_coder';
-import SymbolBucket from '../data/bucket/symbol_bucket';
-import LineBucket from '../data/bucket/line_bucket';
-import FillBucket from '../data/bucket/fill_bucket';
-import FillExtrusionBucket from '../data/bucket/fill_extrusion_bucket';
+import {DictionaryCoder} from '../util/dictionary_coder';
+import {SymbolBucket} from '../data/bucket/symbol_bucket';
+import {LineBucket} from '../data/bucket/line_bucket';
+import {FillBucket} from '../data/bucket/fill_bucket';
+import {FillExtrusionBucket} from '../data/bucket/fill_extrusion_bucket';
 import {warnOnce, mapObject} from '../util/util';
-import ImageAtlas from '../render/image_atlas';
-import GlyphAtlas from '../render/glyph_atlas';
-import EvaluationParameters from '../style/evaluation_parameters';
+import {ImageAtlas} from '../render/image_atlas';
+import {GlyphAtlas} from '../render/glyph_atlas';
+import {EvaluationParameters} from '../style/evaluation_parameters';
 import {OverscaledTileID} from './tile_id';
 
 import type {Bucket} from '../data/bucket';
-import type Actor from '../util/actor';
-import type StyleLayer from '../style/style_layer';
-import type StyleLayerIndex from '../style/style_layer_index';
+import type {Actor} from '../util/actor';
+import type {StyleLayer} from '../style/style_layer';
+import type {StyleLayerIndex} from '../style/style_layer_index';
 import type {StyleImage} from '../style/style_image';
 import type {StyleGlyph} from '../style/style_glyph';
 import type {
@@ -26,7 +25,7 @@ import type {
 import type {PromoteIdSpecification} from '@maplibre/maplibre-gl-style-spec';
 import type {VectorTile} from '@mapbox/vector-tile';
 
-class WorkerTile {
+export class WorkerTile {
     tileID: OverscaledTileID;
     uid: string;
     zoom: number;
@@ -232,5 +231,3 @@ function recalculateLayers(layers: ReadonlyArray<StyleLayer>, zoom: number, avai
         layer.recalculate(parameters, availableImages);
     }
 }
-
-export default WorkerTile;

package/src/style/create_style_layer.ts

@@ -1,34 +1,39 @@
-import circle from './style_layer/circle_style_layer';
-import heatmap from './style_layer/heatmap_style_layer';
-import hillshade from './style_layer/hillshade_style_layer';
-import fill from './style_layer/fill_style_layer';
-import fillExtrusion from './style_layer/fill_extrusion_style_layer';
-import line from './style_layer/line_style_layer';
-import symbol from './style_layer/symbol_style_layer';
-import background from './style_layer/background_style_layer';
-import raster from './style_layer/raster_style_layer';
-import CustomStyleLayer from './style_layer/custom_style_layer';
-import type {CustomLayerInterface} from './style_layer/custom_style_layer';
+import {CircleStyleLayer} from './style_layer/circle_style_layer';
+import {HeatmapStyleLayer} from './style_layer/heatmap_style_layer';
+import {HillshadeStyleLayer} from './style_layer/hillshade_style_layer';
+import {FillStyleLayer} from './style_layer/fill_style_layer';
+import {FillExtrusionStyleLayer} from './style_layer/fill_extrusion_style_layer';
+import {LineStyleLayer} from './style_layer/line_style_layer';
+import {SymbolStyleLayer} from './style_layer/symbol_style_layer';
+import {BackgroundStyleLayer} from './style_layer/background_style_layer';
+import {RasterStyleLayer} from './style_layer/raster_style_layer';
+import {CustomStyleLayer, type CustomLayerInterface} from './style_layer/custom_style_layer';
 
 import type {LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
 
-const subclasses = {
-    circle,
-    heatmap,
-    hillshade,
-    fill,
-    'fill-extrusion': fillExtrusion,
-    line,
-    symbol,
-    background,
-    raster
-};
-
-export default function createStyleLayer(layer: LayerSpecification | CustomLayerInterface) {
+export function createStyleLayer(layer: LayerSpecification | CustomLayerInterface) {
     if (layer.type === 'custom') {
         return new CustomStyleLayer(layer);
-    } else {
-        return new subclasses[layer.type](layer);
+    }
+    switch (layer.type) {
+        case 'background':
+            return new BackgroundStyleLayer(layer);
+        case 'circle':
+            return new CircleStyleLayer(layer);
+        case 'fill':
+            return new FillStyleLayer(layer);
+        case 'fill-extrusion':
+            return new FillExtrusionStyleLayer(layer);
+        case 'heatmap':
+            return new HeatmapStyleLayer(layer);
+        case 'hillshade':
+            return new HillshadeStyleLayer(layer);
+        case 'line':
+            return new LineStyleLayer(layer);
+        case 'raster':
+            return new RasterStyleLayer(layer);
+        case 'symbol':
+            return new SymbolStyleLayer(layer);
     }
 }
 

package/src/style/evaluation_parameters.ts

@@ -1,4 +1,4 @@
-import ZoomHistory from './zoom_history';
+import {ZoomHistory} from './zoom_history';
 import {isStringInSupportedScript} from '../util/script_detection';
 import {plugin as rtlTextPlugin} from '../source/rtl_text_plugin';
 
@@ -10,7 +10,10 @@ export type CrossfadeParameters = {
     t: number;
 };
 
-class EvaluationParameters {
+/**
+ * A parameter that can be evaluated to a value
+ */
+export class EvaluationParameters {
     zoom: number;
     now: number;
     fadeDuration: number;
@@ -56,5 +59,3 @@ class EvaluationParameters {
             {fromScale: 0.5, toScale: 1, t: 1 - (1 - t) * fraction};
     }
 }
-
-export default EvaluationParameters;

package/src/style/format_section_override.test.ts

@@ -1,8 +1,8 @@
 import {EvaluationContext, FormattedSection, createExpression, StyleExpression, ZoomConstantExpression} from '@maplibre/maplibre-gl-style-spec';
 import properties from './style_layer/symbol_style_layer_properties.g';
 import {PossiblyEvaluatedPropertyValue} from './properties';
-import FormatSectionOverride from './format_section_override';
-import EvaluationParameters from './evaluation_parameters';
+import {FormatSectionOverride} from './format_section_override';
+import {EvaluationParameters} from './evaluation_parameters';
 
 describe('evaluate', () => {
 

package/src/style/format_section_override.ts

@@ -5,7 +5,7 @@ import {register} from '../util/web_worker_transfer';
 
 // This is an internal expression class. It is only used in GL JS and
 // has GL JS dependencies which can break the standalone style-spec module
-export default class FormatSectionOverride<T> implements Expression {
+export class FormatSectionOverride<T> implements Expression {
     type: Type;
     defaultValue: PossiblyEvaluatedPropertyValue<T>;
 

package/src/style/light.test.ts

@@ -1,7 +1,7 @@
-import Light from './light';
+import {Light} from './light';
 import {Color, latest as styleSpec, LightSpecification} from '@maplibre/maplibre-gl-style-spec';
 import {sphericalToCartesian} from '../util/util';
-import EvaluationParameters from './evaluation_parameters';
+import {EvaluationParameters} from './evaluation_parameters';
 import {TransitionParameters} from './properties';
 
 const spec = styleSpec.light;

package/src/style/light.ts

@@ -9,7 +9,7 @@ import {
 } from './validate_style';
 
 import type {StylePropertySpecification, LightSpecification} from '@maplibre/maplibre-gl-style-spec';
-import type EvaluationParameters from './evaluation_parameters';
+import type {EvaluationParameters} from './evaluation_parameters';
 import type {StyleSetterOptions} from '../style/style';
 import {Properties, Transitionable, Transitioning, PossiblyEvaluated, DataConstantProperty} from './properties';
 
@@ -69,7 +69,7 @@ let lightProperties: Properties<Props>;
 /*
  * Represents the light used to light extruded features.
  */
-class Light extends Evented {
+export class Light extends Evented {
     _transitionable: Transitionable<Props>;
     _transitioning: Transitioning<Props>;
     properties: PossiblyEvaluated<Props, PropsPossiblyEvaluated>;
@@ -87,7 +87,7 @@ class Light extends Evented {
         this._transitioning = this._transitionable.untransitioned();
     }
 
-    getLight() {
+    getLight(): LightSpecification {
         return this._transitionable.serialize();
     }
 
@@ -133,5 +133,3 @@ class Light extends Evented {
         })));
     }
 }
-
-export default Light;

package/src/style/load_glyph_range.test.ts

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import {RequestManager} from '../util/request_manager';
-import loadGlyphRange from './load_glyph_range';
+import {loadGlyphRange} from './load_glyph_range';
 import {fakeXhr} from 'nise';
 
 test('loadGlyphRange', done => {

package/src/style/load_glyph_range.ts

@@ -1,13 +1,13 @@
 import {getArrayBuffer} from '../util/ajax';
 import {ResourceType} from '../util/request_manager';
 
-import parseGlyphPBF from './parse_glyph_pbf';
+import {parseGlyphPbf} from './parse_glyph_pbf';
 
 import type {StyleGlyph} from './style_glyph';
 import type {RequestManager} from '../util/request_manager';
 import type {Callback} from '../types/callback';
 
-export default function loadGlyphRange(fontstack: string,
+export function loadGlyphRange(fontstack: string,
     range: number,
     urlTemplate: string,
     requestManager: RequestManager,
@@ -28,7 +28,7 @@ export default function loadGlyphRange(fontstack: string,
         } else if (data) {
             const glyphs = {};
 
-            for (const glyph of parseGlyphPBF(data)) {
+            for (const glyph of parseGlyphPbf(data)) {
                 glyphs[glyph.id] = glyph;
             }
 

package/src/style/load_sprite.test.ts

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import {RequestManager} from '../util/request_manager';
-import loadSprite from './load_sprite';
+import {loadSprite} from './load_sprite';
 import {fakeXhr} from 'nise';
 import * as util from '../util/util';
 

package/src/style/load_sprite.ts

@@ -1,8 +1,8 @@
 import {getJSON} from '../util/ajax';
-import ImageRequest from '../util/image_request';
+import {ImageRequest} from '../util/image_request';
 import {ResourceType} from '../util/request_manager';
 
-import browser from '../util/browser';
+import {browser} from '../util/browser';
 import {coerceSpriteToArray} from '../util/style';
 
 import type {SpriteSpecification} from '@maplibre/maplibre-gl-style-spec';
@@ -11,7 +11,7 @@ import type {RequestManager} from '../util/request_manager';
 import type {Callback} from '../types/callback';
 import type {Cancelable} from '../types/cancelable';
 
-export default function loadSprite(
+export function loadSprite(
     originalSprite: SpriteSpecification,
     requestManager: RequestManager,
     pixelRatio: number,

package/src/style/parse_glyph_pbf.ts

@@ -35,7 +35,7 @@ function readGlyph(tag: number, glyph: any, pbf: Protobuf) {
     else if (tag === 7) glyph.advance = pbf.readVarint();
 }
 
-export default function parseGlyphPbf(data: ArrayBuffer | Uint8Array): Array<StyleGlyph> {
+export function parseGlyphPbf(data: ArrayBuffer | Uint8Array): Array<StyleGlyph> {
     return new Protobuf(data).readFields(readFontstacks, []);
 }
 

package/src/style/pauseable_placement.ts

@@ -1,13 +1,13 @@
-import browser from '../util/browser';
+import {browser} from '../util/browser';
 
 import {Placement} from '../symbol/placement';
 
-import type Transform from '../geo/transform';
-import type StyleLayer from './style_layer';
-import type SymbolStyleLayer from './style_layer/symbol_style_layer';
-import type Tile from '../source/tile';
+import type {Transform} from '../geo/transform';
+import type {StyleLayer} from './style_layer';
+import type {SymbolStyleLayer} from './style_layer/symbol_style_layer';
+import type {Tile} from '../source/tile';
 import type {BucketPart} from '../symbol/placement';
-import Terrain from '../render/terrain';
+import {Terrain} from '../render/terrain';
 
 class LayerPlacement {
     _sortAcrossTiles: boolean;
@@ -60,7 +60,7 @@ class LayerPlacement {
     }
 }
 
-class PauseablePlacement {
+export class PauseablePlacement {
     placement: Placement;
     _done: boolean;
     _currentPlacementIndex: number;
@@ -135,5 +135,3 @@ class PauseablePlacement {
         return this.placement;
     }
 }
-
-export default PauseablePlacement;