autumnplot-gl 2.0.0-beta.1

package/lib/ContourFill.d.ts

@@ -0,0 +1,58 @@
+import { PlotComponent } from './PlotComponent';
+import { ColorMap } from './Colormap';
+import { WGLBuffer, WGLProgram, WGLTexture } from 'autumn-wgl';
+import { RawScalarField } from './RawField';
+import { MapType } from './Map';
+import { WebGLAnyRenderingContext } from './AutumnTypes';
+interface ContourFillOptions {
+    /** The color map to use when creating the fills */
+    cmap: ColorMap;
+    /**
+     * The opacity for the filled contours
+     * @default 1
+     */
+    opacity?: number;
+}
+interface ContourFillGLElems {
+    program: WGLProgram;
+    vertices: WGLBuffer;
+    fill_texture: WGLTexture;
+    texcoords: WGLBuffer;
+    cmap_texture: WGLTexture;
+    cmap_nonlin_texture: WGLTexture;
+}
+/**
+ * A filled contoured field
+ * @example
+ * // Create a field of filled contours with the provided color map
+ * const fill = new ContourFill(wind_speed_field, {cmap: color_map});
+ */
+declare class ContourFill extends PlotComponent {
+    readonly field: RawScalarField;
+    readonly cmap: ColorMap;
+    readonly opacity: number;
+    /** @private */
+    readonly cmap_image: HTMLCanvasElement;
+    /** @private */
+    readonly index_map: Float32Array;
+    /** @private */
+    gl_elems: ContourFillGLElems | null;
+    /**
+     * Create a filled contoured field
+     * @param field - The field to create filled contours from
+     * @param opts  - Options for creating the filled contours
+     */
+    constructor(field: RawScalarField, opts: ContourFillOptions);
+    /**
+     * @internal
+     * Add the filled contours to a map
+     */
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
+    /**
+     * @internal
+     * Render the filled contours
+     */
+    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+}
+export default ContourFill;
+export type { ContourFillOptions };

package/lib/ContourFill.js

@@ -0,0 +1,125 @@
+import { PlotComponent } from './PlotComponent';
+import { makeTextureImage } from './Colormap';
+import { WGLProgram, WGLTexture } from 'autumn-wgl';
+import { isWebGL2Ctx } from './AutumnTypes';
+const contourfill_vertex_shader_src = `uniform mat4 u_matrix;
+
+attribute vec2 a_pos;
+attribute vec2 a_tex_coord;
+
+varying highp vec2 v_tex_coord;
+
+void main() {
+    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);
+    v_tex_coord = a_tex_coord;
+}`
+const contourfill_fragment_shader_src = `varying highp vec2 v_tex_coord;
+
+uniform sampler2D u_fill_sampler;
+uniform sampler2D u_cmap_sampler;
+uniform sampler2D u_cmap_nonlin_sampler;
+uniform highp float u_cmap_min;
+uniform highp float u_cmap_max;
+uniform highp float u_opacity;
+uniform int u_n_index;
+
+void main() {
+    lowp float index_buffer = 1. / (2. * float(u_n_index));
+    highp float fill_val = texture2D(u_fill_sampler, v_tex_coord).r;
+    lowp float normed_val = (fill_val - u_cmap_min) / (u_cmap_max - u_cmap_min);
+    
+    if (normed_val < 0.0 || normed_val > 1.0) {
+        discard;
+    }
+
+    normed_val = index_buffer + normed_val * (1. - 2. * index_buffer); 
+    highp float nonlin_val = texture2D(u_cmap_nonlin_sampler, vec2(normed_val, 0.5)).r;
+    lowp vec4 color = texture2D(u_cmap_sampler, vec2(nonlin_val, 0.5));
+    color.a = color.a * u_opacity;
+    gl_FragColor = color;
+}`
+/**
+ * A filled contoured field
+ * &example
+ * // Create a field of filled contours with the provided color map
+ * const fill = new ContourFill(wind_speed_field, {cmap: color_map});
+ */
+class ContourFill extends PlotComponent {
+    /**
+     * Create a filled contoured field
+     * &param field - The field to create filled contours from
+     * &param opts  - Options for creating the filled contours
+     */
+    constructor(field, opts) {
+        super();
+        this.field = field;
+        this.cmap = opts.cmap;
+        this.opacity = opts.opacity || 1.;
+        this.cmap_image = makeTextureImage(this.cmap);
+        const levels = this.cmap.levels;
+        const n_lev = levels.length - 1;
+        // Build a texture to account for nonlinear colormaps (basically inverts the relationship between
+        //  the normalized index and the normalized level)
+        const n_nonlin = 101;
+        const map_norm = [];
+        for (let i = 0; i < n_nonlin; i++) {
+            map_norm.push(i / (n_nonlin - 1));
+        }
+        const input_norm = levels.map((lev, ilev) => ilev / n_lev);
+        const cmap_norm = levels.map(lev => (lev - levels[0]) / (levels[n_lev] - levels[0]));
+        const inv_cmap_norm = map_norm.map(lev => {
+            let jlev;
+            for (jlev = 0; !(cmap_norm[jlev] <= lev && lev <= cmap_norm[jlev + 1]); jlev++) { }
+            const alpha = (lev - cmap_norm[jlev]) / (cmap_norm[jlev + 1] - cmap_norm[jlev]);
+            return input_norm[jlev] * (1 - alpha) + input_norm[jlev + 1] * alpha;
+        });
+        this.index_map = new Float32Array(inv_cmap_norm);
+        this.gl_elems = null;
+    }
+    /**
+     * &internal
+     * Add the filled contours to a map
+     */
+    async onAdd(map, gl) {
+        // Basic procedure for the filled contours inspired by https://blog.mbq.me/webgl-weather-globe/
+        gl.getExtension('OES_texture_float');
+        gl.getExtension('OES_texture_float_linear');
+        const program = new WGLProgram(gl, contourfill_vertex_shader_src, contourfill_fragment_shader_src);
+        const { vertices: verts_buf, texcoords: tex_coords_buf } = await this.field.grid.getWGLBuffers(gl);
+        const vertices = verts_buf;
+        const texcoords = tex_coords_buf;
+        const format = isWebGL2Ctx(gl) ? gl.R32F : gl.LUMINANCE;
+        const fill_image = { 'format': format, 'type': gl.FLOAT,
+            'width': this.field.grid.ni, 'height': this.field.grid.nj, 'image': this.field.data,
+            'mag_filter': gl.LINEAR,
+        };
+        const fill_texture = new WGLTexture(gl, fill_image);
+        const cmap_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': this.cmap_image, 'mag_filter': gl.NEAREST };
+        const cmap_texture = new WGLTexture(gl, cmap_image);
+        const cmap_nonlin_image = { 'format': format, 'type': gl.FLOAT,
+            'width': this.index_map.length, 'height': 1,
+            'image': this.index_map,
+            'mag_filter': gl.LINEAR
+        };
+        const cmap_nonlin_texture = new WGLTexture(gl, cmap_nonlin_image);
+        this.gl_elems = {
+            program: program, vertices: vertices, texcoords: texcoords,
+            fill_texture: fill_texture, cmap_texture: cmap_texture, cmap_nonlin_texture: cmap_nonlin_texture,
+        };
+    }
+    /**
+     * &internal
+     * Render the filled contours
+     */
+    render(gl, matrix) {
+        if (this.gl_elems === null)
+            return;
+        const gl_elems = this.gl_elems;
+        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_cmap_min': this.cmap.levels[0], 'u_cmap_max': this.cmap.levels[this.cmap.levels.length - 1], 'u_matrix': matrix, 'u_opacity': this.opacity,
+            'u_n_index': this.index_map.length }, { 'u_fill_sampler': gl_elems.fill_texture, 'u_cmap_sampler': gl_elems.cmap_texture, 'u_cmap_nonlin_sampler': gl_elems.cmap_nonlin_texture });
+        gl.enable(gl.BLEND);
+        gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+        gl_elems.program.draw();
+    }
+}
+export default ContourFill;

package/lib/Hodographs.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="mapbox-gl" />
+import { PlotComponent } from "./PlotComponent";
+import { PolylineCollection } from "./PolylineCollection";
+import { BillboardCollection } from "./BillboardCollection";
+import { MapType } from "./Map";
+import { RawProfileField } from "./RawField";
+import { WebGLAnyRenderingContext } from "./AutumnTypes";
+interface HodographOptions {
+    /**
+     * The color of the hodograph plot background as a hex string
+     */
+    bgcolor?: string;
+    /**
+     * How much to thin the hodographs at zoom level 1 on the map. This effectively means to plot every `n`th hodograph in the i and j directions, where `n` =
+     * `thin_fac`. `thin_fac` should be a power of 2.
+     * @default 1
+     */
+    thin_fac?: number;
+}
+interface HodographGLElems {
+    map: MapType;
+    bg_billboard: BillboardCollection | null;
+    hodo_line: PolylineCollection | null;
+    sm_line: PolylineCollection | null;
+}
+/** A class representing a a field of hodograph plots */
+declare class Hodographs extends PlotComponent {
+    readonly profile_field: RawProfileField;
+    readonly bgcolor: [number, number, number];
+    readonly thin_fac: number;
+    /** @private */
+    gl_elems: HodographGLElems;
+    /**
+     * Create a field of hodographs
+     * @param profile_field - The grid of profiles to plot
+     * @param opts          - Various options to use when creating the hodographs
+     */
+    constructor(profile_field: RawProfileField, opts?: HodographOptions);
+    /**
+     * @internal
+     * Add the hodographs to a map
+     */
+    onAdd(map: mapboxgl.Map, gl: WebGLAnyRenderingContext): Promise<void>;
+    /**
+     * @internal
+     * Render the hodographs
+     */
+    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+}
+export default Hodographs;
+export type { HodographOptions };

package/lib/Hodographs.js

@@ -0,0 +1,152 @@
+import { PlotComponent, layer_worker } from "./PlotComponent";
+import { PolylineCollection } from "./PolylineCollection";
+import { BillboardCollection } from "./BillboardCollection";
+import { getMinZoom, hex2rgba } from './utils';
+import { LngLat } from "./Map";
+const LINE_WIDTH = 4;
+const BG_MAX_RING_MAG = 40;
+const HODO_BG_DIMS = {
+    BB_WIDTH: 256,
+    BB_HEIGHT: 256,
+    BB_TEX_WIDTH: 256,
+    BB_TEX_HEIGHT: 256,
+    BB_MAG_MAX: 1000,
+    BB_MAG_WRAP: 1000,
+    BB_MAG_BIN_SIZE: 1000,
+};
+function _createHodoBackgroundTexture() {
+    let canvas = document.createElement('canvas');
+    canvas.width = HODO_BG_DIMS.BB_TEX_WIDTH;
+    canvas.height = HODO_BG_DIMS.BB_TEX_HEIGHT;
+    let ctx = canvas.getContext('2d');
+    if (ctx === null) {
+        throw "Could not get rendering context for the hodograph background canvas";
+    }
+    ctx.lineWidth = LINE_WIDTH;
+    for (let irng = HODO_BG_DIMS.BB_TEX_WIDTH / 4; irng <= HODO_BG_DIMS.BB_TEX_WIDTH / 2; irng += HODO_BG_DIMS.BB_TEX_WIDTH / 4) {
+        ctx.beginPath();
+        ctx.arc(HODO_BG_DIMS.BB_TEX_WIDTH / 2, HODO_BG_DIMS.BB_TEX_WIDTH / 2, irng - LINE_WIDTH / 2, 0, 2 * Math.PI);
+        ctx.stroke();
+    }
+    const ctr_x = HODO_BG_DIMS.BB_TEX_WIDTH / 2, ctr_y = HODO_BG_DIMS.BB_TEX_WIDTH / 2;
+    const arrow_size = 20;
+    ctx.beginPath();
+    ctx.moveTo(ctr_x, ctr_y);
+    ctx.lineTo(ctr_x + arrow_size / 2, ctr_y + arrow_size);
+    ctx.lineTo(ctr_x - arrow_size / 2, ctr_y + arrow_size);
+    ctx.lineTo(ctr_x, ctr_y);
+    ctx.fill();
+    return canvas;
+}
+;
+let HODO_BG_TEXTURE = null;
+const HODO_COLORS = [
+    { 'bounds': [0, 1], 'color': '#ffffcc' },
+    { 'bounds': [1, 3], 'color': '#a1dab4' },
+    { 'bounds': [3, 6], 'color': '#41b6c4' },
+    { 'bounds': [6, 9], 'color': '#225ea8' }
+];
+function _createHodoHeightTexture() {
+    let canvas = document.createElement('canvas');
+    canvas.width = Math.max(...HODO_COLORS.map(s => Math.max(...s['bounds'])));
+    canvas.height = 1;
+    let ctx = canvas.getContext('2d');
+    HODO_COLORS.forEach(stop => {
+        if (ctx === null) {
+            throw "Could not get rendering context for the hodograph height texture canvas";
+        }
+        const [clb, cub] = stop['bounds'];
+        ctx.fillStyle = stop['color'];
+        ctx.fillRect(clb, 0, cub - clb, 1);
+    });
+    return canvas;
+}
+let HODO_HEIGHT_TEXTURE = null;
+/** A class representing a a field of hodograph plots */
+class Hodographs extends PlotComponent {
+    /**
+     * Create a field of hodographs
+     * @param profile_field - The grid of profiles to plot
+     * @param opts          - Various options to use when creating the hodographs
+     */
+    constructor(profile_field, opts) {
+        super();
+        opts = opts || {};
+        this.profile_field = profile_field;
+        const color = hex2rgba(opts.bgcolor || '#000000');
+        this.bgcolor = [color[0], color[1], color[2]];
+        this.thin_fac = opts.thin_fac || 1;
+        this.gl_elems = null;
+    }
+    /**
+     * @internal
+     * Add the hodographs to a map
+     */
+    async onAdd(map, gl) {
+        const hodo_scale = (HODO_BG_DIMS.BB_TEX_WIDTH - LINE_WIDTH / 2) / (HODO_BG_DIMS.BB_TEX_WIDTH * BG_MAX_RING_MAG);
+        const bg_size = 140;
+        if (HODO_BG_TEXTURE === null) {
+            HODO_BG_TEXTURE = _createHodoBackgroundTexture();
+        }
+        const bg_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': HODO_BG_TEXTURE, 'mag_filter': gl.NEAREST };
+        const max_zoom = map.getMaxZoom();
+        const bg_billboard = new BillboardCollection(gl, this.profile_field.getStormMotionGrid(), this.thin_fac, max_zoom, bg_image, HODO_BG_DIMS, this.bgcolor, bg_size * 0.004);
+        const hodo_polyline = await layer_worker.makePolyLines(this.profile_field.profiles.map(prof => {
+            const pt_ll = new LngLat(prof['lon'], prof['lat']).toMercatorCoord();
+            const zoom = getMinZoom(prof['jlat'], prof['ilon'], this.thin_fac);
+            const max_tex_z = Math.max(...HODO_COLORS.map(s => Math.max(...s['bounds'])));
+            return {
+                'verts': [...prof['u']].map((u, ipt) => [u - prof['smu'], prof['v'][ipt] - prof['smv']]),
+                'origin': [pt_ll.x, pt_ll.y],
+                'zoom': zoom,
+                'texcoords': [...prof['z']].map(z => [z / max_tex_z, 0.5])
+            };
+        }));
+        if (HODO_HEIGHT_TEXTURE === null) {
+            HODO_HEIGHT_TEXTURE = _createHodoHeightTexture();
+        }
+        const height_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': HODO_HEIGHT_TEXTURE, 'mag_filter': gl.NEAREST };
+        const hodo_line = new PolylineCollection(gl, hodo_polyline, height_image, 1.5, hodo_scale * bg_size);
+        const sm_polyline = await layer_worker.makePolyLines(this.profile_field.profiles.map(prof => {
+            const pt_ll = new LngLat(prof['lon'], prof['lat']).toMercatorCoord();
+            let ret = {};
+            const zoom = getMinZoom(prof['jlat'], prof['ilon'], this.thin_fac);
+            const sm_mag = Math.hypot(prof['smu'], prof['smv']);
+            const sm_ang = Math.PI / 2 - Math.atan2(-prof['smv'], -prof['smu']);
+            const buffer = 2;
+            return {
+                'verts': [[buffer * Math.sin(sm_ang), buffer * Math.cos(sm_ang)],
+                    [sm_mag * Math.sin(sm_ang), sm_mag * Math.cos(sm_ang)]],
+                'origin': [pt_ll.x, pt_ll.y],
+                'zoom': zoom,
+                'texcoords': [[0.5, 0.5], [0.5, 0.5]]
+            };
+        }));
+        let byte_color = this.bgcolor.map(c => c * 255);
+        byte_color.push(255);
+        const sm_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'width': 1, 'height': 1, 'image': new Uint8Array(byte_color),
+            'mag_filter': gl.NEAREST };
+        const sm_line = new PolylineCollection(gl, sm_polyline, sm_image, 1, hodo_scale * bg_size);
+        this.gl_elems = {
+            map: map, bg_billboard: bg_billboard, hodo_line: hodo_line, sm_line: sm_line
+        };
+    }
+    /**
+     * @internal
+     * Render the hodographs
+     */
+    render(gl, matrix) {
+        if (this.gl_elems === null)
+            return;
+        const gl_elems = this.gl_elems;
+        const zoom = gl_elems.map.getZoom();
+        const map_width = gl_elems.map.getCanvas().width;
+        const map_height = gl_elems.map.getCanvas().height;
+        const bearing = gl_elems.map.getBearing();
+        const pitch = gl_elems.map.getPitch();
+        gl_elems.hodo_line.render(gl, matrix, [map_width, map_height], zoom, bearing, pitch);
+        gl_elems.sm_line.render(gl, matrix, [map_width, map_height], zoom, bearing, bearing);
+        gl_elems.bg_billboard.render(gl, matrix, [map_width, map_height], zoom, bearing, pitch);
+    }
+}
+export default Hodographs;

package/lib/Map.d.ts

@@ -0,0 +1,34 @@
+import mapboxgl from 'mapbox-gl';
+type MapType = mapboxgl.Map | maplibregl.Map;
+interface LambertConformalConicParameters {
+    lon_0: number;
+    lat_0: number;
+    lat_std: [number, number] | number;
+}
+declare function lambertConformalConic(params: LambertConformalConicParameters): (a: number, b: number, opts?: {
+    inverse: boolean;
+}) => [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 uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match the
+ * [GeoJSON specification](https://tools.ietf.org/html/rfc7946).
+ *
+ * @param {number} lng Longitude, measured in degrees.
+ * @param {number} lat Latitude, measured in degrees.
+ * @example
+ * var ll = new LngLat(-123.9749, 40.7736);
+ * ll.lng; // = -123.9749
+ */
+declare class LngLat {
+    lng: number;
+    lat: number;
+    constructor(lng: number, lat: number);
+    toMercatorCoord(): {
+        x: number;
+        y: number;
+    };
+}
+export { LngLat, lambertConformalConic };
+export type { MapType };

package/lib/Map.js

@@ -0,0 +1,120 @@
+function lambertConformalConic(params) {
+    // Formulas from https://pubs.usgs.gov/pp/1395/report.pdf
+    const compute_t = (lat) => {
+        const sin_lat = Math.sin(lat);
+        return Math.tan(Math.PI / 4 - lat / 2) * Math.pow((1 + eccen * sin_lat) / (1 - eccen * sin_lat), eccen / 2);
+    };
+    const compute_m = (lat) => {
+        const sin_lat = Math.sin(lat);
+        return Math.cos(lat) / Math.sqrt(1 - eccen * eccen * sin_lat * sin_lat);
+    };
+    // WGS 84 spheroid
+    const semimajor = 6378137.0;
+    const semiminor = 6356752.314245;
+    const eccen = Math.sqrt(1 - (semiminor * semiminor) / (semimajor * semimajor));
+    const radians = Math.PI / 180;
+    let { lon_0, lat_0, lat_std } = params;
+    lat_std = Array.isArray(lat_std) && lat_std[0] == lat_std[1] ? lat_std[0] : lat_std;
+    lon_0 *= radians;
+    lat_0 *= radians;
+    let F, n;
+    const t_0 = compute_t(lat_0);
+    if (Array.isArray(lat_std)) {
+        let [lat_1, lat_2] = lat_std;
+        lat_1 *= radians;
+        lat_2 *= radians;
+        const t_1 = compute_t(lat_1);
+        const t_2 = compute_t(lat_2);
+        const m_1 = compute_m(lat_1);
+        const m_2 = compute_m(lat_2);
+        n = Math.log(m_1 / m_2) / Math.log(t_1 / t_2);
+        F = m_1 / (n * Math.pow(t_1, n));
+    }
+    else {
+        let lat_1 = lat_std;
+        lat_1 *= radians;
+        const t_1 = compute_t(lat_1);
+        const m_1 = compute_m(lat_1);
+        n = Math.sin(lat_1);
+        F = m_1 / (n * Math.pow(t_1, n));
+    }
+    const rho_0 = semimajor * F * Math.pow(t_0, n);
+    const compute_lcc = (lon, lat) => {
+        lon *= radians;
+        lat *= radians;
+        const t = compute_t(lat);
+        const rho = semimajor * F * Math.pow(t, n);
+        const theta = n * (lon - lon_0);
+        const x = rho * Math.sin(theta);
+        const y = rho_0 - rho * Math.cos(theta);
+        return [x, y];
+    };
+    const eccen2 = eccen * eccen;
+    const eccen4 = eccen2 * eccen2;
+    const eccen6 = eccen4 * eccen2;
+    const eccen8 = eccen6 * eccen2;
+    /*
+        const A = eccen2 / 2 + 5 * eccen4 / 24 + eccen6 / 12 + 13 * eccen8 / 360;
+        const B = 7 * eccen4 / 48 + 29 * eccen6 / 240 + 811 * eccen8 / 11520;
+        const C = 7 * eccen6 / 120 + 81 * eccen8 / 1120;
+        const D = 4279 * eccen8 / 161280;
+        const Ap = A - C;
+        const Bp = 2 * B - 4 * D;
+        const Cp = 4 * C;
+        const Dp = 8 * D;
+    */
+    const Ap = eccen2 / 2 + 5 * eccen4 / 24 + 3 * eccen6 / 120 - 73 * eccen8 / 2016;
+    const Bp = 7 * eccen4 / 24 + 29 * eccen6 / 120 + 233 * eccen8 / 6720;
+    const Cp = 7 * eccen6 / 30 + 81 * eccen8 / 280;
+    const Dp = 4729 * eccen8 / 20160;
+    const compute_lcc_inverse = (x, y) => {
+        const theta = Math.atan2(x, rho_0 - y); // These arguments are backwards from what I'd expect ...
+        const lon = theta / n + lon_0;
+        const rho = Math.hypot(x, rho_0 - y) * Math.sign(n);
+        const t = Math.pow(rho / (semimajor * F), 1 / n);
+        const chi = Math.PI / 2 - 2 * Math.atan(t);
+        const sin_2chi = Math.sin(2 * chi);
+        const cos_2chi = Math.cos(2 * chi);
+        const lat = chi + sin_2chi * (Ap + cos_2chi * (Bp + cos_2chi * (Cp + Dp * cos_2chi)));
+        return [lon / radians, lat / radians];
+    };
+    return (a, b, opts) => {
+        opts = opts === undefined ? { inverse: false } : opts;
+        return opts.inverse ? compute_lcc_inverse(a, b) : compute_lcc(a, b);
+    };
+}
+function mercatorXfromLng(lng) {
+    return (180 + lng) / 360;
+}
+function mercatorYfromLat(lat) {
+    return (180 - (180 / Math.PI * Math.log(Math.tan(Math.PI / 4 + lat * Math.PI / 360)))) / 360;
+}
+/**
+ * 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 uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match the
+ * [GeoJSON specification](https://tools.ietf.org/html/rfc7946).
+ *
+ * @param {number} lng Longitude, measured in degrees.
+ * @param {number} lat Latitude, measured in degrees.
+ * @example
+ * var ll = new LngLat(-123.9749, 40.7736);
+ * ll.lng; // = -123.9749
+ */
+class LngLat {
+    constructor(lng, lat) {
+        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');
+        }
+    }
+    toMercatorCoord() {
+        return { x: mercatorXfromLng(this.lng), y: mercatorYfromLat(this.lat) };
+    }
+}
+export { LngLat, lambertConformalConic };

package/lib/Paintball.d.ts

@@ -0,0 +1,56 @@
+import { WebGLAnyRenderingContext } from "./AutumnTypes";
+import { MapType } from "./Map";
+import { PlotComponent } from "./PlotComponent";
+import { RawScalarField } from "./RawField";
+import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
+interface PaintballOptions {
+    /**
+     * The list of colors (as hex strings) to use for each member in the paintball plot. The first color corresponds to member 1, the second to member 2, etc.
+     */
+    colors?: string[];
+    /**
+     * The opacity of the paintball plot
+     * @default 1
+     */
+    opacity?: number;
+}
+interface PaintballGLElems {
+    program: WGLProgram;
+    vertices: WGLBuffer;
+    fill_texture: WGLTexture;
+    texcoords: WGLBuffer;
+}
+/**
+ * A class representing a paintball plot, which is a plot of objects in every member of an ensemble. Objects are usually defined by a single threshold on
+ * a field (such as simulated reflectivity greater than 40 dBZ), but could in theory be defined by any arbitrarily complicated method. In autumnplot-gl,
+ * the data for the paintball plot is given as a single field with the objects from each member encoded as "bits" in the field. Because the field is made up
+ * of single-precision floats, this works for up to 24 members. (Technically speaking, I don't need the quotes around "bits", as they're bits of the
+ * significand of an IEEE 754 float.)
+ */
+declare class Paintball extends PlotComponent {
+    readonly field: RawScalarField;
+    readonly colors: number[];
+    readonly opacity: number;
+    /** @private */
+    gl_elems: PaintballGLElems | null;
+    /**
+     * Create a paintball plot
+     * @param field - A scalar field containing the member objects encoded as "bits." The numerical value of each grid point can be constructed like
+     *               `1.0 * M1 + 2.0 * M2 + 4.0 * M3 + 8.0 * M4 ...`, where `M1` is 1 if that grid point is in an object in member 1 and 0 otherwise,
+     *               `M2` is the same thing for member 2, and `M3` and `M4` and up to `Mn` are the same thing for the rest of the members.
+     * @param opts  - Options for creating the paintball plot
+     */
+    constructor(field: RawScalarField, opts?: PaintballOptions);
+    /**
+     * @internal
+     * Add the paintball plot to a map.
+     */
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
+    /**
+     * @internal
+     * Render the paintball plot
+     */
+    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+}
+export default Paintball;
+export type { PaintballOptions };