maplibre-gl 3.2.2 → 3.3.1

package/src/symbol/symbol_layout.ts

@@ -19,7 +19,7 @@ import {SIZE_PACK_FACTOR, MAX_PACKED_SIZE, MAX_GLYPH_ICON_SIZE} from './symbol_s
 import ONE_EM from './one_em';
 import type {CanonicalTileID} from '../source/tile_id';
 import type {Shaping, PositionedIcon, TextJustify} from './shaping';
-import type {CollisionBoxArray} from '../data/array_types.g';
+import type {CollisionBoxArray, TextAnchorOffsetArray} from '../data/array_types.g';
 import type {SymbolFeature} from '../data/bucket/symbol_bucket';
 import type {StyleImage} from '../style/style_image';
 import type {StyleGlyph} from '../style/style_glyph';
@@ -31,6 +31,8 @@ import type {PossiblyEvaluatedPropertyValue} from '../style/properties';
 import Point from '@mapbox/point-geometry';
 import murmur3 from 'murmurhash-js';
 import {getIconPadding, SymbolPadding} from '../style/style_layer/symbol_style_layer';
+import {VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
+import {getTextVariableAnchorOffset, evaluateVariableOffset, INVALID_TEXT_OFFSET, TextAnchor, TextAnchorEnum} from '../style/style_layer/variable_text_anchor';
 
 // The symbol layout process needs `text-size` evaluated at up to five different zoom levels, and
 // `icon-size` at up to three:
@@ -59,98 +61,6 @@ type ShapedTextOrientations = {
     horizontal: Record<TextJustify, Shaping>;
 };
 
-export type TextAnchor = 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-
-// The radial offset is to the edge of the text box
-// In the horizontal direction, the edge of the text box is where glyphs start
-// But in the vertical direction, the glyphs appear to "start" at the baseline
-// We don't actually load baseline data, but we assume an offset of ONE_EM - 17
-// (see "yOffset" in shaping.js)
-const baselineOffset = 7;
-const INVALID_TEXT_OFFSET = Number.POSITIVE_INFINITY;
-
-export function evaluateVariableOffset(anchor: TextAnchor, offset: [number, number]) {
-
-    function fromRadialOffset(anchor: TextAnchor, radialOffset: number) {
-        let x = 0, y = 0;
-        if (radialOffset < 0) radialOffset = 0; // Ignore negative offset.
-        // solve for r where r^2 + r^2 = radialOffset^2
-        const hypotenuse = radialOffset / Math.sqrt(2);
-        switch (anchor) {
-            case 'top-right':
-            case 'top-left':
-                y = hypotenuse - baselineOffset;
-                break;
-            case 'bottom-right':
-            case 'bottom-left':
-                y = -hypotenuse + baselineOffset;
-                break;
-            case 'bottom':
-                y = -radialOffset + baselineOffset;
-                break;
-            case 'top':
-                y = radialOffset - baselineOffset;
-                break;
-        }
-
-        switch (anchor) {
-            case 'top-right':
-            case 'bottom-right':
-                x = -hypotenuse;
-                break;
-            case 'top-left':
-            case 'bottom-left':
-                x = hypotenuse;
-                break;
-            case 'left':
-                x = radialOffset;
-                break;
-            case 'right':
-                x = -radialOffset;
-                break;
-        }
-
-        return [x, y];
-    }
-
-    function fromTextOffset(anchor: TextAnchor, offsetX: number, offsetY: number) {
-        let x = 0, y = 0;
-        // Use absolute offset values.
-        offsetX = Math.abs(offsetX);
-        offsetY = Math.abs(offsetY);
-
-        switch (anchor) {
-            case 'top-right':
-            case 'top-left':
-            case 'top':
-                y = offsetY - baselineOffset;
-                break;
-            case 'bottom-right':
-            case 'bottom-left':
-            case 'bottom':
-                y = -offsetY + baselineOffset;
-                break;
-        }
-
-        switch (anchor) {
-            case 'top-right':
-            case 'bottom-right':
-            case 'right':
-                x = -offsetX;
-                break;
-            case 'top-left':
-            case 'bottom-left':
-            case 'left':
-                x = offsetX;
-                break;
-        }
-
-        return [x, y];
-    }
-
-    return (offset[1] !== INVALID_TEXT_OFFSET) ? fromTextOffset(anchor, offset[0], offset[1]) : fromRadialOffset(anchor, offset[0]);
-}
-
 export function performSymbolLayout(args: {
     bucket: SymbolBucket;
     glyphMap: {
@@ -175,8 +85,9 @@ export function performSymbolLayout(args: {
     args.bucket.compareText = {};
     args.bucket.iconsNeedLinear = false;
 
-    const layout = args.bucket.layers[0].layout;
-    const unevaluatedLayoutValues = args.bucket.layers[0]._unevaluatedLayout._values;
+    const layer = args.bucket.layers[0];
+    const layout = layer.layout;
+    const unevaluatedLayoutValues = layer._unevaluatedLayout._values;
 
     const sizes: Sizes = {
         // Filled in below, if *SizeData.kind is 'composite'
@@ -226,16 +137,16 @@ export function performSymbolLayout(args: {
             const spacingIfAllowed = allowsLetterSpacing(unformattedText) ? spacing : 0;
 
             const textAnchor = layout.get('text-anchor').evaluate(feature, {}, args.canonical);
-            const variableTextAnchor = layout.get('text-variable-anchor');
+            const variableAnchorOffset = getTextVariableAnchorOffset(layer, feature, args.canonical);
 
-            if (!variableTextAnchor) {
+            if (!variableAnchorOffset) {
                 const radialOffset = layout.get('text-radial-offset').evaluate(feature, {}, args.canonical);
                 // Layers with variable anchors use the `text-radial-offset` property and the [x, y] offset vector
                 // is calculated at placement time instead of layout time
                 if (radialOffset) {
                     // The style spec says don't use `text-offset` and `text-radial-offset` together
                     // but doesn't actually specify what happens if you use both. We go with the radial offset.
-                    textOffset = evaluateVariableOffset(textAnchor, [radialOffset * ONE_EM, INVALID_TEXT_OFFSET]) as [number, number];
+                    textOffset = evaluateVariableOffset(textAnchor, [radialOffset * ONE_EM, INVALID_TEXT_OFFSET]);
                 } else {
                     textOffset = (layout.get('text-offset').evaluate(feature, {}, args.canonical).map(t => t * ONE_EM) as [number, number]);
                 }
@@ -261,14 +172,19 @@ export function performSymbolLayout(args: {
             };
 
             // If this layer uses text-variable-anchor, generate shapings for all justification possibilities.
-            if (!textAlongLine && variableTextAnchor) {
-                const justifications = textJustify === 'auto' ?
-                    variableTextAnchor.map(a => getAnchorJustification(a)) :
-                    [textJustify];
+            if (!textAlongLine && variableAnchorOffset) {
+                const justifications = new Set<TextJustify>();
+
+                if (textJustify === 'auto') {
+                    for (let i = 0; i < variableAnchorOffset.values.length; i += 2) {
+                        justifications.add(getAnchorJustification(variableAnchorOffset.values[i] as TextAnchor));
+                    }
+                } else {
+                    justifications.add(textJustify);
+                }
 
                 let singleLine = false;
-                for (let i = 0; i < justifications.length; i++) {
-                    const justification: TextJustify = justifications[i];
+                for (const justification of justifications) {
                     if (shapedTextOrientations.horizontal[justification]) continue;
                     if (singleLine) {
                         // If the shaping for the first justification was only a single line, we
@@ -486,6 +402,22 @@ function addFeature(bucket: SymbolBucket,
     }
 }
 
+function addTextVariableAnchorOffsets(textAnchorOffsets: TextAnchorOffsetArray, variableAnchorOffset: VariableAnchorOffsetCollection): [number, number] {
+    const startIndex = textAnchorOffsets.length;
+    const values = variableAnchorOffset?.values;
+
+    if (values?.length > 0) {
+        for (let i = 0; i < values.length; i += 2) {
+            const anchor = TextAnchorEnum[values[i] as TextAnchor];
+            const offset = values[i + 1] as [number, number];
+
+            textAnchorOffsets.emplaceBack(anchor, offset[0], offset[1]);
+        }
+    }
+
+    return [startIndex, textAnchorOffsets.length];
+}
+
 function addTextVertices(bucket: SymbolBucket,
     anchor: Point,
     shapedText: Shaping,
@@ -602,15 +534,6 @@ function addSymbol(bucket: SymbolBucket,
     const placedTextSymbolIndices: {[k: string]: number} = {};
     let key = murmur3('');
 
-    let textOffset0 = 0;
-    let textOffset1 = 0;
-    if (layer._unevaluatedLayout.getValue('text-radial-offset') === undefined) {
-        [textOffset0, textOffset1] = (layer.layout.get('text-offset').evaluate(feature, {}, canonical).map(t => t * ONE_EM) as [number, number]);
-    } else {
-        textOffset0 = layer.layout.get('text-radial-offset').evaluate(feature, {}, canonical) * ONE_EM;
-        textOffset1 = INVALID_TEXT_OFFSET;
-    }
-
     if (bucket.allowVerticalPlacement && shapedTextOrientations.vertical) {
         const textRotation = layer.layout.get('text-rotate').evaluate(feature, {}, canonical);
         const verticalTextRotation = textRotation + 90.0;
@@ -763,6 +686,9 @@ function addSymbol(bucket: SymbolBucket,
         bucket.addToSortKeyRanges(bucket.symbolInstances.length, feature.sortKey as number);
     }
 
+    const variableAnchorOffset = getTextVariableAnchorOffset(layer, feature, canonical);
+    const [textAnchorOffsetStartIndex, textAnchorOffsetEndIndex] = addTextVariableAnchorOffsets(bucket.textAnchorOffsets, variableAnchorOffset);
+
     bucket.symbolInstances.emplaceBack(
         anchor.x,
         anchor.y,
@@ -789,9 +715,9 @@ function addSymbol(bucket: SymbolBucket,
         useRuntimeCollisionCircles,
         0,
         textBoxScale,
-        textOffset0,
-        textOffset1,
-        collisionCircleDiameter);
+        collisionCircleDiameter,
+        textAnchorOffsetStartIndex,
+        textAnchorOffsetEndIndex);
 }
 
 function anchorIsTooClose(bucket: SymbolBucket, text: string, repeatDistance: number, anchor: Point) {

package/src/ui/control/navigation_control.ts

@@ -43,7 +43,6 @@ const defaultOptions: NavigationOptions = {
  * map.addControl(nav, 'top-left');
  * ```
  * @see [Display map navigation controls](https://maplibre.org/maplibre-gl-js/docs/examples/navigation/)
- * @see [Add a third party vector tile source](https://maplibre.org/maplibre-gl-js/docs/examples/third-party/)
  */
 export class NavigationControl implements IControl {
     _map: Map;

package/src/ui/map.test.ts

@@ -6,7 +6,7 @@ import {OverscaledTileID} from '../source/tile_id';
 import {Event, ErrorEvent} from '../util/evented';
 import simulate from '../../test/unit/lib/simulate_interaction';
 import {fixedLngLat, fixedNum} from '../../test/unit/lib/fixed';
-import {LayerSpecification, SourceSpecification, StyleSpecification} from '@maplibre/maplibre-gl-style-spec';
+import {GeoJSONSourceSpecification, LayerSpecification, SourceSpecification, StyleSpecification} from '@maplibre/maplibre-gl-style-spec';
 import {RequestTransformFunction} from '../util/request_manager';
 import {extend} from '../util/util';
 import {LngLatBoundsLike} from '../geo/lng_lat_bounds';
@@ -675,6 +675,19 @@ describe('Map', () => {
             map.addSource('fill', source);
         });
 
+        test('a layer can be added with an embedded source specification', () => {
+            const map = createMap({deleteStyle: true});
+            const source: GeoJSONSourceSpecification = {
+                type: 'geojson',
+                data: {type: 'Point', coordinates: [0, 0]}
+            };
+            map.addLayer({
+                id: 'foo',
+                type: 'symbol',
+                source
+            });
+        });
+
         test('returns the style with added source and layer', done => {
             const style = createStyle();
             const map = createMap({style});
@@ -848,21 +861,30 @@ describe('Map', () => {
 
             const map = createMap();
 
-            const spyA = jest.spyOn(map, '_update');
-            const spyB = jest.spyOn(map, 'resize');
+            const updateSpy = jest.spyOn(map, '_update');
+            const resizeSpy = jest.spyOn(map, 'resize');
 
             // The initial "observe" event fired by ResizeObserver should be captured/muted
             // in the map constructor
 
             observerCallback();
-            expect(spyA).not.toHaveBeenCalled();
-            expect(spyB).not.toHaveBeenCalled();
+            expect(updateSpy).not.toHaveBeenCalled();
+            expect(resizeSpy).not.toHaveBeenCalled();
+
+            // The next "observe" event should fire a resize / _update
 
-            // Following "observe" events should fire a resize / _update
+            observerCallback();
+            expect(updateSpy).toHaveBeenCalled();
+            expect(resizeSpy).toHaveBeenCalledTimes(1);
 
+            // Additional "observe" events should be throttled
+            observerCallback();
+            observerCallback();
             observerCallback();
-            expect(spyA).toHaveBeenCalled();
-            expect(spyB).toHaveBeenCalled();
+            observerCallback();
+            expect(resizeSpy).toHaveBeenCalledTimes(1);
+            await new Promise((resolve) => { setTimeout(resolve, 100); });
+            expect(resizeSpy).toHaveBeenCalledTimes(2);
         });
 
         test('width and height correctly rounded', () => {
@@ -2569,6 +2591,13 @@ describe('Map', () => {
         });
     });
 
+    describe('#getTerrain', () => {
+        test('returns null when not set', () => {
+            const map = createMap();
+            expect(map.getTerrain()).toBeNull();
+        });
+    });
+
     describe('#setCooperativeGestures', () => {
         test('returns self', () => {
             const map = createMap();

package/src/ui/map.ts

@@ -25,6 +25,7 @@ import {RGBAImage} from '../util/image';
 import {Event, ErrorEvent, Listener} from '../util/evented';
 import {MapEventType, MapLayerEventType, MapMouseEvent, MapSourceDataEvent, MapStyleDataEvent} from './events';
 import {TaskQueue} from '../util/task_queue';
+import {throttle} from '../util/throttle';
 import {webpSupported} from '../util/webp_supported';
 import {PerformanceMarkers, PerformanceUtils} from '../util/performance';
 import {Source, SourceClass} from '../source/source';
@@ -33,9 +34,8 @@ import {StyleLayer} from '../style/style_layer';
 import type {RequestTransformFunction} from '../util/request_manager';
 import type {LngLatLike} from '../geo/lng_lat';
 import type {LngLatBoundsLike} from '../geo/lng_lat_bounds';
-import type {FeatureIdentifier, StyleOptions, StyleSetterOptions} from '../style/style';
+import type {AddLayerObject, FeatureIdentifier, StyleOptions, StyleSetterOptions} from '../style/style';
 import type {MapDataEvent} from './events';
-import type {CustomLayerInterface} from '../style/style_layer/custom_style_layer';
 import type {StyleImage, StyleImageInterface, StyleImageMetadata} from '../style/style_image';
 import type {PointLike} from './camera';
 import type {ScrollZoomHandler} from './handler/scroll_zoom';
@@ -51,7 +51,6 @@ import {defaultLocale} from './default_locale';
 import type {TaskID} from '../util/task_queue';
 import type {Cancelable} from '../types/cancelable';
 import type {
-    LayerSpecification,
     FilterSpecification,
     StyleSpecification,
     LightSpecification,
@@ -640,15 +639,17 @@ export class Map extends Camera {
         if (typeof window !== 'undefined') {
             addEventListener('online', this._onWindowOnline, false);
             let initialResizeEventCaptured = false;
+            const throttledResizeCallback = throttle((entries: ResizeObserverEntry[]) => {
+                if (this._trackResize && !this._removed) {
+                    this.resize(entries)._update();
+                }
+            }, 50);
             this._resizeObserver = new ResizeObserver((entries) => {
                 if (!initialResizeEventCaptured) {
                     initialResizeEventCaptured = true;
                     return;
                 }
-
-                if (this._trackResize) {
-                    this.resize(entries)._update();
-                }
+                throttledResizeCallback(entries);
             });
             this._resizeObserver.observe(this._container);
         }
@@ -1962,7 +1963,7 @@ export class Map extends Camera {
      * map.setTerrain({ source: 'terrain' });
      * ```
      */
-    setTerrain(options: TerrainSpecification): this {
+    setTerrain(options: TerrainSpecification | null): this {
         this.style._checkLoaded();
 
         // clear event handlers
@@ -2017,8 +2018,8 @@ export class Map extends Camera {
      * map.getTerrain(); // { source: 'terrain' };
      * ```
      */
-    getTerrain(): TerrainSpecification {
-        return this.terrain && this.terrain.options;
+    getTerrain(): TerrainSpecification | null {
+        return this.terrain?.options ?? null;
     }
 
     /**
@@ -2346,7 +2347,7 @@ export class Map extends Camera {
      *
      * @param layer - The layer to add,
      * conforming to either the MapLibre Style Specification's [layer definition](https://maplibre.org/maplibre-style-spec/layers) or,
-     * less commonly, the {@link CustomLayerInterface} specification.
+     * less commonly, the {@link CustomLayerInterface} specification. Can also be a layer definition with an embedded source definition.
      * The MapLibre Style Specification's layer definition is appropriate for most layers.
      *
      * @param beforeId - The ID of an existing layer to insert the new layer before,
@@ -2418,7 +2419,7 @@ export class Map extends Camera {
      * @see [Add a vector tile source](https://maplibre.org/maplibre-gl-js/docs/examples/vector-source/)
      * @see [Add a WMS source](https://maplibre.org/maplibre-gl-js/docs/examples/wms/)
      */
-    addLayer(layer: (LayerSpecification & {source?: string | SourceSpecification}) | CustomLayerInterface, beforeId?: string) {
+    addLayer(layer: AddLayerObject, beforeId?: string) {
         this._lazyInitEmptyStyle();
         this.style.addLayer(layer, beforeId);
         return this._update(true);
@@ -2475,7 +2476,7 @@ export class Map extends Camera {
      * @see [Filter symbols by toggling a list](https://maplibre.org/maplibre-gl-js/docs/examples/filter-markers/)
      * @see [Filter symbols by text input](https://maplibre.org/maplibre-gl-js/docs/examples/filter-markers-by-input/)
      */
-    getLayer(id: string): StyleLayer {
+    getLayer(id: string): StyleLayer | undefined {
         return this.style.getLayer(id);
     }
 

package/src/ui/marker.ts

@@ -419,7 +419,7 @@ export class Marker extends Evented {
             if (!('offset' in popup.options)) {
                 const markerHeight = 41 - (5.8 / 2);
                 const markerRadius = 13.5;
-                const linearOffset = Math.sqrt(Math.pow(markerRadius, 2) / 2);
+                const linearOffset = Math.abs(markerRadius) / Math.SQRT2;
                 popup.options.offset = this._defaultMarker ? {
                     'top': [0, 0],
                     'top-left': [0, 0],

package/src/ui/popup.ts

@@ -627,7 +627,7 @@ function normalizeOffset(offset?: Offset | null) {
 
     } else if (typeof offset === 'number') {
         // input specifies a radius from which to calculate offsets at all positions
-        const cornerOffset = Math.round(Math.sqrt(0.5 * Math.pow(offset, 2)));
+        const cornerOffset = Math.round(Math.abs(offset) / Math.SQRT2);
         return {
             'center': new Point(0, 0),
             'top': new Point(0, offset),

package/src/util/throttle.ts

@@ -1,21 +1,25 @@
 /**
  * Throttle the given function to run at most every `period` milliseconds.
  */
-export function throttle(fn: () => void, time: number): () => ReturnType<typeof setTimeout> {
+export function throttle<T extends (...args: any) => void>(fn: T, time: number): (...args: Parameters<T>) => ReturnType<typeof setTimeout> {
     let pending = false;
     let timerId: ReturnType<typeof setTimeout> = null;
+    let lastCallContext = null;
+    let lastCallArgs: Parameters<T>;
 
     const later = () => {
         timerId = null;
         if (pending) {
-            fn();
+            fn.apply(lastCallContext, lastCallArgs);
             timerId = setTimeout(later, time);
             pending = false;
         }
     };
 
-    return () => {
+    return (...args: Parameters<T>) => {
         pending = true;
+        lastCallContext = this;
+        lastCallArgs = args;
         if (!timerId) {
             later();
         }