maplibre-gl 3.1.0 → 3.2.0-pre.2

package/src/style/style.ts

@@ -1,33 +1,33 @@
 import {Event, ErrorEvent, Evented} from '../util/evented';
-import StyleLayer from './style_layer';
-import createStyleLayer from './create_style_layer';
-import loadSprite from './load_sprite';
-import ImageManager from '../render/image_manager';
-import GlyphManager from '../render/glyph_manager';
-import Light from './light';
-import LineAtlas from '../render/line_atlas';
+import {StyleLayer} from './style_layer';
+import {createStyleLayer} from './create_style_layer';
+import {loadSprite} from './load_sprite';
+import {ImageManager} from '../render/image_manager';
+import {GlyphManager} from '../render/glyph_manager';
+import {Light} from './light';
+import {LineAtlas} from '../render/line_atlas';
 import {pick, clone, extend, deepEqual, filterObject, mapObject} from '../util/util';
 import {coerceSpriteToArray} from '../util/style';
 import {getJSON, getReferrer, makeRequest} from '../util/ajax';
 import {ResourceType} from '../util/request_manager';
-import browser from '../util/browser';
-import Dispatcher from '../util/dispatcher';
+import {browser} from '../util/browser';
+import {Dispatcher} from '../util/dispatcher';
 import {validateStyle, emitValidationErrors as _emitValidationErrors} from './validate_style';
 import {getSourceType, setSourceType, Source} from '../source/source';
 import type {SourceClass} from '../source/source';
-import {queryRenderedFeatures, queryRenderedSymbols, querySourceFeatures} from '../source/query_features';
-import SourceCache from '../source/source_cache';
-import GeoJSONSource from '../source/geojson_source';
+import {QueryRenderedFeaturesOptions, QuerySourceFeatureOptions, queryRenderedFeatures, queryRenderedSymbols, querySourceFeatures} from '../source/query_features';
+import {SourceCache} from '../source/source_cache';
+import {GeoJSONSource} from '../source/geojson_source';
 import {latest as styleSpec, derefLayers as deref, emptyStyle, diff as diffStyles, operations as diffOperations} from '@maplibre/maplibre-gl-style-spec';
-import getWorkerPool from '../util/global_worker_pool';
+import {getGlobalWorkerPool} from '../util/global_worker_pool';
 import {
     registerForPluginStateChange,
     evented as rtlTextPluginEvented,
     triggerPluginCompletionEvent
 } from '../source/rtl_text_plugin';
-import PauseablePlacement from './pauseable_placement';
-import ZoomHistory from './zoom_history';
-import CrossTileSymbolIndex from '../symbol/cross_tile_symbol_index';
+import {PauseablePlacement} from './pauseable_placement';
+import {ZoomHistory} from './zoom_history';
+import {CrossTileSymbolIndex} from '../symbol/cross_tile_symbol_index';
 import {validateCustomStyleLayer} from './style_layer/custom_style_layer';
 import type {MapGeoJSONFeature} from '../util/vectortile_to_geojson';
 
@@ -40,12 +40,12 @@ const emitValidationErrors = (evented: Evented, errors?: ReadonlyArray<{
 }> | null) =>
     _emitValidationErrors(evented, errors && errors.filter(error => error.identifier !== 'source.canvas'));
 
-import type Map from '../ui/map';
-import type Transform from '../geo/transform';
+import type {Map} from '../ui/map';
+import type {Transform} from '../geo/transform';
 import type {StyleImage} from './style_image';
 import type {StyleGlyph} from './style_glyph';
 import type {Callback} from '../types/callback';
-import type EvaluationParameters from './evaluation_parameters';
+import type {EvaluationParameters} from './evaluation_parameters';
 import type {Placement} from '../symbol/placement';
 import type {Cancelable} from '../types/cancelable';
 import type {RequestParameters, ResponseCallback} from '../util/ajax';
@@ -85,19 +85,49 @@ const ignoredDiffOperations = pick(diffOperations, [
 ]);
 
 const empty = emptyStyle() as StyleSpecification;
-
+/**
+ * A feature identifier that is bound to a source
+ */
 export type FeatureIdentifier = {
+    /**
+     * Unique id of the feature.
+     */
     id?: string | number | undefined;
+    /**
+     * The id of the vector or GeoJSON source for the feature.
+     */
     source: string;
+    /**
+     * *For vector tile sources, `sourceLayer` is required.*
+     */
     sourceLayer?: string | undefined;
 };
 
+/**
+ * The options object related to the {@link Map}'s style related methods
+ */
 export type StyleOptions = {
+    /**
+     * If false, style validation will be skipped. Useful in production environment.
+     */
     validate?: boolean;
+    /**
+     * 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).
+     * Set to `false`, to enable font settings from the map's style for these glyph ranges.
+     * Forces a full update.
+     */
     localIdeographFontFamily?: string;
 };
 
+/**
+ * Supporting type to add validation to another style related type
+ */
 export type StyleSetterOptions = {
+    /**
+     * 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.
+     */
     validate?: boolean;
 };
 
@@ -108,12 +138,12 @@ export type StyleSetterOptions = {
  *      when a desired style is a certain combination of previous and incoming style
  *      when an incoming style requires modification based on external state
  *
- * @typedef {Function} TransformStyleFunction
- * @param {StyleSpecification | undefined} previousStyle The current style.
- * @param {StyleSpecification} nextStyle The next style.
- * @returns {boolean} resulting style that will to be applied to the map
+ * @param previousStyle - The current style.
+ * @param nextStyle - The next style.
+ * @returns resulting style that will to be applied to the map
  *
  * @example
+ * ```ts
  * map.setStyle('https://demotiles.maplibre.org/style.json', {
  *   transformStyle: (previousStyle, nextStyle) => ({
  *       ...nextStyle,
@@ -141,18 +171,30 @@ export type StyleSetterOptions = {
  *       ]
  *   })
  * });
+ * ```
  */
 export type TransformStyleFunction = (previous: StyleSpecification | undefined, next: StyleSpecification) => StyleSpecification;
 
+/**
+ * The options object related to the {@link Map}'s style related methods
+ */
 export type StyleSwapOptions = {
+    /**
+     * If false, force a 'full' update, removing the current style
+     * and building the given one instead of attempting a diff-based update.
+     */
     diff?: boolean;
+    /**
+     * TransformStyleFunction is a convenience function
+     * that allows to modify a style after it is fetched but before it is committed to the map state. Refer to {@link TransformStyleFunction}.
+     */
     transformStyle?: TransformStyleFunction;
 }
 
 /**
- * @private
+ * The Style base class
  */
-class Style extends Evented {
+export class Style extends Evented {
     map: Map;
     stylesheet: StyleSpecification;
     dispatcher: Dispatcher;
@@ -188,16 +230,13 @@ class Style extends Evented {
     placement: Placement;
     z: number;
 
-    // exposed to allow stubbing by unit tests
-    static getSourceType: typeof getSourceType;
-    static setSourceType: typeof setSourceType;
     static registerForPluginStateChange: typeof registerForPluginStateChange;
 
     constructor(map: Map, options: StyleOptions = {}) {
         super();
 
         this.map = map;
-        this.dispatcher = new Dispatcher(getWorkerPool(), this, map._getMapId());
+        this.dispatcher = new Dispatcher(getGlobalWorkerPool(), this, map._getMapId());
         this.imageManager = new ImageManager();
         this.imageManager.setEventedParent(this);
         this.glyphManager = new GlyphManager(map._requestManager, options.localIdeographFontFamily);
@@ -453,8 +492,8 @@ class Style extends Evented {
 
     /**
      * take an array of string IDs, and based on this._layers, generate an array of LayerSpecification
-     * @param ids an array of string IDs, for which serialized layers will be generated. If omitted, all serialized layers will be returned
-     * @returns {Array<LayerSpecification>} generated result
+     * @param ids - an array of string IDs, for which serialized layers will be generated. If omitted, all serialized layers will be returned
+     * @returns generated result
      */
     private _serializeByIds(ids?: Array<string>): Array<LayerSpecification> {
 
@@ -524,7 +563,6 @@ class Style extends Evented {
 
     /**
      * Apply queued style updates in a batch and recalculate zoom-dependent paint properties.
-     * @private
      */
     update(parameters: EvaluationParameters) {
         if (!this._loaded) {
@@ -645,8 +683,7 @@ class Style extends Evented {
      * May throw an Error ('Unimplemented: METHOD') if the mapbox-gl-style-spec
      * diff algorithm produces an operation that is not supported.
      *
-     * @returns {boolean} true if any changes were made; false otherwise
-     * @private
+     * @returns true if any changes were made; false otherwise
      */
     setState(nextState: StyleSpecification, options: StyleSwapOptions = {}) {
         this._checkLoaded();
@@ -752,11 +789,11 @@ class Style extends Evented {
 
     /**
      * Remove a source from this stylesheet, given its id.
-     * @param {string} id id of the source to remove
-     * @throws {Error} if no source is found with the given ID
-     * @returns {Map} The {@link Map} object.
+     * @param id - id of the source to remove
+     * @throws if no source is found with the given ID
+     * @returns `this`.
      */
-    removeSource(id: string) {
+    removeSource(id: string): this {
         this._checkLoaded();
 
         if (this.sourceCaches[id] === undefined) {
@@ -779,8 +816,8 @@ class Style extends Evented {
 
     /**
      * Set the data of a GeoJSON source, given its id.
-     * @param {string} id id of the source
-     * @param {GeoJSON|string} data GeoJSON source
+     * @param id - id of the source
+     * @param data - GeoJSON source
      */
     setGeoJSONSourceData(id: string, data: GeoJSON.GeoJSON | string) {
         this._checkLoaded();
@@ -794,9 +831,9 @@ class Style extends Evented {
     }
 
     /**
-     * Get a source by id.
-     * @param {string} id id of the desired source
-     * @returns {Source | undefined} source
+     * Get a source by ID.
+     * @param id - ID of the desired source
+     * @returns source
      */
     getSource(id: string): Source | undefined {
         return this.sourceCaches[id] && this.sourceCaches[id].getSource();
@@ -805,12 +842,12 @@ class Style extends Evented {
     /**
      * Add a layer to the map style. The layer will be inserted before the layer with
      * ID `before`, or appended if `before` is omitted.
-     * @param {Object | CustomLayerInterface} layerObject The style layer to add.
-     * @param {string} [before] ID of an existing layer to insert before
-     * @param {Object} options Style setter options.
-     * @returns {Map} The {@link Map} object.
+     * @param layerObject - The style layer to add.
+     * @param before - ID of an existing layer to insert before
+     * @param options - Style setter options.
+     * @returns `this`.
      */
-    addLayer(layerObject: LayerSpecification | CustomLayerInterface, before?: string, options: StyleSetterOptions = {}) {
+    addLayer(layerObject: LayerSpecification | CustomLayerInterface, before?: string, options: StyleSetterOptions = {}): this {
         this._checkLoaded();
 
         const id = layerObject.id;
@@ -882,8 +919,8 @@ class Style extends Evented {
     /**
      * Moves a layer to a different z-position. The layer will be inserted before the layer with
      * ID `before`, or appended if `before` is omitted.
-     * @param {string} id ID of the layer to move
-     * @param {string} [before] ID of an existing layer to insert before
+     * @param id - ID of the layer to move
+     * @param before - ID of an existing layer to insert before
      */
     moveLayer(id: string, before?: string) {
         this._checkLoaded();
@@ -917,8 +954,8 @@ class Style extends Evented {
      *
      * If no such layer exists, an `error` event is fired.
      *
-     * @param {string} id id of the layer to remove
-     * @fires error
+     * @param id - id of the layer to remove
+     * @event `error` - Fired if the layer does not exist
      */
     removeLayer(id: string) {
         this._checkLoaded();
@@ -953,8 +990,8 @@ class Style extends Evented {
     /**
      * Return the style layer object with the given `id`.
      *
-     * @param {string} id - id of the desired layer
-     * @returns {?Object} a layer, if one with the given `id` exists
+     * @param id - id of the desired layer
+     * @returns a layer, if one with the given `id` exists
      */
     getLayer(id: string): StyleLayer {
         return this._layers[id];
@@ -963,8 +1000,8 @@ class Style extends Evented {
     /**
      * checks if a specific layer is present within the style.
      *
-     * @param {string} id - id of the desired layer
-     * @returns {boolean} a boolean specifying if the given layer is present
+     * @param id - the id of the desired layer
+     * @returns a boolean specifying if the given layer is present
      */
     hasLayer(id: string): boolean {
         return id in this._layers;
@@ -1019,10 +1056,10 @@ class Style extends Evented {
 
     /**
      * Get a layer's filter object
-     * @param {string} layer the layer to inspect
-     * @returns {*} the layer's filter, if any
+     * @param layer - the layer to inspect
+     * @returns the layer's filter, if any
      */
-    getFilter(layer: string) {
+    getFilter(layer: string): FilterSpecification | void {
         return clone(this.getLayer(layer).filter);
     }
 
@@ -1043,9 +1080,9 @@ class Style extends Evented {
 
     /**
      * Get a layout property's value from a given layer
-     * @param {string} layerId the layer to inspect
-     * @param {string} name the name of the layout property
-     * @returns {*} the property value
+     * @param layerId - the layer to inspect
+     * @param name - the name of the layout property
+     * @returns the property value
      */
     getLayoutProperty(layerId: string, name: string) {
         const layer = this.getLayer(layerId);
@@ -1160,6 +1197,11 @@ class Style extends Evented {
     }
 
     serialize(): StyleSpecification {
+        // We return undefined before we're loaded, following the pattern of Map.getStyle() before
+        // the Style object is initialized.
+        // Internally, Style._validate() calls Style.serialize() but callers are responsible for
+        // calling Style._checkLoaded() first if their validation requires the style to be loaded.
+        if (!this._loaded) return;
 
         const sources = mapObject(this.sourceCaches, (source) => source.serialize());
         const layers = this._serializeByIds(this._order);
@@ -1266,7 +1308,7 @@ class Style extends Evented {
         return features;
     }
 
-    queryRenderedFeatures(queryGeometry: any, params: any, transform: Transform) {
+    queryRenderedFeatures(queryGeometry: any, params: QueryRenderedFeaturesOptions, transform: Transform) {
         if (params && params.filter) {
             this._validate(validateStyle.filter, 'queryRenderedFeatures.filter', params.filter, null, params);
         }
@@ -1328,11 +1370,7 @@ class Style extends Evented {
 
     querySourceFeatures(
         sourceID: string,
-        params?: {
-            sourceLayer?: string;
-            filter?: FilterSpecification;
-            validate?: boolean;
-        }
+        params?: QuerySourceFeatureOptions
     ) {
         if (params && params.filter) {
             this._validate(validateStyle.filter, 'querySourceFeatures.filter', params.filter, null, params);
@@ -1342,11 +1380,11 @@ class Style extends Evented {
     }
 
     addSourceType(name: string, SourceType: SourceClass, callback: Callback<void>) {
-        if (Style.getSourceType(name)) {
+        if (getSourceType(name)) {
             return callback(new Error(`A source type called "${name}" already exists.`));
         }
 
-        Style.setSourceType(name, SourceType);
+        setSourceType(name, SourceType);
 
         if (!SourceType.workerSourceURL) {
             return callback(null, null);
@@ -1594,10 +1632,10 @@ class Style extends Evented {
     /**
      * Add a sprite.
      *
-     * @param {string} id id of the desired sprite
-     * @param {string} url url to load the desired sprite from
-     * @param {StyleSetterOptions} [options] style setter options
-     * @param [completion] completion handler
+     * @param id - The id of the desired sprite
+     * @param url - The url to load the desired sprite from
+     * @param options - The style setter options
+     * @param completion - The completion handler
      */
     addSprite(id: string, url: string, options: StyleSetterOptions = {}, completion?: (err: Error) => void) {
         this._checkLoaded();
@@ -1618,7 +1656,7 @@ class Style extends Evented {
      * Remove a sprite by its id. When the last sprite is removed, the whole `this.stylesheet.sprite` object becomes
      * `undefined`. This falsy `undefined` value later prevents attempts to load the sprite when it's absent.
      *
-     * @param id the id of the sprite to remove
+     * @param id - the id of the sprite to remove
      */
     removeSprite(id: string) {
         this._checkLoaded();
@@ -1650,7 +1688,7 @@ class Style extends Evented {
     /**
      * Get the current sprite value.
      *
-     * @returns {Array} empty array when no sprite is set; id-url pairs otherwise
+     * @returns empty array when no sprite is set; id-url pairs otherwise
      */
     getSprite() {
         return coerceSpriteToArray(this.stylesheet.sprite);
@@ -1659,9 +1697,9 @@ class Style extends Evented {
     /**
      * Set a new value for the style's sprite.
      *
-     * @param {SpriteSpecification} sprite new sprite value
-     * @param {StyleSetterOptions} [options] style setter options
-     * @param [completion] completion handler
+     * @param sprite - new sprite value
+     * @param options - style setter options
+     * @param completion - the completion handler
      */
     setSprite(sprite: SpriteSpecification, options: StyleSetterOptions = {}, completion?: (err: Error) => void) {
         this._checkLoaded();
@@ -1683,8 +1721,4 @@ class Style extends Evented {
     }
 }
 
-Style.getSourceType = getSourceType;
-Style.setSourceType = setSourceType;
 Style.registerForPluginStateChange = registerForPluginStateChange;
-
-export default Style;

package/src/style/style_glyph.ts

@@ -1,5 +1,8 @@
 import type {AlphaImage} from '../util/image';
 
+/**
+ * The glyph's metrices
+ */
 export type GlyphMetrics = {
     width: number;
     height: number;
@@ -8,6 +11,9 @@ export type GlyphMetrics = {
     advance: number;
 };
 
+/**
+ * A style glyph type
+ */
 export type StyleGlyph = {
     id: number;
     bitmap: AlphaImage;

package/src/style/style_image.ts

@@ -1,7 +1,10 @@
 import {RGBAImage} from '../util/image';
 
-import type Map from '../ui/map';
+import type {Map} from '../ui/map';
 
+/**
+ * The sprite data
+ */
 export type SpriteOnDemandStyleImage = {
     width: number;
     height: number;
@@ -10,6 +13,9 @@ export type SpriteOnDemandStyleImage = {
     context: CanvasRenderingContext2D;
 };
 
+/**
+ * The style's image metadata
+ */
 export type StyleImageData = {
     data: RGBAImage;
     version?: number;
@@ -18,14 +24,35 @@ export type StyleImageData = {
     spriteData?: SpriteOnDemandStyleImage;
 };
 
+/**
+ * The style's image metadata
+ */
 export type StyleImageMetadata = {
+    /**
+     * The ratio of pixels in the image to physical pixels on the screen
+     */
     pixelRatio: number;
+    /**
+     * Whether the image should be interpreted as an SDF image
+     */
     sdf: boolean;
+    /**
+     * If `icon-text-fit` is used in a layer with this image, this option defines the part(s) of the image that can be stretched horizontally.
+     */
     stretchX?: Array<[number, number]>;
+    /**
+     * If `icon-text-fit` is used in a layer with this image, this option defines the part(s) of the image that can be stretched vertically.
+     */
     stretchY?: Array<[number, number]>;
+    /**
+     * If `icon-text-fit` is used in a layer with this image, this option defines the part of the image that can be covered by the content in `text-field`.
+     */
     content?: [number, number, number, number];
 };
 
+/**
+ * the style's image, including data and metedata
+ */
 export type StyleImage = StyleImageData & StyleImageMetadata;
 
 /**
@@ -37,11 +64,11 @@ export type StyleImage = StyleImageData & StyleImageMetadata;
  * {@link StyleImageInterface#render} method. The method is called every frame and
  * can be used to update the image.
  *
- * @interface StyleImageInterface
- * @see [Add an animated icon to the map.](https://maplibre.org/maplibre-gl-js-docs/example/add-image-animated/)
+ * @see [Add an animated icon to the map.](https://maplibre.org/maplibre-gl-js/docs/examples/add-image-animated/)
  *
  * @example
- * var flashingSquare = {
+ * ```ts
+ * let flashingSquare = {
  *     width: 64,
  *     height: 64,
  *     data: new Uint8Array(64 * 64 * 4),
@@ -55,16 +82,16 @@ export type StyleImage = StyleImageData & StyleImageMetadata;
  *         this.map.triggerRepaint();
  *
  *         // alternate between black and white based on the time
- *         var value = Math.round(Date.now() / 1000) % 2 === 0  ? 255 : 0;
+ *         let value = Math.round(Date.now() / 1000) % 2 === 0  ? 255 : 0;
  *
  *         // check if image needs to be changed
  *         if (value !== this.previousValue) {
  *             this.previousValue = value;
  *
- *             var bytesPerPixel = 4;
- *             for (var x = 0; x < this.width; x++) {
- *                 for (var y = 0; y < this.height; y++) {
- *                     var offset = (y * this.width + x) * bytesPerPixel;
+ *             let bytesPerPixel = 4;
+ *             for (let x = 0; x < this.width; x++) {
+ *                 for (let y = 0; y < this.height; y++) {
+ *                     let offset = (y * this.width + x) * bytesPerPixel;
  *                     this.data[offset + 0] = value;
  *                     this.data[offset + 1] = value;
  *                     this.data[offset + 2] = value;
@@ -79,20 +106,12 @@ export type StyleImage = StyleImageData & StyleImageMetadata;
  *  }
  *
  *  map.addImage('flashing_square', flashingSquare);
+ * ```
  */
 
 export interface StyleImageInterface {
-    /**
-     * @property {number} width
-     */
     width: number;
-    /**
-     * @property {number} height
-     */
     height: number;
-    /**
-     * @property {Uint8Array | Uint8ClampedArray} data
-     */
     data: Uint8Array | Uint8ClampedArray;
     /**
      * This method is called once before every frame where the icon will be used.
@@ -104,31 +123,18 @@ export interface StyleImageInterface {
      * If updates are infrequent it maybe easier to use {@link Map#updateImage} to update
      * the image instead of implementing this method.
      *
-     * @function
-     * @memberof StyleImageInterface
-     * @instance
-     * @name render
-     * @return {boolean} `true` if this method updated the image. `false` if the image was not changed.
+     * @returns `true` if this method updated the image. `false` if the image was not changed.
      */
     render?: () => boolean;
     /**
      * Optional method called when the layer has been added to the Map with {@link Map#addImage}.
      *
-     * @function
-     * @memberof StyleImageInterface
-     * @instance
-     * @name onAdd
-     * @param {Map} map The Map this custom layer was just added to.
+     * @param map - The Map this custom layer was just added to.
      */
     onAdd?: (map: Map, id: string) => void;
     /**
      * Optional method called when the icon is removed from the map with {@link Map#removeImage}.
      * This gives the image a chance to clean up resources and event listeners.
-     *
-     * @function
-     * @memberof StyleImageInterface
-     * @instance
-     * @name onRemove
      */
     onRemove?: () => void;
 }

package/src/style/style_layer/background_style_layer.ts

@@ -1,4 +1,4 @@
-import StyleLayer from '../style_layer';
+import {StyleLayer} from '../style_layer';
 
 import properties, {BackgroundPaintPropsPossiblyEvaluated} from './background_style_layer_properties.g';
 import {Transitionable, Transitioning, PossiblyEvaluated} from '../properties';
@@ -6,7 +6,7 @@ import {Transitionable, Transitioning, PossiblyEvaluated} from '../properties';
 import type {BackgroundPaintProps} from './background_style_layer_properties.g';
 import type {LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
 
-class BackgroundStyleLayer extends StyleLayer {
+export class BackgroundStyleLayer extends StyleLayer {
     _transitionablePaint: Transitionable<BackgroundPaintProps>;
     _transitioningPaint: Transitioning<BackgroundPaintProps>;
     paint: PossiblyEvaluated<BackgroundPaintProps, BackgroundPaintPropsPossiblyEvaluated>;
@@ -15,5 +15,3 @@ class BackgroundStyleLayer extends StyleLayer {
         super(layer, properties);
     }
 }
-
-export default BackgroundStyleLayer;

package/src/style/style_layer/circle_style_layer.ts

@@ -1,6 +1,6 @@
-import StyleLayer from '../style_layer';
+import {StyleLayer} from '../style_layer';
 
-import CircleBucket from '../../data/bucket/circle_bucket';
+import {CircleBucket} from '../../data/bucket/circle_bucket';
 import {polygonIntersectsBufferedPoint} from '../../util/intersection_tests';
 import {getMaximumPaintValue, translateDistance, translate} from '../query_utils';
 import properties, {CircleLayoutPropsPossiblyEvaluated, CirclePaintPropsPossiblyEvaluated} from './circle_style_layer_properties.g';
@@ -8,12 +8,15 @@ import {Transitionable, Transitioning, Layout, PossiblyEvaluated} from '../prope
 import {mat4, vec4} from 'gl-matrix';
 import Point from '@mapbox/point-geometry';
 import type {FeatureState, LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
-import type Transform from '../../geo/transform';
+import type {Transform} from '../../geo/transform';
 import type {Bucket, BucketParameters} from '../../data/bucket';
 import type {CircleLayoutProps, CirclePaintProps} from './circle_style_layer_properties.g';
 import type {VectorTileFeature} from '@mapbox/vector-tile';
 
-class CircleStyleLayer extends StyleLayer {
+/**
+ * A style layer that defines a circle
+ */
+export class CircleStyleLayer extends StyleLayer {
     _unevaluatedLayout: Layout<CircleLayoutProps>;
     layout: PossiblyEvaluated<CircleLayoutProps, CircleLayoutPropsPossiblyEvaluated>;
 
@@ -93,5 +96,3 @@ function projectQueryGeometry(queryGeometry: Array<Point>, pixelPosMatrix: mat4)
         return projectPoint(p, pixelPosMatrix);
     });
 }
-
-export default CircleStyleLayer;