@scoova/mgl 1.0.0

package/src/source/worker_tile.ts

@@ -0,0 +1,208 @@
+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 {warnOnce, mapObject} from '../util/util';
+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 {IActor} from '../util/actor';
+import type {StyleLayer} from '../style/style_layer';
+import type {StyleLayerIndex} from '../style/style_layer_index';
+import type {
+    WorkerTileParameters,
+    WorkerTileResult,
+} from '../source/worker_source';
+import type {PromoteIdSpecification} from '@maplibre/maplibre-gl-style-spec';
+import type {VectorTile} from '@mapbox/vector-tile';
+import {MessageType, type GetGlyphsResponse, type GetImagesResponse} from '../util/actor_messages';
+
+export class WorkerTile {
+    tileID: OverscaledTileID;
+    uid: string | number;
+    zoom: number;
+    pixelRatio: number;
+    tileSize: number;
+    source: string;
+    promoteId: PromoteIdSpecification;
+    overscaling: number;
+    showCollisionBoxes: boolean;
+    collectResourceTiming: boolean;
+    returnDependencies: boolean;
+
+    status: 'parsing' | 'done';
+    data: VectorTile;
+    collisionBoxArray: CollisionBoxArray;
+
+    abort: AbortController;
+    vectorTile: VectorTile;
+    inFlightDependencies: AbortController[];
+
+    constructor(params: WorkerTileParameters) {
+        this.tileID = new OverscaledTileID(params.tileID.overscaledZ, params.tileID.wrap, params.tileID.canonical.z, params.tileID.canonical.x, params.tileID.canonical.y);
+        this.uid = params.uid;
+        this.zoom = params.zoom;
+        this.pixelRatio = params.pixelRatio;
+        this.tileSize = params.tileSize;
+        this.source = params.source;
+        this.overscaling = this.tileID.overscaleFactor();
+        this.showCollisionBoxes = params.showCollisionBoxes;
+        this.collectResourceTiming = !!params.collectResourceTiming;
+        this.returnDependencies = !!params.returnDependencies;
+        this.promoteId = params.promoteId;
+        this.inFlightDependencies = [];
+    }
+
+    async parse(data: VectorTile, layerIndex: StyleLayerIndex, availableImages: Array<string>, actor: IActor): Promise<WorkerTileResult> {
+        this.status = 'parsing';
+        this.data = data;
+
+        this.collisionBoxArray = new CollisionBoxArray();
+        const sourceLayerCoder = new DictionaryCoder(Object.keys(data.layers).sort());
+
+        const featureIndex = new FeatureIndex(this.tileID, this.promoteId);
+        featureIndex.bucketLayerIDs = [];
+
+        const buckets: {[_: string]: Bucket} = {};
+
+        const options = {
+            featureIndex,
+            iconDependencies: {},
+            patternDependencies: {},
+            glyphDependencies: {},
+            availableImages
+        };
+
+        const layerFamilies = layerIndex.familiesBySource[this.source];
+        for (const sourceLayerId in layerFamilies) {
+            const sourceLayer = data.layers[sourceLayerId];
+            if (!sourceLayer) {
+                continue;
+            }
+
+            if (sourceLayer.version === 1) {
+                warnOnce(`Vector tile source "${this.source}" layer "${sourceLayerId}" ` +
+                    'does not use vector tile spec v2 and therefore may have some rendering errors.');
+            }
+
+            const sourceLayerIndex = sourceLayerCoder.encode(sourceLayerId);
+            const features = [];
+            for (let index = 0; index < sourceLayer.length; index++) {
+                const feature = sourceLayer.feature(index);
+                const id = featureIndex.getId(feature, sourceLayerId);
+                features.push({feature, id, index, sourceLayerIndex});
+            }
+
+            for (const family of layerFamilies[sourceLayerId]) {
+                const layer = family[0];
+
+                if (layer.source !== this.source) {
+                    warnOnce(`layer.source = ${layer.source} does not equal this.source = ${this.source}`);
+                }
+                if (layer.minzoom && this.zoom < Math.floor(layer.minzoom)) continue;
+                if (layer.maxzoom && this.zoom >= layer.maxzoom) continue;
+                if (layer.visibility === 'none') continue;
+
+                recalculateLayers(family, this.zoom, availableImages);
+
+                const bucket: Bucket = buckets[layer.id] = layer.createBucket({
+                    index: featureIndex.bucketLayerIDs.length,
+                    layers: family,
+                    zoom: this.zoom,
+                    pixelRatio: this.pixelRatio,
+                    overscaling: this.overscaling,
+                    collisionBoxArray: this.collisionBoxArray,
+                    sourceLayerIndex,
+                    sourceID: this.source
+                });
+
+                bucket.populate(features, options, this.tileID.canonical);
+                featureIndex.bucketLayerIDs.push(family.map((l) => l.id));
+            }
+        }
+
+        // options.glyphDependencies looks like: {"SomeFontName":{"10":true,"32":true}}
+        // this line makes an object like: {"SomeFontName":[10,32]}
+        const stacks: {[_: string]: Array<number>} = mapObject(options.glyphDependencies, (glyphs) => Object.keys(glyphs).map(Number));
+
+        this.inFlightDependencies.forEach((request) => request?.abort());
+        this.inFlightDependencies = [];
+
+        let getGlyphsPromise = Promise.resolve<GetGlyphsResponse>({});
+        if (Object.keys(stacks).length) {
+            const abortController = new AbortController();
+            this.inFlightDependencies.push(abortController);
+            getGlyphsPromise = actor.sendAsync({type: MessageType.getGlyphs, data: {stacks, source: this.source, tileID: this.tileID, type: 'glyphs'}}, abortController);
+        }
+
+        const icons = Object.keys(options.iconDependencies);
+        let getIconsPromise = Promise.resolve<GetImagesResponse>({});
+        if (icons.length) {
+            const abortController = new AbortController();
+            this.inFlightDependencies.push(abortController);
+            getIconsPromise = actor.sendAsync({type: MessageType.getImages, data: {icons, source: this.source, tileID: this.tileID, type: 'icons'}}, abortController);
+        }
+
+        const patterns = Object.keys(options.patternDependencies);
+        let getPatternsPromise = Promise.resolve<GetImagesResponse>({});
+        if (patterns.length) {
+            const abortController = new AbortController();
+            this.inFlightDependencies.push(abortController);
+            getPatternsPromise = actor.sendAsync({type: MessageType.getImages, data: {icons: patterns, source: this.source, tileID: this.tileID, type: 'patterns'}}, abortController);
+        }
+
+        const [glyphMap, iconMap, patternMap] = await Promise.all([getGlyphsPromise, getIconsPromise, getPatternsPromise]);
+        const glyphAtlas = new GlyphAtlas(glyphMap);
+        const imageAtlas = new ImageAtlas(iconMap, patternMap);
+
+        for (const key in buckets) {
+            const bucket = buckets[key];
+            if (bucket instanceof SymbolBucket) {
+                recalculateLayers(bucket.layers, this.zoom, availableImages);
+                performSymbolLayout({
+                    bucket,
+                    glyphMap,
+                    glyphPositions: glyphAtlas.positions,
+                    imageMap: iconMap,
+                    imagePositions: imageAtlas.iconPositions,
+                    showCollisionBoxes: this.showCollisionBoxes,
+                    canonical: this.tileID.canonical
+                });
+            } else if (bucket.hasPattern &&
+                (bucket instanceof LineBucket ||
+                bucket instanceof FillBucket ||
+                bucket instanceof FillExtrusionBucket)) {
+                recalculateLayers(bucket.layers, this.zoom, availableImages);
+                bucket.addFeatures(options, this.tileID.canonical, imageAtlas.patternPositions);
+            }
+        }
+
+        this.status = 'done';
+        return {
+            buckets: Object.values(buckets).filter(b => !b.isEmpty()),
+            featureIndex,
+            collisionBoxArray: this.collisionBoxArray,
+            glyphAtlasImage: glyphAtlas.image,
+            imageAtlas,
+            // Only used for benchmarking:
+            glyphMap: this.returnDependencies ? glyphMap : null,
+            iconMap: this.returnDependencies ? iconMap : null,
+            glyphPositions: this.returnDependencies ? glyphAtlas.positions : null
+        };
+    }
+}
+
+function recalculateLayers(layers: ReadonlyArray<StyleLayer>, zoom: number, availableImages: Array<string>) {
+    // Layers are shared and may have been used by a WorkerTile with a different zoom.
+    const parameters = new EvaluationParameters(zoom);
+    for (const layer of layers) {
+        layer.recalculate(parameters, availableImages);
+    }
+}

package/src/style/create_style_layer.ts

@@ -0,0 +1,39 @@
+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';
+
+export function createStyleLayer(layer: LayerSpecification | CustomLayerInterface) {
+    if (layer.type === 'custom') {
+        return new CustomStyleLayer(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

@@ -0,0 +1,62 @@
+import {ZoomHistory} from './zoom_history';
+import {isStringInSupportedScript} from '../util/script_detection';
+import {rtlWorkerPlugin} from '../source/rtl_text_plugin_worker';
+
+import type {TransitionSpecification} from '@maplibre/maplibre-gl-style-spec';
+
+export type CrossfadeParameters = {
+    fromScale: number;
+    toScale: number;
+    t: number;
+};
+
+/**
+ * @internal
+ * A parameter that can be evaluated to a value
+ */
+export class EvaluationParameters {
+    zoom: number;
+    now: number;
+    fadeDuration: number;
+    zoomHistory: ZoomHistory;
+    transition: TransitionSpecification;
+
+    // "options" may also be another EvaluationParameters to copy, see CrossFadedProperty.possiblyEvaluate
+    constructor(zoom: number, options?: any) {
+        this.zoom = zoom;
+
+        if (options) {
+            this.now = options.now;
+            this.fadeDuration = options.fadeDuration;
+            this.zoomHistory = options.zoomHistory;
+            this.transition = options.transition;
+        } else {
+            this.now = 0;
+            this.fadeDuration = 0;
+            this.zoomHistory = new ZoomHistory();
+            this.transition = {};
+        }
+    }
+
+    isSupportedScript(str: string): boolean {
+        return isStringInSupportedScript(str, rtlWorkerPlugin.getRTLTextPluginStatus() === 'loaded');
+    }
+
+    crossFadingFactor() {
+        if (this.fadeDuration === 0) {
+            return 1;
+        } else {
+            return Math.min((this.now - this.zoomHistory.lastIntegerZoomTime) / this.fadeDuration, 1);
+        }
+    }
+
+    getCrossfadeParameters(): CrossfadeParameters {
+        const z = this.zoom;
+        const fraction = z - Math.floor(z);
+        const t = this.crossFadingFactor();
+
+        return z > this.zoomHistory.lastIntegerZoom ?
+            {fromScale: 2, toScale: 1, t: fraction + (1 - fraction) * t} :
+            {fromScale: 0.5, toScale: 1, t: 1 - (1 - t) * fraction};
+    }
+}

package/src/style/format_section_override.test.ts

@@ -0,0 +1,62 @@
+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';
+
+describe('evaluate', () => {
+
+    test('override constant', () => {
+        const defaultColor = {'r': 0, 'g': 1, 'b': 0, 'a': 1};
+        const overriddenColor = {'r': 1, 'g': 0, 'b': 0, 'a': 1};
+        const overridden = new PossiblyEvaluatedPropertyValue(
+            properties.paint.properties['text-color'],
+            {kind: 'constant', value: defaultColor},
+            {zoom: 0, zoomHistory: {}} as EvaluationParameters
+        );
+
+        const override = new FormatSectionOverride(overridden);
+        const ctx = new EvaluationContext();
+        ctx.feature = {} as any;
+        ctx.featureState = {};
+        expect(override.evaluate(ctx)).toEqual(defaultColor);
+
+        ctx.formattedSection = {textColor: overriddenColor} as FormattedSection;
+        expect(override.evaluate(ctx)).toEqual(overriddenColor);
+
+    });
+
+    test('override expression', () => {
+        const warn = console.warn;
+        console.warn = (_) => {};
+        const defaultColor = {'r': 0, 'g': 0, 'b': 0, 'a': 1};
+        const propertyColor = {'r': 1, 'g': 0, 'b': 0, 'a': 1};
+        const overriddenColor = {'r': 0, 'g': 0, 'b': 1, 'a': 1};
+        const styleExpr = createExpression(
+            ['get', 'color'],
+            properties.paint.properties['text-color'].specification);
+
+        const sourceExpr = new ZoomConstantExpression('source', styleExpr.value as StyleExpression);
+        const overridden = new PossiblyEvaluatedPropertyValue(
+            properties.paint.properties['text-color'],
+            sourceExpr,
+            {zoom: 0, zoomHistory: {}} as EvaluationParameters
+        );
+
+        const override = new FormatSectionOverride(overridden);
+        const ctx = new EvaluationContext();
+        ctx.feature = {properties: {}} as any;
+        ctx.featureState = {};
+
+        expect(override.evaluate(ctx)).toEqual(defaultColor);
+
+        ctx.feature.properties.color = 'red';
+        expect(override.evaluate(ctx)).toEqual(propertyColor);
+
+        ctx.formattedSection = {textColor: overriddenColor} as FormattedSection;
+        expect(override.evaluate(ctx)).toEqual(overriddenColor);
+
+        console.warn = warn;
+    });
+
+});

package/src/style/format_section_override.ts

@@ -0,0 +1,50 @@
+import type {Expression, EvaluationContext, Type, ZoomConstantExpression} from '@maplibre/maplibre-gl-style-spec';
+import {NullType} from '@maplibre/maplibre-gl-style-spec';
+import {PossiblyEvaluatedPropertyValue} from './properties';
+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 class FormatSectionOverride<T> implements Expression {
+    type: Type;
+    defaultValue: PossiblyEvaluatedPropertyValue<T>;
+
+    constructor(defaultValue: PossiblyEvaluatedPropertyValue<T>) {
+        if (defaultValue.property.overrides === undefined) throw new Error('overrides must be provided to instantiate FormatSectionOverride class');
+        this.type = defaultValue.property.overrides ? defaultValue.property.overrides.runtimeType : NullType;
+        this.defaultValue = defaultValue;
+    }
+
+    evaluate(ctx: EvaluationContext) {
+        if (ctx.formattedSection) {
+            const overrides = this.defaultValue.property.overrides;
+            if (overrides && overrides.hasOverride(ctx.formattedSection)) {
+                return overrides.getOverride(ctx.formattedSection);
+            }
+        }
+
+        if (ctx.feature && ctx.featureState) {
+            return this.defaultValue.evaluate(ctx.feature, ctx.featureState);
+        }
+
+        return this.defaultValue.property.specification.default;
+    }
+
+    eachChild(fn: (_: Expression) => void) {
+        if (!this.defaultValue.isConstant()) {
+            const expr: ZoomConstantExpression<'source'> = (this.defaultValue.value as any);
+            fn(expr._styleExpression.expression);
+        }
+    }
+
+    // Cannot be statically evaluated, as the output depends on the evaluation context.
+    outputDefined() {
+        return false;
+    }
+
+    serialize() {
+        return null;
+    }
+}
+
+register('FormatSectionOverride', FormatSectionOverride, {omit: ['defaultValue']});

package/src/style/light.test.ts

@@ -0,0 +1,86 @@
+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 {TransitionParameters} from './properties';
+
+const spec = styleSpec.light;
+
+test('Light with defaults', () => {
+    const light = new Light({});
+    light.recalculate({zoom: 0, zoomHistory: {}} as EvaluationParameters);
+
+    expect(light.properties.get('anchor')).toEqual(spec.anchor.default);
+    expect(light.properties.get('position')).toEqual(sphericalToCartesian(spec.position.default as any as [number, number, number]));
+    expect(light.properties.get('intensity')).toEqual(spec.intensity.default);
+    expect(light.properties.get('color')).toEqual(Color.parse(spec.color.default));
+});
+
+test('Light with options', () => {
+    const light = new Light({
+        anchor: 'map',
+        position: [2, 30, 30],
+        intensity: 1
+    });
+    light.recalculate({zoom: 0, zoomHistory: {}} as EvaluationParameters);
+
+    expect(light.properties.get('anchor')).toBe('map');
+    expect(light.properties.get('position')).toEqual(sphericalToCartesian([2, 30, 30]));
+    expect(light.properties.get('intensity')).toBe(1);
+    expect(light.properties.get('color')).toEqual(Color.parse(spec.color.default));
+});
+
+test('Light with stops function', () => {
+    const light = new Light({
+        intensity: {
+            stops: [[16, 0.2], [17, 0.8]]
+        }
+    } as LightSpecification);
+    light.recalculate({zoom: 16.5, zoomHistory: {}} as EvaluationParameters);
+
+    expect(light.properties.get('intensity')).toBe(0.5);
+});
+
+test('Light#getLight', () => {
+    const defaults = {};
+    for (const key in spec) {
+        defaults[key] = spec[key].default;
+    }
+
+    expect(new Light(defaults).getLight()).toEqual(defaults);
+});
+
+describe('Light#setLight', () => {
+    test('sets light', () => {
+        const light = new Light({});
+        light.setLight({color: 'red', 'color-transition': {duration: 3000}} as LightSpecification);
+        light.updateTransitions({transition: true} as any as TransitionParameters);
+        light.recalculate({zoom: 16, zoomHistory: {}, now: 1500} as EvaluationParameters);
+        expect(light.properties.get('color')).toEqual(new Color(1, 0.5, 0.5, 1));
+    });
+
+    test('validates by default', () => {
+        const light = new Light({});
+        const lightSpy = jest.spyOn(light, '_validate');
+        jest.spyOn(console, 'error').mockImplementation(() => { });
+        light.setLight({color: 'notacolor'});
+        light.updateTransitions({transition: false} as any as TransitionParameters);
+        light.recalculate({zoom: 16, zoomHistory: {}, now: 10} as EvaluationParameters);
+        expect(lightSpy).toHaveBeenCalledTimes(1);
+        expect(console.error).toHaveBeenCalledTimes(1);
+        expect(lightSpy.mock.calls[0][2]).toEqual({});
+    });
+
+    test('respects validation option', () => {
+        const light = new Light({});
+
+        const lightSpy = jest.spyOn(light, '_validate');
+        light.setLight({color: [999]} as any, {validate: false});
+        light.updateTransitions({transition: false} as any as TransitionParameters);
+        light.recalculate({zoom: 16, zoomHistory: {}, now: 10} as EvaluationParameters);
+
+        expect(lightSpy).toHaveBeenCalledTimes(1);
+        expect(lightSpy.mock.calls[0][2]).toEqual({validate: false});
+        expect(light.properties.get('color')).toEqual([999]);
+    });
+});

package/src/style/light.ts

@@ -0,0 +1,135 @@
+import {interpolates, Color, latest as styleSpec} from '@maplibre/maplibre-gl-style-spec';
+
+import {sphericalToCartesian} from '../util/util';
+import {Evented} from '../util/evented';
+import {
+    validateStyle,
+    validateLight,
+    emitValidationErrors
+} from './validate_style';
+
+import type {StylePropertySpecification, LightSpecification} from '@maplibre/maplibre-gl-style-spec';
+import type {EvaluationParameters} from './evaluation_parameters';
+import type {StyleSetterOptions} from '../style/style';
+import {Properties, Transitionable, Transitioning, PossiblyEvaluated, DataConstantProperty} from './properties';
+
+import type {
+    Property,
+    PropertyValue,
+    TransitionParameters
+} from './properties';
+
+type LightPosition = {
+    x: number;
+    y: number;
+    z: number;
+};
+
+class LightPositionProperty implements Property<[number, number, number], LightPosition> {
+    specification: StylePropertySpecification;
+
+    constructor() {
+        this.specification = styleSpec.light.position as StylePropertySpecification;
+    }
+
+    possiblyEvaluate(
+        value: PropertyValue<[number, number, number], LightPosition>,
+        parameters: EvaluationParameters
+    ): LightPosition {
+        return sphericalToCartesian(value.expression.evaluate(parameters));
+    }
+
+    interpolate(a: LightPosition, b: LightPosition, t: number): LightPosition {
+        return {
+            x: interpolates.number(a.x, b.x, t),
+            y: interpolates.number(a.y, b.y, t),
+            z: interpolates.number(a.z, b.z, t),
+        };
+    }
+}
+
+type LightProps = {
+    'anchor': DataConstantProperty<'map' | 'viewport'>;
+    'position': LightPositionProperty;
+    'color': DataConstantProperty<Color>;
+    'intensity': DataConstantProperty<number>;
+};
+
+type LightPropsPossiblyEvaluated = {
+    'anchor': 'map' | 'viewport';
+    'position': LightPosition;
+    'color': Color;
+    'intensity': number;
+};
+
+const TRANSITION_SUFFIX = '-transition';
+
+let lightProperties: Properties<LightProps>;
+
+/*
+ * Represents the light used to light extruded features.
+ */
+export class Light extends Evented {
+    _transitionable: Transitionable<LightProps>;
+    _transitioning: Transitioning<LightProps>;
+    properties: PossiblyEvaluated<LightProps, LightPropsPossiblyEvaluated>;
+
+    constructor(lightOptions?: LightSpecification) {
+        super();
+        lightProperties = lightProperties || new Properties({
+            'anchor': new DataConstantProperty(styleSpec.light.anchor as StylePropertySpecification),
+            'position': new LightPositionProperty(),
+            'color': new DataConstantProperty(styleSpec.light.color as StylePropertySpecification),
+            'intensity': new DataConstantProperty(styleSpec.light.intensity as StylePropertySpecification),
+        });
+        this._transitionable = new Transitionable(lightProperties);
+        this.setLight(lightOptions);
+        this._transitioning = this._transitionable.untransitioned();
+    }
+
+    getLight(): LightSpecification {
+        return this._transitionable.serialize();
+    }
+
+    setLight(light?: LightSpecification, options: StyleSetterOptions = {}) {
+        if (this._validate(validateLight, light, options)) {
+            return;
+        }
+
+        for (const name in light) {
+            const value = light[name];
+            if (name.endsWith(TRANSITION_SUFFIX)) {
+                this._transitionable.setTransition(name.slice(0, -TRANSITION_SUFFIX.length) as keyof LightProps, value);
+            } else {
+                this._transitionable.setValue(name as keyof LightProps, value);
+            }
+        }
+    }
+
+    updateTransitions(parameters: TransitionParameters) {
+        this._transitioning = this._transitionable.transitioned(parameters, this._transitioning);
+    }
+
+    hasTransition() {
+        return this._transitioning.hasTransition();
+    }
+
+    recalculate(parameters: EvaluationParameters) {
+        this.properties = this._transitioning.possiblyEvaluate(parameters);
+    }
+
+    _validate(validate: Function, value: unknown, options?: {
+        validate?: boolean;
+    }) {
+        if (options && options.validate === false) {
+            return false;
+        }
+
+        return emitValidationErrors(this, validate.call(validateStyle, {
+            value,
+            // Workaround for https://github.com/mapbox/mapbox-gl-js/issues/2407
+            style: {glyphs: true, sprite: true},
+            styleSpec
+        }));
+    }
+}

package/src/style/load_glyph_range.test.ts

@@ -0,0 +1,40 @@
+import fs from 'fs';
+import path from 'path';
+import {RequestManager} from '../util/request_manager';
+import {loadGlyphRange} from './load_glyph_range';
+import {fakeServer} from 'nise';
+import {bufferToArrayBuffer} from '../util/test/util';
+
+test('loadGlyphRange', async ()  => {
+    global.fetch = null;
+
+    const transform = jest.fn().mockImplementation((url) => {
+        return {url};
+    });
+
+    const manager = new RequestManager(transform);
+
+    const server = fakeServer.create();
+    server.respondWith(bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/0-255.pbf'))));
+
+    const promise = loadGlyphRange('Arial Unicode MS', 0, 'https://localhost/fonts/v1/{fontstack}/{range}.pbf', manager);
+    server.respond();
+    const result = await promise;
+
+    expect(transform).toHaveBeenCalledTimes(1);
+    expect(transform).toHaveBeenCalledWith('https://localhost/fonts/v1/Arial Unicode MS/0-255.pbf', 'Glyphs');
+
+    expect(Object.keys(result)).toHaveLength(223);
+    for (const key in result) {
+        const id = Number(key);
+        const glyph = result[id];
+
+        expect(glyph.id).toBe(Number(id));
+        expect(glyph.metrics).toBeTruthy();
+        expect(typeof glyph.metrics.width).toBe('number');
+        expect(typeof glyph.metrics.height).toBe('number');
+        expect(typeof glyph.metrics.top).toBe('number');
+        expect(typeof glyph.metrics.advance).toBe('number');
+    }
+    expect(server.requests[0].url).toBe('https://localhost/fonts/v1/Arial Unicode MS/0-255.pbf');
+});