autumnplot-gl 3.1.0 → 4.0.0-beta

package/lib/Grid.js

@@ -1,45 +1,58 @@
 import { Float16Array } from "@petamoriken/float16";
 import { WGLBuffer, WGLTexture } from "autumn-wgl";
-import { lambertConformalConic, rotateSphere } from "./Map";
+import { LngLat, lambertConformalConic, rotateSphere } from "./Map";
 import { getGLFormatTypeAlignment, layer_worker } from "./PlotComponent";
-import { Cache } from "./utils";
-async function makeWGLDomainBuffers(gl, grid, native_grid) {
-    native_grid = native_grid !== undefined ? native_grid : grid;
-    const texcoord_margin_r = 1 / (2 * native_grid.ni);
-    const texcoord_margin_s = 1 / (2 * native_grid.nj);
-    const grid_cell_size_multiplier = (grid.ni * grid.nj) / (native_grid.ni * native_grid.nj);
-    const { lats: field_lats, lons: field_lons } = grid.getEarthCoords();
-    const domain_coords = await layer_worker.makeDomainVerticesAndTexCoords(field_lats, field_lons, grid.ni, grid.nj, texcoord_margin_r, texcoord_margin_s);
-    for (let icd = 0; icd < domain_coords['grid_cell_size'].length; icd++) {
-        domain_coords['grid_cell_size'][icd] *= grid_cell_size_multiplier;
+import { Cache, getArrayConstructor, getMinZoom } from "./utils";
+import { kdTree } from "kd-tree-javascript";
+function argMin(ary) {
+    if (ary.length === 0) {
+        return -1;
+    }
+    let min = ary[0];
+    let minIndex = 0;
+    for (let i = 1; i < ary.length; i++) {
+        if (ary[i] < min) {
+            minIndex = i;
+            min = ary[i];
+        }
     }
+    return minIndex;
+}
+async function makeWGLDomainBuffers(gl, grid, simplify_ni, simplify_nj) {
+    const texcoord_margin_r = 1 / (2 * grid.ni);
+    const texcoord_margin_s = 1 / (2 * grid.nj);
+    const { lats: field_lats, lons: field_lons } = grid.getEarthCoords(simplify_ni, simplify_nj);
+    const domain_coords = await layer_worker.makeDomainVerticesAndTexCoords(field_lats, field_lons, simplify_ni, simplify_nj, texcoord_margin_r, texcoord_margin_s);
     const vertices = new WGLBuffer(gl, domain_coords['vertices'], 2, gl.TRIANGLE_STRIP);
     const texcoords = new WGLBuffer(gl, domain_coords['tex_coords'], 2, gl.TRIANGLE_STRIP);
-    const grid_cell_size = new WGLBuffer(gl, domain_coords['grid_cell_size'], 1, gl.TRIANGLE_STRIP);
-    return { 'vertices': vertices, 'texcoords': texcoords, 'cellsize': grid_cell_size };
+    return { 'vertices': vertices, 'texcoords': texcoords };
 }
-async function makeWGLBillboardBuffers(gl, grid, thin_fac, max_zoom) {
+async function makeWGLBillboardBuffers(gl, grid, thin_fac, map_max_zoom) {
     const { lats: field_lats, lons: field_lons } = grid.getEarthCoords();
-    const bb_elements = await layer_worker.makeBBElements(field_lats, field_lons, grid.ni, grid.nj, thin_fac, max_zoom);
-    const vertices = new WGLBuffer(gl, bb_elements['pts'], 3, gl.TRIANGLE_STRIP);
-    const texcoords = new WGLBuffer(gl, bb_elements['tex_coords'], 2, gl.TRIANGLE_STRIP);
+    const min_zoom = grid.getMinVisibleZoom(thin_fac);
+    const bb_elements = await layer_worker.makeBBElements(field_lats, field_lons, min_zoom, grid.ni, grid.nj, map_max_zoom);
+    const vertices = new WGLBuffer(gl, bb_elements['pts'], 2, gl.POINTS, { per_instance: true });
+    const texcoords = new WGLBuffer(gl, bb_elements['tex_coords'], 2, gl.POINTS, { per_instance: true });
     return { 'vertices': vertices, 'texcoords': texcoords };
 }
-function makeVectorRotationTexture(gl, grid) {
+function makeVectorRotationTexture(gl, grid, data_are_earth_relative) {
     const coords = grid.getEarthCoords();
-    if (!grid.is_conformal) {
-        // If the grid is non-conformal, we need a fully general change of basis from grid coordinates to earth coordinates. This is not supported for now, so warn about it.
-        console.warn('Vector rotations for non-conformal projections are not supported. The output may look incorrect.');
-    }
-    const rot_vals = new Float16Array(coords.lats.length);
-    for (let icd = 0; icd < coords.lats.length; icd++) {
-        const lon = coords.lons[icd];
-        const lat = coords.lats[icd];
-        const [x, y] = grid.transform(lon, lat);
-        const [x_pertlon, y_pertlon] = grid.transform(lon + 0.01, lat);
-        rot_vals[icd] = Math.atan2(y_pertlon - y, x_pertlon - x);
-    }
-    const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, true);
+    const rot_vals = new Float16Array(grid.ni * grid.nj).fill(parseFloat('nan'));
+    if (data_are_earth_relative) {
+        rot_vals.fill(0);
+    }
+    else {
+        if (!grid.is_conformal) {
+            // If the grid is non-conformal, we need a fully general change of basis from grid coordinates to earth coordinates. This is not supported for now, so warn about it.
+            console.warn('Vector rotations for non-conformal projections are not supported. The output may look incorrect.');
+        }
+        for (let icd = 0; icd < coords.lats.length; icd++) {
+            const lon = coords.lons[icd];
+            const lat = coords.lats[icd];
+            rot_vals[icd] = grid.getVectorRotationAtPoint(lon, lat);
+        }
+    }
+    const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, 'float16');
     const rot_img = {
         format: format, type: type, row_alignment: row_alignment, image: new Uint16Array(rot_vals.buffer),
         width: grid.ni, height: grid.nj, mag_filter: gl.LINEAR
@@ -53,30 +66,93 @@ class Grid {
         this.is_conformal = is_conformal;
         this.ni = ni;
         this.nj = nj;
-        this.buffer_cache = new Cache((gl) => {
-            const new_ni = Math.max(Math.floor(this.ni / 50), 20);
-            const new_nj = Math.max(Math.floor(this.nj / 50), 20);
-            return makeWGLDomainBuffers(gl, this.copy({ ni: new_ni, nj: new_nj }), this);
-        });
         this.billboard_buffer_cache = new Cache((gl, thin_fac, max_zoom) => {
             return makeWGLBillboardBuffers(gl, this, thin_fac, max_zoom);
         });
-        this.vector_rotation_cache = new Cache((gl) => {
-            return makeVectorRotationTexture(gl, this);
+        this.vector_rotation_cache = new Cache((gl, data_are_earth_relative) => {
+            return makeVectorRotationTexture(gl, this, data_are_earth_relative);
         });
     }
-    async getWGLBuffers(gl) {
-        return await this.buffer_cache.getValue(gl);
-    }
     async getWGLBillboardBuffers(gl, thin_fac, max_zoom) {
         return await this.billboard_buffer_cache.getValue(gl, thin_fac, max_zoom);
     }
-    getVectorRotationTexture(gl) {
-        return this.vector_rotation_cache.getValue(gl);
+    getVectorRotationAtPoint(lon, lat) {
+        const [x, y] = this.transform(lon, lat);
+        const [x_pertlon, y_pertlon] = this.transform(lon + 0.01, lat);
+        return Math.atan2(y_pertlon - y, x_pertlon - x);
+    }
+    getVectorRotationTexture(gl, data_are_earth_relative) {
+        return this.vector_rotation_cache.getValue(gl, data_are_earth_relative);
+    }
+}
+/** A structured grid (in this case meaning a cartesian grid with i and j coordinates) */
+class StructuredGrid extends Grid {
+    constructor(type, is_conformal, ni, nj, thin_x, thin_y) {
+        super(type, is_conformal, ni, nj);
+        this.thin_x = thin_x === undefined ? 1 : thin_x;
+        this.thin_y = thin_y === undefined ? 1 : thin_y;
+        this.buffer_cache = new Cache((gl) => {
+            const new_ni = Math.max(Math.floor(this.ni / 20), 20);
+            const new_nj = Math.max(Math.floor(this.nj / 20), 20);
+            return makeWGLDomainBuffers(gl, this, new_ni, new_nj);
+        });
+    }
+    /** @internal */
+    xyThinFromMaxZoom(thin_fac, map_max_zoom) {
+        const n_density_tiers = Math.log2(thin_fac);
+        const n_inaccessible_tiers = Math.max(n_density_tiers + 1 - map_max_zoom, 0);
+        const xy_thin = Math.pow(2, n_inaccessible_tiers);
+        return [xy_thin, xy_thin];
+    }
+    /** @internal */
+    getMinVisibleZoom(thin_fac) {
+        const min_zoom = new Uint8Array(this.ni * this.nj);
+        const zoom_thin_fac = thin_fac / Math.max(this.thin_x, this.thin_y);
+        for (let ilat = 0; ilat < this.nj * this.thin_y; ilat++) {
+            for (let ilon = 0; ilon < this.ni * this.thin_x; ilon++) {
+                const idx = ilat * this.ni + ilon;
+                min_zoom[idx] = getMinZoom(ilat, ilon, zoom_thin_fac);
+            }
+        }
+        return min_zoom;
+    }
+    /** @internal */
+    thinDataArray(original_grid, ary) {
+        const arrayType = getArrayConstructor(ary);
+        const new_data = new arrayType(this.ni * this.nj);
+        for (let i = 0; i < this.ni; i++) {
+            for (let j = 0; j < this.nj; j++) {
+                const idx_old = i * this.thin_x + original_grid.ni * j * this.thin_y;
+                const idx = i + this.ni * j;
+                new_data[idx] = ary[idx_old];
+            }
+        }
+        return new_data;
+    }
+    async getWGLBuffers(gl) {
+        return await this.buffer_cache.getValue(gl);
+    }
+    sampleNearestGridPoint(lon, lat, ary) {
+        const [x, y] = this.transform(lon, lat);
+        const { x: xs, y: ys } = this.getGridCoords();
+        const ll_x = xs[0];
+        const ur_x = xs[xs.length - 1];
+        const dx = xs[1] - xs[0];
+        const ll_y = ys[0];
+        const ur_y = ys[ys.length - 1];
+        const dy = ys[1] - ys[0];
+        if (x < ll_x - 0.5 * dx || x > ur_x + 0.5 * dx || y < ll_y - 0.5 * dy || y > ur_y + 0.5 * dy) {
+            return { sample: NaN, sample_lon: NaN, sample_lat: NaN };
+        }
+        const i_min = argMin(xs.map(xv => Math.abs(xv - x)));
+        const j_min = argMin(ys.map(yv => Math.abs(yv - y)));
+        const idx = i_min + j_min * this.ni;
+        const [lon_min, lat_min] = this.transform(xs[i_min], ys[j_min], { inverse: true });
+        return { sample: ary[idx], sample_lon: lon_min, sample_lat: lat_min };
     }
 }
 /** A plate carree (a.k.a. lat/lon) grid with uniform grid spacing */
-class PlateCarreeGrid extends Grid {
+class PlateCarreeGrid extends StructuredGrid {
     /**
      * Create a plate carree grid
      * @param ni     - The number of grid points in the i (longitude) direction
@@ -86,22 +162,24 @@ class PlateCarreeGrid extends Grid {
      * @param ur_lon - The longitude of the upper right corner of the grid
      * @param ur_lat - The latitude of the upper right corner of the grid
      */
-    constructor(ni, nj, ll_lon, ll_lat, ur_lon, ur_lat) {
-        super('latlon', true, ni, nj);
+    constructor(ni, nj, ll_lon, ll_lat, ur_lon, ur_lat, thin_x, thin_y) {
+        super('latlon', true, ni, nj, thin_x, thin_y);
         this.ll_lon = ll_lon;
         this.ll_lat = ll_lat;
         this.ur_lon = ur_lon;
         this.ur_lat = ur_lat;
         const dlon = (this.ur_lon - this.ll_lon) / (this.ni - 1);
         const dlat = (this.ur_lat - this.ll_lat) / (this.nj - 1);
-        this.ll_cache = new Cache(() => {
-            const lons = new Float32Array(this.ni * this.nj);
-            const lats = new Float32Array(this.ni * this.nj);
-            for (let i = 0; i < this.ni; i++) {
-                for (let j = 0; j < this.nj; j++) {
-                    const idx = i + j * this.ni;
-                    lons[idx] = this.ll_lon + i * dlon;
-                    lats[idx] = this.ll_lat + j * dlat;
+        this.ll_cache = new Cache((ni, nj) => {
+            const lons = new Float32Array(ni * nj);
+            const lats = new Float32Array(ni * nj);
+            const dlon_req = (this.ni - 1) / (ni - 1) * dlon;
+            const dlat_req = (this.nj - 1) / (nj - 1) * dlat;
+            for (let i = 0; i < ni; i++) {
+                for (let j = 0; j < nj; j++) {
+                    const idx = i + j * ni;
+                    lons[idx] = this.ll_lon + i * dlon_req;
+                    lats[idx] = this.ll_lat + j * dlat_req;
                 }
             }
             return { 'lons': lons, 'lats': lats };
@@ -118,6 +196,7 @@ class PlateCarreeGrid extends Grid {
             return { x: x, y: y };
         });
     }
+    /** @internal */
     copy(opts) {
         opts = opts !== undefined ? opts : {};
         const ni = opts.ni !== undefined ? opts.ni : this.ni;
@@ -129,18 +208,25 @@ class PlateCarreeGrid extends Grid {
         return new PlateCarreeGrid(ni, nj, ll_lon, ll_lat, ur_lon, ur_lat);
     }
     /**
+     * @internal
      * Get a list of longitudes and latitudes on the grid (internal method)
      */
-    getEarthCoords() {
-        return this.ll_cache.getValue();
+    getEarthCoords(ni, nj) {
+        ni = ni === undefined ? this.ni : ni;
+        nj = nj === undefined ? this.nj : nj;
+        return this.ll_cache.getValue(ni, nj);
     }
+    /** @internal */
     getGridCoords() {
         return this.gc_cache.getValue();
     }
+    /** @internal */
     transform(x, y, opts) {
         return [x, y];
     }
-    getThinnedGrid(thin_x, thin_y) {
+    /** @internal */
+    getThinnedGrid(thin_fac, map_max_zoom) {
+        const [thin_x, thin_y] = this.xyThinFromMaxZoom(thin_fac, map_max_zoom);
         const dlon = (this.ur_lon - this.ll_lon) / this.ni;
         const dlat = (this.ur_lat - this.ll_lat) / this.nj;
         const ni = Math.ceil(this.ni / thin_x);
@@ -151,11 +237,11 @@ class PlateCarreeGrid extends Grid {
         const ll_lat = this.ll_lat;
         const ur_lon = this.ur_lon - ni_remove * dlon;
         const ur_lat = this.ur_lat - nj_remove * dlat;
-        return new PlateCarreeGrid(ni, nj, ll_lon, ll_lat, ur_lon, ur_lat);
+        return new PlateCarreeGrid(ni, nj, ll_lon, ll_lat, ur_lon, ur_lat, this.thin_x * thin_x, this.thin_y * thin_y);
     }
 }
 /** A rotated lat-lon (plate carree) grid with uniform grid spacing */
-class PlateCarreeRotatedGrid extends Grid {
+class PlateCarreeRotatedGrid extends StructuredGrid {
     /**
      * Create a Lambert conformal conic grid
      * @param ni        - The number of grid points in the i (longitude) direction
@@ -168,8 +254,8 @@ class PlateCarreeRotatedGrid extends Grid {
      * @param ur_lon    - The longitude of the upper right corner of the grid (on the rotated earth)
      * @param ur_lat    - The latitude of the upper right corner of the grid (on the rotated earth)
      */
-    constructor(ni, nj, np_lon, np_lat, lon_shift, ll_lon, ll_lat, ur_lon, ur_lat) {
-        super('latlonrot', true, ni, nj);
+    constructor(ni, nj, np_lon, np_lat, lon_shift, ll_lon, ll_lat, ur_lon, ur_lat, thin_x, thin_y) {
+        super('latlonrot', true, ni, nj, thin_x, thin_y);
         this.np_lon = np_lon;
         this.np_lat = np_lat;
         this.lon_shift = lon_shift;
@@ -180,15 +266,17 @@ class PlateCarreeRotatedGrid extends Grid {
         this.llrot = rotateSphere({ np_lon: np_lon, np_lat: np_lat, lon_shift: lon_shift });
         const dlon = (this.ur_lon - this.ll_lon) / (this.ni - 1);
         const dlat = (this.ur_lat - this.ll_lat) / (this.nj - 1);
-        this.ll_cache = new Cache(() => {
-            const lons = new Float32Array(this.ni * this.nj);
-            const lats = new Float32Array(this.ni * this.nj);
-            for (let i = 0; i < this.ni; i++) {
-                const lon_p = this.ll_lon + i * dlon;
-                for (let j = 0; j < this.nj; j++) {
-                    const lat_p = this.ll_lat + j * dlat;
+        this.ll_cache = new Cache((ni, nj) => {
+            const lons = new Float32Array(ni * nj);
+            const lats = new Float32Array(ni * nj);
+            const dlon_req = (this.ni - 1) / (ni - 1) * dlon;
+            const dlat_req = (this.nj - 1) / (nj - 1) * dlat;
+            for (let i = 0; i < ni; i++) {
+                const lon_p = this.ll_lon + i * dlon_req;
+                for (let j = 0; j < nj; j++) {
+                    const lat_p = this.ll_lat + j * dlat_req;
                     const [lon, lat] = this.llrot(lon_p, lat_p);
-                    const idx = i + j * this.ni;
+                    const idx = i + j * ni;
                     lons[idx] = lon;
                     lats[idx] = lat;
                 }
@@ -207,6 +295,7 @@ class PlateCarreeRotatedGrid extends Grid {
             return { x: x, y: y };
         });
     }
+    /** @internal */
     copy(opts) {
         opts = opts !== undefined ? opts : {};
         const ni = opts.ni !== undefined ? opts.ni : this.ni;
@@ -218,20 +307,27 @@ class PlateCarreeRotatedGrid extends Grid {
         return new PlateCarreeRotatedGrid(ni, nj, this.np_lon, this.np_lat, this.lon_shift, ll_lon, ll_lat, ur_lon, ur_lat);
     }
     /**
-     * Get a list of longitudes and latitudes on the grid (internal method)
+     * @internal
+     * Get a list of longitudes and latitudes on the grid
      */
-    getEarthCoords() {
-        return this.ll_cache.getValue();
+    getEarthCoords(ni, nj) {
+        ni = ni === undefined ? this.ni : ni;
+        nj = nj === undefined ? this.nj : nj;
+        return this.ll_cache.getValue(ni, nj);
     }
+    /** @internal */
     getGridCoords() {
         return this.gc_cache.getValue();
     }
+    /** @internal */
     transform(x, y, opts) {
         opts = opts === undefined ? {} : opts;
         const inverse = 'inverse' in opts ? opts.inverse : false;
         return this.llrot(x, y, { inverse: !inverse });
     }
-    getThinnedGrid(thin_x, thin_y) {
+    /** @internal */
+    getThinnedGrid(thin_fac, map_max_zoom) {
+        const [thin_x, thin_y] = this.xyThinFromMaxZoom(thin_fac, map_max_zoom);
         const dlon = (this.ur_lon - this.ll_lon) / this.ni;
         const dlat = (this.ur_lat - this.ll_lat) / this.nj;
         const ni = Math.ceil(this.ni / thin_x);
@@ -242,13 +338,13 @@ class PlateCarreeRotatedGrid extends Grid {
         const ll_lat = this.ll_lat;
         const ur_lon = this.ur_lon - ni_remove * dlon;
         const ur_lat = this.ur_lat - nj_remove * dlat;
-        return new PlateCarreeRotatedGrid(ni, nj, this.np_lon, this.np_lat, this.lon_shift, ll_lon, ll_lat, ur_lon, ur_lat);
+        return new PlateCarreeRotatedGrid(ni, nj, this.np_lon, this.np_lat, this.lon_shift, ll_lon, ll_lat, ur_lon, ur_lat, this.thin_x * thin_x, this.thin_y * thin_y);
     }
 }
 /** A Lambert conformal conic grid with uniform grid spacing */
-class LambertGrid extends Grid {
+class LambertGrid extends StructuredGrid {
     /**
-     * Create a Lambert conformal conic grid
+     * Create a Lambert conformal conic grid from the lower-left and upper-right corner x/y values.
      * @param ni      - The number of grid points in the i (longitude) direction
      * @param nj      - The number of grid points in the j (latitude) direction
      * @param lon_0   - The standard longitude for the projection; this is also the center longitude for the projection
@@ -259,8 +355,8 @@ class LambertGrid extends Grid {
      * @param ur_x    - The x coordinate in projection space of the upper-right corner of the grid
      * @param ur_y    - The y coordinate in projection space of the upper-right corner of the grid
      */
-    constructor(ni, nj, lon_0, lat_0, lat_std, ll_x, ll_y, ur_x, ur_y) {
-        super('lcc', true, ni, nj);
+    constructor(ni, nj, lon_0, lat_0, lat_std, ll_x, ll_y, ur_x, ur_y, thin_x, thin_y) {
+        super('lcc', true, ni, nj, thin_x, thin_y);
         this.lon_0 = lon_0;
         this.lat_0 = lat_0;
         this.lat_std = lat_std;
@@ -269,17 +365,19 @@ class LambertGrid extends Grid {
         this.ur_x = ur_x;
         this.ur_y = ur_y;
         this.lcc = lambertConformalConic({ lon_0: lon_0, lat_0: lat_0, lat_std: lat_std });
-        const dx = (this.ur_x - this.ll_x) / (this.ni - 1);
-        const dy = (this.ur_y - this.ll_y) / (this.nj - 1);
-        this.ll_cache = new Cache(() => {
-            const lons = new Float32Array(this.ni * this.nj);
-            const lats = new Float32Array(this.ni * this.nj);
-            for (let i = 0; i < this.ni; i++) {
-                const x = this.ll_x + i * dx;
-                for (let j = 0; j < this.nj; j++) {
-                    const y = this.ll_y + j * dy;
+        const dx = (this.ur_x - this.ll_x) / this.ni;
+        const dy = (this.ur_y - this.ll_y) / this.nj;
+        this.ll_cache = new Cache((ni, nj) => {
+            const lons = new Float32Array(ni * nj);
+            const lats = new Float32Array(ni * nj);
+            const dx_req = (this.ni - 1) / (ni - 1) * dx;
+            const dy_req = (this.nj - 1) / (nj - 1) * dy;
+            for (let i = 0; i < ni; i++) {
+                const x = this.ll_x + i * dx_req;
+                for (let j = 0; j < nj; j++) {
+                    const y = this.ll_y + j * dy_req;
                     const [lon, lat] = this.lcc(x, y, { inverse: true });
-                    const idx = i + j * this.ni;
+                    const idx = i + j * ni;
                     lons[idx] = lon;
                     lats[idx] = lat;
                 }
@@ -298,6 +396,25 @@ class LambertGrid extends Grid {
             return { x: x, y: y };
         });
     }
+    /**
+     * Create a Lambert conformal conic grid from the lower-left grid point coordinate and a dx and dy.
+     * @param ni      - The number of grid points in the i (longitude) direction
+     * @param nj      - The number of grid points in the j (latitude) direction
+     * @param lon_0   - The standard longitude for the projection; this is also the center longitude for the projection
+     * @param lat_0   - The center latitude for the projection
+     * @param lat_std - The standard latitudes for the projection
+     * @param ll_lon  - The longitude of the lower-left corner of the grid
+     * @param ll_lat  - The latitude of the lower-left corner of the grid
+     * @param dx      - The grid dx in meters
+     * @param dy      - The grid dy in meters
+     * @returns
+     */
+    static fromLLCornerLonLat(ni, nj, lon_0, lat_0, lat_std, ll_lon, ll_lat, dx, dy) {
+        const lcc = lambertConformalConic({ lon_0: lon_0, lat_0: lat_0, lat_std: lat_std });
+        const [ll_x, ll_y] = lcc(ll_lon, ll_lat);
+        return new LambertGrid(ni, nj, lon_0, lat_0, lat_std, ll_x, ll_y, ll_x + ni * dx, ll_y + nj * dy);
+    }
+    /** @internal */
     copy(opts) {
         opts = opts !== undefined ? opts : {};
         const ni = opts.ni !== undefined ? opts.ni : this.ni;
@@ -309,20 +426,27 @@ class LambertGrid extends Grid {
         return new LambertGrid(ni, nj, this.lon_0, this.lat_0, this.lat_std, ll_x, ll_y, ur_x, ur_y);
     }
     /**
-     * Get a list of longitudes and latitudes on the grid (internal method)
+     * @internal
+     * Get a list of longitudes and latitudes on the grid
      */
-    getEarthCoords() {
-        return this.ll_cache.getValue();
+    getEarthCoords(ni, nj) {
+        ni = ni === undefined ? this.ni : ni;
+        nj = nj === undefined ? this.nj : nj;
+        return this.ll_cache.getValue(ni, nj);
     }
+    /** @internal */
     getGridCoords() {
         return this.gc_cache.getValue();
     }
+    /** @internal */
     transform(x, y, opts) {
         opts = opts === undefined ? {} : opts;
-        const inverse = 'inverse' in opts ? opts.inverse : false;
+        const inverse = opts.inverse === undefined ? false : opts.inverse;
         return this.lcc(x, y, { inverse: inverse });
     }
-    getThinnedGrid(thin_x, thin_y) {
+    /** @internal */
+    getThinnedGrid(thin_fac, map_max_zoom) {
+        const [thin_x, thin_y] = this.xyThinFromMaxZoom(thin_fac, map_max_zoom);
         const dx = (this.ur_x - this.ll_x) / this.ni;
         const dy = (this.ur_y - this.ll_y) / this.nj;
         const ni = Math.ceil(this.ni / thin_x);
@@ -333,7 +457,91 @@ class LambertGrid extends Grid {
         const ll_y = this.ll_y;
         const ur_x = this.ur_x - ni_remove * dx;
         const ur_y = this.ur_y - nj_remove * dy;
-        return new LambertGrid(ni, nj, this.lon_0, this.lat_0, this.lat_std, ll_x, ll_y, ur_x, ur_y);
+        return new LambertGrid(ni, nj, this.lon_0, this.lat_0, this.lat_std, ll_x, ll_y, ur_x, ur_y, this.thin_x * thin_x, this.thin_y * thin_y);
+    }
+}
+/** An unstructured grid */
+class UnstructuredGrid extends Grid {
+    /**
+     * Create an unstructured grid
+     * @param coords - The lat/lon coordinates of the grid points
+     */
+    constructor(coords, zoom) {
+        const MAX_DIM = 4096;
+        super('unstructured', true, Math.min(coords.length, MAX_DIM), Math.floor(coords.length / MAX_DIM) + 1);
+        this.coords = coords;
+        this.zoom_arg = zoom === undefined ? null : zoom;
+        this.zoom_cache = new Cache((thin_fac) => {
+            const MAP_MAX_ZOOM = 24;
+            const offset = Math.log2(thin_fac);
+            const kd_nodes = this.coords.map(c => ({ ...new LngLat(c.lon, c.lat).toMercatorCoord(), min_zoom: MAP_MAX_ZOOM }));
+            const tree = new kdTree([...kd_nodes], (a, b) => Math.max(Math.abs(a.x - b.x), Math.abs(a.y - b.y)), ['x', 'y']);
+            const recursiveThin = (x, y, depth) => {
+                const size = Math.pow(0.5, depth + 1);
+                const nodes = tree.nearest({ x: x, y: y, min_zoom: 0 }, 2, size);
+                if (nodes.length > 0) {
+                    const [node, dist] = nodes.sort((a, b) => a[1] - b[1])[0];
+                    if (node.min_zoom == MAP_MAX_ZOOM) {
+                        node.min_zoom = Math.max(depth - offset, 0);
+                    }
+                }
+                if (nodes.length > 1 && depth < MAP_MAX_ZOOM + offset) {
+                    recursiveThin(x - size / 2, y - size / 2, depth + 1);
+                    recursiveThin(x + size / 2, y - size / 2, depth + 1);
+                    recursiveThin(x - size / 2, y + size / 2, depth + 1);
+                    recursiveThin(x + size / 2, y + size / 2, depth + 1);
+                }
+            };
+            recursiveThin(0.5, 0.5, 0);
+            return new Uint8Array(kd_nodes.map(n => n.min_zoom));
+        });
+    }
+    /** @internal */
+    copy() {
+        return new UnstructuredGrid(this.coords);
+    }
+    /** @internal */
+    getEarthCoords() {
+        return { lons: new Float32Array(this.coords.map(c => c.lon)), lats: new Float32Array(this.coords.map(c => c.lat)) };
+    }
+    /** @internal */
+    getGridCoords() {
+        const { lons, lats } = this.getEarthCoords();
+        return { x: lons, y: lats };
+    }
+    /** @internal */
+    transform(x, y, opts) {
+        return [x, y];
+    }
+    /** @internal */
+    getMinVisibleZoom(thin_fac) {
+        if (this.zoom_arg !== null)
+            return this.zoom_arg;
+        return this.zoom_cache.getValue(thin_fac);
+    }
+    /** @internal */
+    getThinnedGrid(thin_fac, map_max_zoom) {
+        const min_zoom = this.getMinVisibleZoom(thin_fac);
+        return new UnstructuredGrid(this.coords.filter((ll, ill) => min_zoom[ill] <= map_max_zoom), min_zoom.filter(ll => ll <= map_max_zoom));
+    }
+    /** @internal */
+    thinDataArray(original_grid, ary) {
+        let i_new = 0;
+        const arrayType = getArrayConstructor(ary);
+        const new_data = new arrayType(this.ni * this.nj);
+        for (let i = 0; i < original_grid.coords.length; i++) {
+            if (this.coords[i_new].lat == original_grid.coords[i].lat && this.coords[i_new].lon == original_grid.coords[i].lon) {
+                new_data[i_new++] = ary[i];
+                if (i_new >= this.coords.length)
+                    break;
+            }
+        }
+        return new_data;
+    }
+    sampleNearestGridPoint(lon, lat, ary) {
+        // TAS: This is gonna be slow. Need to think about using the kdTree here.
+        const idx = argMin(this.coords.map(c => (c.lon - lon) * (c.lon - lon) + (c.lat - lat) * (c.lat - lat)));
+        return { sample: ary[idx], sample_lon: this.coords[idx].lon, sample_lat: this.coords[idx].lat };
     }
 }
-export { Grid, PlateCarreeGrid, PlateCarreeRotatedGrid, LambertGrid };
+export { Grid, StructuredGrid, PlateCarreeGrid, PlateCarreeRotatedGrid, LambertGrid, UnstructuredGrid };

package/lib/Hodographs.d.ts

@@ -1,10 +1,13 @@
 import { PlotComponent } from "./PlotComponent";
 import { MapLikeType } from "./Map";
 import { RawProfileField } from "./RawField";
-import { WebGLAnyRenderingContext } from "./AutumnTypes";
+import { RenderMethodArg, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { ColorMap } from "./Colormap";
+import { Grid } from "./Grid";
 interface HodographOptions {
     /**
      * The color of the hodograph plot background as a hex string
+     * @default '#000000'
      */
     bgcolor?: string;
     /**
@@ -13,13 +16,28 @@ interface HodographOptions {
      * @default 1
      */
     thin_fac?: number;
+    /**
+     * The width of the hodograph line in pixels
+     * @default 2.5
+     */
+    hodo_line_width?: number;
+    /**
+     * The width of the lines on the background in pixels
+     * @default 1.5
+     */
+    background_line_width?: number;
+    /**
+     * The colormap to use for the heights on the hodograph. Default is a yellow-blue colormap.
+     */
+    height_cmap?: ColorMap;
 }
-/** A class representing a a field of hodograph plots */
-declare class Hodographs<MapType extends MapLikeType> extends PlotComponent<MapType> {
+/** A class representing a field of hodograph plots */
+declare class Hodographs<GridType extends Grid, MapType extends MapLikeType> extends PlotComponent<MapType> {
     private profile_field;
     readonly opts: Required<HodographOptions>;
     private gl_elems;
     private line_elems;
+    private hodo_bg_texture;
     private readonly hodo_scale;
     private readonly bg_size;
     /**
@@ -27,12 +45,12 @@ declare class Hodographs<MapType extends MapLikeType> extends PlotComponent<MapT
      * @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);
+    constructor(profile_field: RawProfileField<GridType>, opts?: HodographOptions);
     /**
      * Update the profiles displayed
      * @param field - The new profiles to display as hodographs
      */
-    updateField(field: RawProfileField): Promise<void>;
+    updateField(field: RawProfileField<GridType>): Promise<void>;
     /**
      * @internal
      * Add the hodographs to a map
@@ -42,7 +60,7 @@ declare class Hodographs<MapType extends MapLikeType> extends PlotComponent<MapT
      * @internal
      * Render the hodographs
      */
-    render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
+    render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg): void;
 }
 export default Hodographs;
 export type { HodographOptions };