@scoova/mgl 1.0.0

package/src/data/raster_bounds_attributes.ts

@@ -0,0 +1,6 @@
+import {createLayout} from '../util/struct_array';
+
+export default createLayout([
+    {name: 'a_pos', type: 'Int16', components: 2},
+    {name: 'a_texture_pos', type: 'Int16', components: 2}
+]);

package/src/data/segment.ts

@@ -0,0 +1,89 @@
+import {warnOnce} from '../util/util';
+
+import {register} from '../util/web_worker_transfer';
+
+import type {VertexArrayObject} from '../render/vertex_array_object';
+import type {StructArray} from '../util/struct_array';
+
+/**
+ * @internal
+ * A single segment of a vector
+ */
+export type Segment = {
+    sortKey?: number;
+    vertexOffset: number;
+    primitiveOffset: number;
+    vertexLength: number;
+    primitiveLength: number;
+    vaos: {[_: string]: VertexArrayObject};
+};
+
+/**
+ * @internal
+ * Used for calculations on vector segments
+ */
+export class SegmentVector {
+    static MAX_VERTEX_ARRAY_LENGTH: number;
+    segments: Array<Segment>;
+
+    constructor(segments: Array<Segment> = []) {
+        this.segments = segments;
+    }
+
+    prepareSegment(
+        numVertices: number,
+        layoutVertexArray: StructArray,
+        indexArray: StructArray,
+        sortKey?: number
+    ): Segment {
+        let segment: Segment = this.segments[this.segments.length - 1];
+        if (numVertices > SegmentVector.MAX_VERTEX_ARRAY_LENGTH) warnOnce(`Max vertices per segment is ${SegmentVector.MAX_VERTEX_ARRAY_LENGTH}: bucket requested ${numVertices}`);
+        if (!segment || segment.vertexLength + numVertices > SegmentVector.MAX_VERTEX_ARRAY_LENGTH || segment.sortKey !== sortKey) {
+            segment = ({
+                vertexOffset: layoutVertexArray.length,
+                primitiveOffset: indexArray.length,
+                vertexLength: 0,
+                primitiveLength: 0
+            } as any);
+            if (sortKey !== undefined) segment.sortKey = sortKey;
+            this.segments.push(segment);
+        }
+        return segment;
+    }
+
+    get() {
+        return this.segments;
+    }
+
+    destroy() {
+        for (const segment of this.segments) {
+            for (const k in segment.vaos) {
+                segment.vaos[k].destroy();
+            }
+        }
+    }
+
+    static simpleSegment(
+        vertexOffset: number,
+        primitiveOffset: number,
+        vertexLength: number,
+        primitiveLength: number
+    ): SegmentVector {
+        return new SegmentVector([{
+            vertexOffset,
+            primitiveOffset,
+            vertexLength,
+            primitiveLength,
+            vaos: {},
+            sortKey: 0
+        }]);
+    }
+}
+
+/**
+ * The maximum size of a vertex array. This limit is imposed by WebGL's 16 bit
+ * addressing of vertex buffers.
+ */
+SegmentVector.MAX_VERTEX_ARRAY_LENGTH = Math.pow(2, 16) - 1;
+
+register('SegmentVector', SegmentVector);

package/src/geo/edge_insets.test.ts

@@ -0,0 +1,83 @@
+import expect from 'expect';
+import {EdgeInsets} from '../geo/edge_insets';
+
+describe('EdgeInsets', () => {
+    describe('#constructor', () => {
+        test('creates an object with default values', () => {
+            expect(new EdgeInsets() instanceof EdgeInsets).toBeTruthy();
+        });
+
+        test('invalid initialization', () => {
+            expect(() => {
+                new EdgeInsets(NaN, 10);
+            }).toThrow('Invalid value for edge-insets, top, bottom, left and right must all be numbers');
+
+            expect(() => {
+                new EdgeInsets(-10, 10, 20, 10);
+            }).toThrow('Invalid value for edge-insets, top, bottom, left and right must all be numbers');
+        });
+
+        test('valid initialization', () => {
+            const top = 10;
+            const bottom = 15;
+            const left = 26;
+            const right = 19;
+
+            const inset = new EdgeInsets(top, bottom, left, right);
+            expect(inset.top).toBe(top);
+            expect(inset.bottom).toBe(bottom);
+            expect(inset.left).toBe(left);
+            expect(inset.right).toBe(right);
+        });
+    });
+
+    describe('#getCenter', () => {
+        test('valid input', () => {
+            const inset = new EdgeInsets(10, 15, 50, 10);
+            const center = inset.getCenter(600, 400);
+            expect(center.x).toBe(320);
+            expect(center.y).toBe(197.5);
+        });
+
+        test('center clamping', () => {
+            const inset = new EdgeInsets(300, 200, 500, 200);
+            const center = inset.getCenter(600, 400);
+
+            // Midpoint of the overlap when padding overlaps
+            expect(center.x).toBe(450);
+            expect(center.y).toBe(250);
+        });
+    });
+
+    describe('#interpolate', () => {
+        test('it works', () => {
+            const inset1 = new EdgeInsets(10, 15, 50, 10);
+            const inset2 = new EdgeInsets(20, 30, 100, 10);
+            const inset3 = inset1.interpolate(inset1, inset2, 0.5);
+
+            // inset1 is mutated in-place
+            expect(inset3).toBe(inset1);
+
+            expect(inset3.top).toBe(15);
+            expect(inset3.bottom).toBe(22.5);
+            expect(inset3.left).toBe(75);
+            expect(inset3.right).toBe(10);
+        });
+
+    });
+
+    test('#equals', () => {
+        const inset1 = new EdgeInsets(10, 15, 50, 10);
+        const inset2 = new EdgeInsets(10, 15, 50, 10);
+        const inset3 = new EdgeInsets(10, 15, 50, 11);
+        expect(inset1.equals(inset2)).toBeTruthy();
+        expect(inset2.equals(inset3)).toBeFalsy();
+    });
+
+    test('#clone', () => {
+        const inset1 = new EdgeInsets(10, 15, 50, 10);
+        const inset2 = inset1.clone();
+        expect(inset2 === inset1).toBeFalsy();
+        expect(inset1.equals(inset2)).toBeTruthy();
+    });
+});

package/src/geo/edge_insets.ts

@@ -0,0 +1,146 @@
+import {interpolates} from '@maplibre/maplibre-gl-style-spec';
+import Point from '@mapbox/point-geometry';
+import {clamp} from '../util/util';
+
+/**
+ * An `EdgeInset` object represents screen space padding applied to the edges of the viewport.
+ * This shifts the apprent center or the vanishing point of the map. This is useful for adding floating UI elements
+ * on top of the map and having the vanishing point shift as UI elements resize.
+ *
+ * @group Geography and Geometry
+ */
+export class EdgeInsets {
+    /**
+     * @defaultValue 0
+     */
+    top: number;
+    /**
+     * @defaultValue 0
+     */
+    bottom: number;
+    /**
+     * @defaultValue 0
+     */
+    left: number;
+    /**
+     * @defaultValue 0
+     */
+    right: number;
+
+    constructor(top: number = 0, bottom: number = 0, left: number = 0, right: number = 0) {
+        if (isNaN(top) || top < 0 ||
+            isNaN(bottom) || bottom < 0 ||
+            isNaN(left) || left < 0 ||
+            isNaN(right) || right < 0
+        ) {
+            throw new Error('Invalid value for edge-insets, top, bottom, left and right must all be numbers');
+        }
+
+        this.top = top;
+        this.bottom = bottom;
+        this.left = left;
+        this.right = right;
+    }
+
+    /**
+     * Interpolates the inset in-place.
+     * This maintains the current inset value for any inset not present in `target`.
+     * @param start - interpolation start
+     * @param target - interpolation target
+     * @param t - interpolation step/weight
+     * @returns the insets
+     */
+    interpolate(start: PaddingOptions | EdgeInsets, target: PaddingOptions, t: number): EdgeInsets {
+        if (target.top != null && start.top != null) this.top = interpolates.number(start.top, target.top, t);
+        if (target.bottom != null && start.bottom != null) this.bottom = interpolates.number(start.bottom, target.bottom, t);
+        if (target.left != null && start.left != null) this.left = interpolates.number(start.left, target.left, t);
+        if (target.right != null && start.right != null) this.right = interpolates.number(start.right, target.right, t);
+
+        return this;
+    }
+
+    /**
+     * Utility method that computes the new apprent center or vanishing point after applying insets.
+     * This is in pixels and with the top left being (0.0) and +y being downwards.
+     *
+     * @param width - the width
+     * @param height - the height
+     * @returns the point
+     */
+    getCenter(width: number, height: number): Point {
+        // Clamp insets so they never overflow width/height and always calculate a valid center
+        const x = clamp((this.left + width - this.right) / 2, 0, width);
+        const y = clamp((this.top + height - this.bottom) / 2, 0, height);
+
+        return new Point(x, y);
+    }
+
+    equals(other: PaddingOptions): boolean {
+        return this.top === other.top &&
+            this.bottom === other.bottom &&
+            this.left === other.left &&
+            this.right === other.right;
+    }
+
+    clone(): EdgeInsets {
+        return new EdgeInsets(this.top, this.bottom, this.left, this.right);
+    }
+
+    /**
+     * Returns the current state as json, useful when you want to have a
+     * read-only representation of the inset.
+     *
+     * @returns state as json
+     */
+    toJSON(): PaddingOptions {
+        return {
+            top: this.top,
+            bottom: this.bottom,
+            left: this.left,
+            right: this.right
+        };
+    }
+}
+
+/**
+ * Options for setting padding on calls to methods such as {@link Map#fitBounds}, {@link Map#fitScreenCoordinates}, and {@link Map#setPadding}. Adjust these options to set the amount of padding in pixels added to the edges of the canvas. Set a uniform padding on all edges or individual values for each edge. All properties of this object must be
+ * non-negative integers.
+ *
+ * @group Geography and Geometry
+ *
+ * @example
+ * ```ts
+ * let bbox = [[-79, 43], [-73, 45]];
+ * map.fitBounds(bbox, {
+ *   padding: {top: 10, bottom:25, left: 15, right: 5}
+ * });
+ * ```
+ *
+ * @example
+ * ```ts
+ * let bbox = [[-79, 43], [-73, 45]];
+ * map.fitBounds(bbox, {
+ *   padding: 20
+ * });
+ * ```
+ * @see [Fit to the bounds of a LineString](https://maplibre.org/maplibre-gl-js/docs/examples/zoomto-linestring/)
+ * @see [Fit a map to a bounding box](https://maplibre.org/maplibre-gl-js/docs/examples/fitbounds/)
+ */
+export type PaddingOptions = {
+    /**
+     * Padding in pixels from the top of the map canvas.
+     */
+    top: number;
+    /**
+     * Padding in pixels from the bottom of the map canvas.
+     */
+    bottom: number;
+    /**
+     * Padding in pixels from the left of the map canvas.
+     */
+    right: number;
+    /**
+     * Padding in pixels from the right of the map canvas.
+     */
+    left: number;
+};

package/src/geo/lng_lat.test.ts

@@ -0,0 +1,65 @@
+import {LngLat} from '../geo/lng_lat';
+
+describe('LngLat', () => {
+    test('#constructor', () => {
+        expect(new LngLat(0, 0) instanceof LngLat).toBeTruthy();
+
+        expect(() => {
+            /*eslint no-new: 0*/
+            new LngLat(0, -91);
+        }).toThrow('Invalid LngLat latitude value: must be between -90 and 90');
+
+        expect(() => {
+            /*eslint no-new: 0*/
+            new LngLat(0, 91);
+        }).toThrow('Invalid LngLat latitude value: must be between -90 and 90');
+    });
+
+    test('#convert', () => {
+        expect(LngLat.convert([0, 10]) instanceof LngLat).toBeTruthy();
+        expect(LngLat.convert({lng: 0, lat: 10}) instanceof LngLat).toBeTruthy();
+        expect(LngLat.convert({lng: 0, lat: 0}) instanceof LngLat).toBeTruthy();
+        expect(LngLat.convert({lon: 0, lat: 10}) instanceof LngLat).toBeTruthy();
+        expect(LngLat.convert({lon: 0, lat: 0}) instanceof LngLat).toBeTruthy();
+        expect(LngLat.convert(new LngLat(0, 0)) instanceof LngLat).toBeTruthy();
+    });
+
+    test('#wrap', () => {
+        expect(new LngLat(0, 0).wrap()).toEqual({lng: 0, lat: 0});
+        expect(new LngLat(10, 20).wrap()).toEqual({lng: 10, lat: 20});
+        expect(new LngLat(360, 0).wrap()).toEqual({lng: 0, lat: 0});
+        expect(new LngLat(190, 0).wrap()).toEqual({lng: -170, lat: 0});
+    });
+
+    test('#toArray', () => {
+        expect(new LngLat(10, 20).toArray()).toEqual([10, 20]);
+    });
+
+    test('#toString', () => {
+        expect(new LngLat(10, 20).toString()).toBe('LngLat(10, 20)');
+    });
+
+    test('#distanceTo', () => {
+        const newYork = new LngLat(-74.0060, 40.7128);
+        const losAngeles = new LngLat(-118.2437, 34.0522);
+        const d = newYork.distanceTo(losAngeles); // 3935751.690893987, "true distance" is 3966km
+        expect(d > 3935750).toBeTruthy();
+        expect(d < 3935752).toBeTruthy();
+    });
+
+    test('#distanceTo to pole', () => {
+        const newYork = new LngLat(-74.0060, 40.7128);
+        const northPole = new LngLat(-135, 90);
+        const d = newYork.distanceTo(northPole); // 5480494.158486183 , "true distance" is 5499km
+        expect(d > 5480493).toBeTruthy();
+        expect(d < 5480495).toBeTruthy();
+    });
+
+    test('#distanceTo to Null Island', () => {
+        const newYork = new LngLat(-74.0060, 40.7128);
+        const nullIsland = new LngLat(0, 0);
+        const d = newYork.distanceTo(nullIsland); // 8667080.125666846 , "true distance" is 8661km
+        expect(d > 8667079).toBeTruthy();
+        expect(d < 8667081).toBeTruthy();
+    });
+});

package/src/geo/lng_lat.ts

@@ -0,0 +1,169 @@
+import {wrap} from '../util/util';
+
+/*
+* Approximate radius of the earth in meters.
+* Uses the WGS-84 approximation. The radius at the equator is ~6378137 and at the poles is ~6356752. https://en.wikipedia.org/wiki/World_Geodetic_System#WGS84
+* 6371008.8 is one published "average radius" see https://en.wikipedia.org/wiki/Earth_radius#Mean_radius, or ftp://athena.fsv.cvut.cz/ZFG/grs80-Moritz.pdf p.4
+*/
+export const earthRadius = 6371008.8;
+
+/**
+ * A {@link LngLat} object, an array of two numbers representing longitude and latitude,
+ * or an object with `lng` and `lat` or `lon` and `lat` properties.
+ *
+ * @group Geography and Geometry
+ *
+ * @example
+ * ```ts
+ * let v1 = new LngLat(-122.420679, 37.772537);
+ * let v2 = [-122.420679, 37.772537];
+ * let v3 = {lon: -122.420679, lat: 37.772537};
+ * ```
+ */
+export type LngLatLike = LngLat | {
+    lng: number;
+    lat: number;
+} | {
+    lon: number;
+    lat: number;
+} | [number, number];
+
+/**
+ * A `LngLat` object represents a given longitude and latitude coordinate, measured in degrees.
+ * These coordinates are based on the [WGS84 (EPSG:4326) standard](https://en.wikipedia.org/wiki/World_Geodetic_System#WGS84).
+ *
+ * MapLibre GL JS uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match the
+ * [GeoJSON specification](https://tools.ietf.org/html/rfc7946).
+ *
+ * Note that any MapLibre GL JS method that accepts a `LngLat` object as an argument or option
+ * can also accept an `Array` of two numbers and will perform an implicit conversion.
+ * This flexible type is documented as {@link LngLatLike}.
+ *
+ * @group Geography and Geometry
+ *
+ * @example
+ * ```ts
+ * let ll = new LngLat(-123.9749, 40.7736);
+ * ll.lng; // = -123.9749
+ * ```
+ * @see [Get coordinates of the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/mouse-position/)
+ * @see [Display a popup](https://maplibre.org/maplibre-gl-js/docs/examples/popup/)
+ * @see [Create a timeline animation](https://maplibre.org/maplibre-gl-js/docs/examples/timeline-animation/)
+ */
+export class LngLat {
+    lng: number;
+    lat: number;
+
+    /**
+     * @param lng - Longitude, measured in degrees.
+     * @param lat - Latitude, measured in degrees.
+     */
+    constructor(lng: number, lat: number) {
+        if (isNaN(lng) || isNaN(lat)) {
+            throw new Error(`Invalid LngLat object: (${lng}, ${lat})`);
+        }
+        this.lng = +lng;
+        this.lat = +lat;
+        if (this.lat > 90 || this.lat < -90) {
+            throw new Error('Invalid LngLat latitude value: must be between -90 and 90');
+        }
+    }
+
+    /**
+     * Returns a new `LngLat` object whose longitude is wrapped to the range (-180, 180).
+     *
+     * @returns The wrapped `LngLat` object.
+     * @example
+     * ```ts
+     * let ll = new LngLat(286.0251, 40.7736);
+     * let wrapped = ll.wrap();
+     * wrapped.lng; // = -73.9749
+     * ```
+     */
+    wrap() {
+        return new LngLat(wrap(this.lng, -180, 180), this.lat);
+    }
+
+    /**
+     * Returns the coordinates represented as an array of two numbers.
+     *
+     * @returns The coordinates represented as an array of longitude and latitude.
+     * @example
+     * ```ts
+     * let ll = new LngLat(-73.9749, 40.7736);
+     * ll.toArray(); // = [-73.9749, 40.7736]
+     * ```
+     */
+    toArray(): [number, number] {
+        return [this.lng, this.lat];
+    }
+
+    /**
+     * Returns the coordinates represent as a string.
+     *
+     * @returns The coordinates represented as a string of the format `'LngLat(lng, lat)'`.
+     * @example
+     * ```ts
+     * let ll = new LngLat(-73.9749, 40.7736);
+     * ll.toString(); // = "LngLat(-73.9749, 40.7736)"
+     * ```
+     */
+    toString(): string {
+        return `LngLat(${this.lng}, ${this.lat})`;
+    }
+
+    /**
+     * Returns the approximate distance between a pair of coordinates in meters
+     * Uses the Haversine Formula (from R.W. Sinnott, "Virtues of the Haversine", Sky and Telescope, vol. 68, no. 2, 1984, p. 159)
+     *
+     * @param lngLat - coordinates to compute the distance to
+     * @returns Distance in meters between the two coordinates.
+     * @example
+     * ```ts
+     * let new_york = new LngLat(-74.0060, 40.7128);
+     * let los_angeles = new LngLat(-118.2437, 34.0522);
+     * new_york.distanceTo(los_angeles); // = 3935751.690893987, "true distance" using a non-spherical approximation is ~3966km
+     * ```
+     */
+    distanceTo(lngLat: LngLat): number {
+        const rad = Math.PI / 180;
+        const lat1 = this.lat * rad;
+        const lat2 = lngLat.lat * rad;
+        const a = Math.sin(lat1) * Math.sin(lat2) + Math.cos(lat1) * Math.cos(lat2) * Math.cos((lngLat.lng - this.lng) * rad);
+
+        const maxMeters = earthRadius * Math.acos(Math.min(a, 1));
+        return maxMeters;
+    }
+
+    /**
+     * Converts an array of two numbers or an object with `lng` and `lat` or `lon` and `lat` properties
+     * to a `LngLat` object.
+     *
+     * If a `LngLat` object is passed in, the function returns it unchanged.
+     *
+     * @param input - An array of two numbers or object to convert, or a `LngLat` object to return.
+     * @returns A new `LngLat` object, if a conversion occurred, or the original `LngLat` object.
+     * @example
+     * ```ts
+     * let arr = [-73.9749, 40.7736];
+     * let ll = LngLat.convert(arr);
+     * ll;   // = LngLat {lng: -73.9749, lat: 40.7736}
+     * ```
+     */
+    static convert(input: LngLatLike): LngLat {
+        if (input instanceof LngLat) {
+            return input;
+        }
+        if (Array.isArray(input) && (input.length === 2 || input.length === 3)) {
+            return new LngLat(Number(input[0]), Number(input[1]));
+        }
+        if (!Array.isArray(input) && typeof input === 'object' && input !== null) {
+            return new LngLat(
+                // flow can't refine this to have one of lng or lat, so we have to cast to any
+                Number('lng' in input ? (input as any).lng : (input as any).lon),
+                Number(input.lat)
+            );
+        }
+        throw new Error('`LngLatLike` argument must be specified as a LngLat instance, an object {lng: <lng>, lat: <lat>}, an object {lon: <lng>, lat: <lat>}, or an array of [<lng>, <lat>]');
+    }
+}