autumnplot-gl 4.0.0-beta → 4.0.0

package/lib/AutumnTypes.d.ts

@@ -1,13 +1,37 @@
 import { Float16Array } from "@petamoriken/float16";
-interface WindProfile {
+/** A wind profile with a storm-motion for plotting storm-relative hodographs */
+interface StormRelativeWindProfile {
+    /** The grid index in the j direction (ignored for unstructured grids) */
     jlat: number;
+    /** The grid index in the i direction */
     ilon: number;
+    /** u component of storm motion in kts */
     smu: number;
+    /** v component of storm motion in kts */
     smv: number;
+    /** Ground-relative u winds in kts (will be converted to storm-relative during plotting) */
     u: Float32Array;
+    /** Ground-relative v winds in kts (will be converted to storm-relative during plotting) */
     v: Float32Array;
+    /** Height of each data point in km */
     z: Float32Array;
 }
+/** A wind profile without a storm motion for plotting ground-relative hodographs */
+interface GroundRelativeWindProfile {
+    /** The grid index in the j direction (ignored for unstructured grids) */
+    jlat: number;
+    /** The grid index in the i direction */
+    ilon: number;
+    /** Ground-relative u winds in kts */
+    u: Float32Array;
+    /** Ground-relative v winds in kts */
+    v: Float32Array;
+    /** Height of each data point in km */
+    z: Float32Array;
+}
+/** Different types of wind profiles for {@link Hodographs} components */
+type WindProfile = StormRelativeWindProfile | GroundRelativeWindProfile;
+declare function isStormRelativeWindProfile(obj: any): obj is StormRelativeWindProfile;
 interface BillboardSpec {
     BB_WIDTH: number;
     BB_HEIGHT: number;
@@ -30,10 +54,17 @@ type Polyline = {
     data?: Float32Array;
     zoom?: Float32Array;
 };
+/** WebGL rendering contexts (either WebGL1 or WebGL2) */
 type WebGLAnyRenderingContext = WebGLRenderingContext | WebGL2RenderingContext;
 declare function isWebGL2Ctx(gl: WebGLAnyRenderingContext): gl is WebGL2RenderingContext;
+/** Javascript typed arrays for use in raw fields */
 type TypedArray = Float16Array | Float32Array | Uint8Array;
 type TypedArrayStr = 'float16' | 'float32' | 'uint8';
+/**
+ * The result of contouring a field
+ *
+ * Each property is a different contour level giving an array of contours, and each contour is an array of [longitude, latitude].
+ */
 type ContourData = Record<number, [number, number][][]>;
 type mat4 = number[] | Float32Array | Float64Array;
 type RenderShaderData = {
@@ -84,5 +115,5 @@ type RendererDataAutumn = {
 };
 type RendererData = RendererDataMapLibre | RendererDataAutumn;
 declare function getRendererData(arg: RenderMethodArg): RendererData;
-export { isWebGL2Ctx, getRendererData };
-export type { WindProfile, BillboardSpec, Polyline, LineData, WebGLAnyRenderingContext, TypedArray, TypedArrayStr, ContourData, RenderMethodArg, RendererData, RenderShaderData };
+export { isWebGL2Ctx, getRendererData, isStormRelativeWindProfile };
+export type { WindProfile, StormRelativeWindProfile, GroundRelativeWindProfile, BillboardSpec, Polyline, LineData, WebGLAnyRenderingContext, TypedArray, TypedArrayStr, ContourData, RenderMethodArg, RendererData, RenderShaderData };

package/lib/AutumnTypes.js

@@ -1,3 +1,6 @@
+function isStormRelativeWindProfile(obj) {
+    return 'smu' in obj && 'smv' in obj;
+}
 function isWebGL2Ctx(gl) {
     return gl.getParameter(gl.VERSION).includes('WebGL 2.0');
 }
@@ -25,4 +28,4 @@ function getRendererData(arg) {
     }
     return { type: 'autumn', mainMatrix: [...arg], shaderData: null };
 }
-export { isWebGL2Ctx, getRendererData };
+export { isWebGL2Ctx, getRendererData, isStormRelativeWindProfile };

package/lib/Barbs.d.ts

@@ -4,6 +4,7 @@ import { MapLikeType } from "./Map";
 import { RenderMethodArg, TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { ColorMap } from "./Colormap";
 import { Grid } from "./Grid";
+/** Options for {@link Barbs} components */
 interface BarbsOptions {
     /**
      * The color to use for the barbs as a hex color string;.

package/lib/Color.d.ts

@@ -1,3 +1,4 @@
+/** A class for handling colors and translations between different color spaces */
 declare class Color {
     private rgba;
     /**

package/lib/Color.js

@@ -78,6 +78,7 @@ const hsv2rgb = (hsv) => {
     }
     return [r_prime + m, g_prime + m, b_prime + m];
 };
+/** A class for handling colors and translations between different color spaces */
 class Color {
     /**
      * Create a new color object

package/lib/ColorBar.d.ts

@@ -1,7 +1,10 @@
 import { ColorMap } from "./Colormap";
 import { Color } from "./Color";
+/** The orientation for color bars (horizontal or vertical) */
 type ColorbarOrientation = 'horizontal' | 'vertical';
+/** Which side of a color bar the ticks are on */
 type ColorbarTickDirection = 'top' | 'bottom' | 'left' | 'right';
+/** Options for {@link ColorBar}s */
 interface ColorBarOptions {
     /** The label to place along the color bar */
     label?: string;
@@ -41,6 +44,11 @@ interface ColorBarOptions {
      * @default 12
      */
     ticklabelsize?: number;
+    /**
+     * The color for the color bar outline and the text
+     * @default '#000000'
+     */
+    outline_and_text_color?: string;
 }
 /**
  * Make an SVG containing a color bar. The color bar can either be oriented horizontal or vertical, and a label can be provided.
@@ -56,6 +64,7 @@ interface ColorBarOptions {
  * document.getElementById('colorbar-container').appendChild(svg);
  */
 declare function makeColorBar(colormap: ColorMap, opts: ColorBarOptions): SVGElement;
+/** Options for {@link makePaintballKey | makePaintballKey()} */
 interface PaintballKeyOptions {
     /**
      * The number of columns of entries in the key

package/lib/ColorBar.js

@@ -32,6 +32,7 @@ function makeColorBar(colormap, opts) {
     const tickfontsize = opts.ticklabelsize || 12;
     const size_long = opts.size_long || 600;
     const size_short = opts.size_short || size_long / 9;
+    const outline_and_text_color = opts.outline_and_text_color || '#000000';
     const tick_dir = opts.tick_direction || (orientation == 'vertical' ? 'left' : 'bottom');
     if (orientation == 'vertical' && (tick_dir == 'top' || tick_dir == 'bottom') ||
         orientation == 'horizontal' && (tick_dir == 'left' || tick_dir == 'right')) {
@@ -143,7 +144,7 @@ function makeColorBar(colormap, opts) {
         else {
             lineattrs = tick_dir == 'bottom' ? { y2: 6 } : { y2: -6 };
         }
-        createElement('line', { ...lineattrs, stroke: '#000000', 'stroke-width': 1.5 }, gtick);
+        createElement('line', { ...lineattrs, stroke: outline_and_text_color, 'stroke-width': 1.5 }, gtick);
         let textattrs;
         if (orientation == 'vertical') {
             textattrs = tick_dir == 'left' ? { x: -9, dy: '0.32em' } : { x: 9, dy: '0.32em' };
@@ -151,7 +152,7 @@ function makeColorBar(colormap, opts) {
         else {
             textattrs = tick_dir == 'bottom' ? { y: 9, dy: '0.8em' } : { y: -9, dy: '0em' };
         }
-        const text = createElement('text', { ...textattrs, fill: '#000000', style: `font-family: ${fontface}; font-size: ${tickfontsize}pt` }, gtick);
+        const text = createElement('text', { ...textattrs, fill: outline_and_text_color, style: `font-family: ${fontface}; font-size: ${tickfontsize}pt` }, gtick);
         text.textContent = level.toString();
     });
     // Draw the outline
@@ -166,7 +167,7 @@ function makeColorBar(colormap, opts) {
     }
     const outline_attrs = {
         points: point_list,
-        stroke: '#000000',
+        stroke: outline_and_text_color,
         'stroke-width': 1.5,
         fill: 'none'
     };
@@ -179,7 +180,7 @@ function makeColorBar(colormap, opts) {
     else {
         labelattrs = tick_dir == 'bottom' ? { transform: `translate(${width / 2}, ${height - 5})` } : { transform: `translate(${width / 2}, 15)` };
     }
-    const label_elem = createElement('text', { ...labelattrs, fill: '#000000', 'text-anchor': 'middle', style: `font-family: ${fontface};` }, root);
+    const label_elem = createElement('text', { ...labelattrs, fill: outline_and_text_color, 'text-anchor': 'middle', style: `font-family: ${fontface};` }, root);
     label_elem.textContent = label;
     return root;
 }

package/lib/Colormap.d.ts

@@ -1,6 +1,7 @@
 import { WGLProgram, WGLTexture } from "autumn-wgl";
 import { WebGLAnyRenderingContext } from "./AutumnTypes";
 import { Color } from "./Color";
+/** Options for {@link ColorMap}s */
 interface ColorMapOptions {
     /** The color to use for areas where the value is above the highest value in the color map */
     overflow_color?: Color | string;

package/lib/Contour.d.ts

@@ -5,6 +5,7 @@ import { RawScalarField } from './RawField';
 import { LineStyle } from './PolylineCollection';
 import { ColorMap } from './Colormap';
 import { StructuredGrid } from './Grid';
+/** Options for {@link Contour} components */
 interface ContourOptions {
     /**
      * The color of the contours as a hex color string
@@ -80,6 +81,7 @@ declare class Contour<ArrayType extends TypedArray, GridType extends StructuredG
      */
     render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg): void;
 }
+/** Options for {@link ContourLabels} */
 interface ContourLabelOptions {
     /**
      * Number of decimal places to use in the contour labels
@@ -121,6 +123,14 @@ interface ContourLabelOptions {
      */
     density?: number;
 }
+/**
+ * Label the contours on a plot
+ * @example
+ * // Contour some data
+ * const contours = new Contour(height_field, {color: '#000000', interval: 30});
+ * // Label the contours
+ * const labels = new ContourLabels(contours, {text_color: '#ffffff', halo: true});
+ */
 declare class ContourLabels<ArrayType extends TypedArray, GridType extends StructuredGrid, MapType extends MapLikeType> extends PlotComponent<MapType> {
     private readonly contours;
     private gl_elems;

package/lib/Contour.js

@@ -126,6 +126,14 @@ const contour_label_opt_defaults = {
     halo: false,
     density: 1
 };
+/**
+ * Label the contours on a plot
+ * @example
+ * // Contour some data
+ * const contours = new Contour(height_field, {color: '#000000', interval: 30});
+ * // Label the contours
+ * const labels = new ContourLabels(contours, {text_color: '#ffffff', halo: true});
+ */
 class ContourLabels extends PlotComponent {
     constructor(contours, opts) {
         super();
@@ -175,6 +183,8 @@ class ContourLabels extends PlotComponent {
                 let n_labels_placed = 0;
                 for (let idist = 1; idist < dist.length; idist++) {
                     const target_dist = contour_label_spacing * (n_labels_placed + (icntr / 2) % 1);
+                    // This works fine when contour_label_spacing > the spacing between points along a contour, but when you allow the map to zoom in
+                    //  (and therefore contour_label_spacing gets small), dist[idist] outruns target_dist, so it doesn't put any more labels after the first.
                     if (dist[idist - 1] <= target_dist && target_dist < dist[idist]) {
                         const pt1 = contour[idist - 1];
                         const pt2 = contour[idist];

package/lib/ContourCreator.d.ts

@@ -2,7 +2,11 @@ import { MarchingSquaresModule } from './cpp/marchingsquares';
 import './cpp/marchingsquares.wasm';
 import { Grid } from "./Grid";
 import { ContourData, TypedArray } from "./AutumnTypes";
-declare function initMSModule(): Promise<MarchingSquaresModule>;
+interface InitMSModuleOpts {
+    document_script?: string;
+}
+declare function initMSModule(opts: InitMSModuleOpts): Promise<MarchingSquaresModule>;
+/** Options for contouring data via {@link RawScalarField.getContours | RawScalarField.getContours()} */
 interface FieldContourOpts {
     /**
      * The interval at which to create contours. The field will be contoured at this interval from its minimum to its maximum.

package/lib/ContourCreator.js

@@ -1,9 +1,9 @@
 import Module from './cpp/marchingsquares';
 import './cpp/marchingsquares.wasm';
 let msm_promise = null;
-function initMSModule() {
+function initMSModule(opts) {
     if (msm_promise === null) {
-        msm_promise = Module();
+        msm_promise = Module({ 'locateFile': (fname, dir) => (opts.document_script === undefined ? dir : opts.document_script) + fname });
     }
     return msm_promise;
 }
@@ -13,7 +13,7 @@ async function contourCreator(data, grid, opts) {
     }
     const interval = opts.interval === undefined ? 0 : opts.interval;
     const quad_as_tri = opts.quad_as_tri === undefined ? false : opts.quad_as_tri;
-    const msm = await initMSModule();
+    const msm = await initMSModule({});
     const grid_coords = grid.getGridCoords();
     const getContourLevels = data instanceof Float32Array ? msm.getContourLevelsFloat32 : msm.getContourLevelsFloat16;
     const makeContours = data instanceof Float32Array ? msm.makeContoursFloat32 : msm.makeContoursFloat16;

package/lib/Fill.d.ts

@@ -4,6 +4,7 @@ import { RawScalarField } from './RawField';
 import { MapLikeType } from './Map';
 import { RenderMethodArg, TypedArray, WebGLAnyRenderingContext } from './AutumnTypes';
 import { StructuredGrid } from './Grid';
+/** Options for {@link ContourFill} components */
 interface ContourFillOptions {
     /** The color maps to use when creating the fills */
     cmap: ColorMap | ColorMap[];
@@ -18,6 +19,7 @@ interface ContourFillOptions {
      */
     opacity?: number;
 }
+/** Options for {@link Raster} components */
 interface RasterOptions {
     /** The color map to use when creating the raster plot */
     cmap: ColorMap | ColorMap[];

package/lib/Grid.d.ts

@@ -9,6 +9,7 @@ interface GridCoords {
     y: Float32Array;
 }
 type GridType = 'latlon' | 'latlonrot' | 'lcc' | 'unstructured';
+/** The base class for grid types */
 declare abstract class Grid {
     readonly type: GridType;
     readonly ni: number;
@@ -165,6 +166,8 @@ declare class LambertGrid extends StructuredGrid {
     readonly ll_y: number;
     readonly ur_x: number;
     readonly ur_y: number;
+    readonly a: number;
+    readonly b: number;
     private readonly lcc;
     private readonly ll_cache;
     private readonly gc_cache;
@@ -179,8 +182,10 @@ declare class LambertGrid extends StructuredGrid {
      * @param ll_y    - The y coordinate in projection space of the lower-left corner of the 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
+     * @param a       - The semimajor axis of the assumed shape of Earth in meters
+     * @param b       - The semiminor axis of the assumed shape of Earth in meters
      */
-    constructor(ni: number, nj: number, lon_0: number, lat_0: number, lat_std: [number, number], ll_x: number, ll_y: number, ur_x: number, ur_y: number, thin_x?: number, thin_y?: number);
+    constructor(ni: number, nj: number, lon_0: number, lat_0: number, lat_std: [number, number], ll_x: number, ll_y: number, ur_x: number, ur_y: number, a?: number, b?: number, thin_x?: number, thin_y?: number);
     /**
      * 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
@@ -192,9 +197,11 @@ declare class LambertGrid extends StructuredGrid {
      * @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
+     * @param a       - The semimajor axis of the assumed shape of Earth in meters
+     * @param b       - The semiminor axis of the assumed shape of Earth in meters
      * @returns
      */
-    static fromLLCornerLonLat(ni: number, nj: number, lon_0: number, lat_0: number, lat_std: [number, number], ll_lon: number, ll_lat: number, dx: number, dy: number): LambertGrid;
+    static fromLLCornerLonLat(ni: number, nj: number, lon_0: number, lat_0: number, lat_std: [number, number], ll_lon: number, ll_lat: number, dx: number, dy: number, a?: number, b?: number): LambertGrid;
     /** @internal */
     copy(opts?: {
         ni?: number;
@@ -218,7 +225,7 @@ declare class LambertGrid extends StructuredGrid {
     /** @internal */
     getThinnedGrid(thin_fac: number, map_max_zoom: number): LambertGrid;
 }
-/** An unstructured grid */
+/** An unstructured grid defined by a list of latitudes and longitudes */
 declare class UnstructuredGrid extends Grid {
     readonly coords: {
         lon: number;

package/lib/Grid.js

@@ -4,6 +4,8 @@ import { LngLat, lambertConformalConic, rotateSphere } from "./Map";
 import { getGLFormatTypeAlignment, layer_worker } from "./PlotComponent";
 import { Cache, getArrayConstructor, getMinZoom } from "./utils";
 import { kdTree } from "kd-tree-javascript";
+const WGS84_SEMIMAJOR = 6378137.0;
+const WGS84_SEMIMINOR = 6356752.314245;
 function argMin(ary) {
     if (ary.length === 0) {
         return -1;
@@ -60,6 +62,7 @@ function makeVectorRotationTexture(gl, grid, data_are_earth_relative) {
     const rot_tex = new WGLTexture(gl, rot_img);
     return { 'rotation': rot_tex };
 }
+/** The base class for grid types */
 class Grid {
     constructor(type, is_conformal, ni, nj) {
         this.type = type;
@@ -354,8 +357,10 @@ class LambertGrid extends StructuredGrid {
      * @param ll_y    - The y coordinate in projection space of the lower-left corner of the 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
+     * @param a       - The semimajor axis of the assumed shape of Earth in meters
+     * @param b       - The semiminor axis of the assumed shape of Earth in meters
      */
-    constructor(ni, nj, lon_0, lat_0, lat_std, ll_x, ll_y, ur_x, ur_y, thin_x, thin_y) {
+    constructor(ni, nj, lon_0, lat_0, lat_std, ll_x, ll_y, ur_x, ur_y, a, b, thin_x, thin_y) {
         super('lcc', true, ni, nj, thin_x, thin_y);
         this.lon_0 = lon_0;
         this.lat_0 = lat_0;
@@ -364,7 +369,9 @@ class LambertGrid extends StructuredGrid {
         this.ll_y = ll_y;
         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 });
+        this.a = a === undefined ? WGS84_SEMIMAJOR : a;
+        this.b = b === undefined ? WGS84_SEMIMINOR : b;
+        this.lcc = lambertConformalConic({ lon_0: lon_0, lat_0: lat_0, lat_std: lat_std, a: this.a, b: this.b });
         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) => {
@@ -407,12 +414,16 @@ class LambertGrid extends StructuredGrid {
      * @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
+     * @param a       - The semimajor axis of the assumed shape of Earth in meters
+     * @param b       - The semiminor axis of the assumed shape of Earth 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 });
+    static fromLLCornerLonLat(ni, nj, lon_0, lat_0, lat_std, ll_lon, ll_lat, dx, dy, a, b) {
+        a = a === undefined ? WGS84_SEMIMAJOR : a;
+        b = b === undefined ? WGS84_SEMIMINOR : b;
+        const lcc = lambertConformalConic({ lon_0: lon_0, lat_0: lat_0, lat_std: lat_std, a: a, b: b });
         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);
+        return new LambertGrid(ni, nj, lon_0, lat_0, lat_std, ll_x, ll_y, ll_x + ni * dx, ll_y + nj * dy, a, b);
     }
     /** @internal */
     copy(opts) {
@@ -423,7 +434,7 @@ class LambertGrid extends StructuredGrid {
         const ll_y = opts.ll_y !== undefined ? opts.ll_y : this.ll_y;
         const ur_x = opts.ur_x !== undefined ? opts.ur_x : this.ur_x;
         const ur_y = opts.ur_y !== undefined ? opts.ur_y : this.ur_y;
-        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.a, this.b);
     }
     /**
      * @internal
@@ -457,10 +468,10 @@ class LambertGrid extends StructuredGrid {
         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, this.thin_x * thin_x, this.thin_y * thin_y);
+        return new LambertGrid(ni, nj, this.lon_0, this.lat_0, this.lat_std, ll_x, ll_y, ur_x, ur_y, this.a, this.b, this.thin_x * thin_x, this.thin_y * thin_y);
     }
 }
-/** An unstructured grid */
+/** An unstructured grid defined by a list of latitudes and longitudes */
 class UnstructuredGrid extends Grid {
     /**
      * Create an unstructured grid
@@ -544,4 +555,46 @@ class UnstructuredGrid extends Grid {
         return { sample: ary[idx], sample_lon: this.coords[idx].lon, sample_lat: this.coords[idx].lat };
     }
 }
+// class GeostationaryImage extends Grid {
+//     public readonly satellite_lon: number;
+//     public readonly satellite_lat: number;
+//     private readonly vpp: (a: number, b: number, opts?: {inverse: boolean}) => [number, number];
+//     constructor(ni: number, nj: number, satellite_lon: number, satellite_lat: number) {
+//         super('geostationary', false, ni, nj);
+//         this.satellite_lon = satellite_lon;
+//         this.satellite_lat = satellite_lat;
+//         this.vpp = verticalPerspective({lon_0: satellite_lon, lat_0: satellite_lat, alt: 35786000.});
+//     }
+//     public getEarthCoords(): EarthCoords {}
+//     public getGridCoords(): GridCoords {}
+//     public transform(x: number, y: number, opts?: {inverse?: boolean}): [number, number] {
+//         opts = opts === undefined ? {}: opts;
+//         const inverse = opts.inverse === undefined ? false : opts.inverse;
+//         return this.vpp(x, y, {inverse: inverse});
+//     }
+//     public sampleNearestGridPoint(lon: number, lat: number, ary: TypedArray): {sample: number, sample_lon: number, sample_lat: number} {
+//         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};
+//     }
+//     public getThinnedGrid(thin_fac: number, map_max_zoom: number): Grid {}
+//     public thinDataArray<ArrayType extends TypedArray>(original_grid: Grid, ary: ArrayType): ArrayType {}
+//     public getMinVisibleZoom(thin_fac: number): Uint8Array {}
+//     public copy() {
+//         return new GeostationaryImage(this.ni, this.nj, this.satellite_lon, this.satellite_lat);
+//     }
+// }
 export { Grid, StructuredGrid, PlateCarreeGrid, PlateCarreeRotatedGrid, LambertGrid, UnstructuredGrid };

package/lib/Hodographs.d.ts

@@ -4,6 +4,7 @@ import { RawProfileField } from "./RawField";
 import { RenderMethodArg, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { ColorMap } from "./Colormap";
 import { Grid } from "./Grid";
+/** Options for {@link Hodographs} components */
 interface HodographOptions {
     /**
      * The color of the hodograph plot background as a hex string
@@ -30,6 +31,11 @@ interface HodographOptions {
      * The colormap to use for the heights on the hodograph. Default is a yellow-blue colormap.
      */
     height_cmap?: ColorMap;
+    /**
+     * The wind speed (in kts) of the largest ring on the hodograph background
+     * @default 80
+     */
+    max_wind_speed_ring?: number;
 }
 /** A class representing a field of hodograph plots */
 declare class Hodographs<GridType extends Grid, MapType extends MapLikeType> extends PlotComponent<MapType> {

package/lib/Hodographs.js

@@ -1,11 +1,11 @@
 import { PlotComponent } from "./PlotComponent";
 import { PolylineCollection } from "./PolylineCollection";
 import { BillboardCollection } from "./BillboardCollection";
-import { getMinZoom, normalizeOptions } from './utils';
+import { normalizeOptions } from './utils';
+import { isStormRelativeWindProfile } from "./AutumnTypes";
 import { ColorMap } from "./Colormap";
 import { Color } from "./Color";
 const LINE_WIDTH_MULTIPLIER = 2.5;
-const BG_MAX_RING_MAG = 40;
 const HODO_BG_DIMS = {
     BB_WIDTH: 256,
     BB_HEIGHT: 256,
@@ -15,7 +15,7 @@ const HODO_BG_DIMS = {
     BB_MAG_WRAP: 1000,
     BB_MAG_BIN_SIZE: 1000,
 };
-function _createHodoBackgroundTexture(line_width) {
+function _createHodoBackgroundTexture(line_width, arrow_head) {
     let canvas = document.createElement('canvas');
     canvas.width = HODO_BG_DIMS.BB_TEX_WIDTH;
     canvas.height = HODO_BG_DIMS.BB_TEX_HEIGHT;
@@ -29,14 +29,21 @@ function _createHodoBackgroundTexture(line_width) {
         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();
+    if (arrow_head) {
+        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();
+    }
+    else {
+        ctx.beginPath();
+        ctx.arc(HODO_BG_DIMS.BB_TEX_WIDTH / 2, HODO_BG_DIMS.BB_TEX_WIDTH / 2, line_width, 0, 2 * Math.PI);
+        ctx.fill();
+    }
     return canvas;
 }
 ;
@@ -46,7 +53,8 @@ const hodograph_opt_defaults = {
     thin_fac: 1,
     hodo_line_width: 2.5,
     background_line_width: 1.5,
-    height_cmap: HODO_CMAP
+    height_cmap: HODO_CMAP,
+    max_wind_speed_ring: 80
 };
 /** A class representing a field of hodograph plots */
 class Hodographs extends PlotComponent {
@@ -59,8 +67,8 @@ class Hodographs extends PlotComponent {
         super();
         this.profile_field = profile_field;
         this.opts = normalizeOptions(opts, hodograph_opt_defaults);
-        this.hodo_bg_texture = _createHodoBackgroundTexture(this.opts.background_line_width * LINE_WIDTH_MULTIPLIER);
-        this.hodo_scale = (HODO_BG_DIMS.BB_TEX_WIDTH - this.opts.background_line_width / 2) / (HODO_BG_DIMS.BB_TEX_WIDTH * BG_MAX_RING_MAG);
+        this.hodo_bg_texture = _createHodoBackgroundTexture(this.opts.background_line_width * LINE_WIDTH_MULTIPLIER, isStormRelativeWindProfile(profile_field.profiles[0]));
+        this.hodo_scale = (HODO_BG_DIMS.BB_TEX_WIDTH - this.opts.background_line_width / 2) / (HODO_BG_DIMS.BB_TEX_WIDTH * this.opts.max_wind_speed_ring);
         this.bg_size = 140;
         this.gl_elems = null;
         this.line_elems = null;
@@ -78,19 +86,26 @@ class Hodographs extends PlotComponent {
         this.gl_elems.bg_billboard.updateField(field.getStormMotionGrid());
         const profiles = this.profile_field.profiles;
         const { lats, lons } = this.profile_field.getProfileCoords();
+        const min_visible_zoom = this.profile_field.grid.getMinVisibleZoom(this.opts.thin_fac);
         const hodo_polyline = profiles.map((prof, iprof) => {
-            const zoom = getMinZoom(prof['jlat'], prof['ilon'], this.opts.thin_fac);
             return {
-                'offsets': [...prof['u']].map((u, ipt) => [u - prof['smu'], prof['v'][ipt] - prof['smv']]),
+                'offsets': [...prof['u']].map((u, ipt) => {
+                    if (isStormRelativeWindProfile(prof)) {
+                        return [u - prof['smu'], prof['v'][ipt] - prof['smv']];
+                    }
+                    return [u, prof['v'][ipt]];
+                }),
                 'vertices': [...prof['u']].map(u => [lons[iprof], lats[iprof]]),
-                'zoom': zoom,
+                'zoom': min_visible_zoom[iprof],
                 'data': [...prof['z']],
             };
         });
         const hodo_line = await PolylineCollection.make(gl, hodo_polyline, { line_width: this.opts.hodo_line_width, cmap: this.opts.height_cmap,
             offset_scale: this.hodo_scale * this.bg_size, offset_rotates_with_map: false });
         const sm_polyline = profiles.map((prof, iprof) => {
-            const zoom = getMinZoom(prof['jlat'], prof['ilon'], this.opts.thin_fac);
+            if (!isStormRelativeWindProfile(prof)) {
+                return { vertices: [] };
+            }
             const sm_mag = Math.hypot(prof['smu'], prof['smv']);
             const sm_ang = Math.PI / 2 - Math.atan2(-prof['smv'], -prof['smu']);
             const buffer = 2;
@@ -98,7 +113,7 @@ class Hodographs extends PlotComponent {
                 'offsets': [[buffer * Math.sin(sm_ang), buffer * Math.cos(sm_ang)],
                     [sm_mag * Math.sin(sm_ang), sm_mag * Math.cos(sm_ang)]],
                 'vertices': [[lons[iprof], lats[iprof]], [lons[iprof], lats[iprof]]],
-                'zoom': zoom
+                'zoom': min_visible_zoom[iprof]
             };
         });
         const sm_line = await PolylineCollection.make(gl, sm_polyline, { line_width: this.opts.background_line_width, color: this.opts.bgcolor,

package/lib/Map.d.ts

@@ -1,6 +1,7 @@
 type StyleSpecification = {
     glyphs?: string;
 };
+/** Type with the required methods for mapping libraries */
 type MapLikeType = {
     triggerRepaint: () => void;
     getCanvas: () => HTMLCanvasElement;
@@ -14,6 +15,8 @@ interface LambertConformalConicParameters {
     lon_0: number;
     lat_0: number;
     lat_std: [number, number] | number;
+    a: number;
+    b: number;
 }
 declare function lambertConformalConic(params: LambertConformalConicParameters): (a: number, b: number, opts?: {
     inverse: boolean;
@@ -26,6 +29,16 @@ interface RotateSphereParams {
 declare function rotateSphere(params: RotateSphereParams): (a: number, b: number, opts?: {
     inverse: boolean;
 }) => [number, number];
+interface VerticalPerspectiveParams {
+    lat_0: number;
+    lon_0: number;
+    alt: number;
+    a: number;
+    b: number;
+}
+declare function verticalPerspective(params: VerticalPerspectiveParams): (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).
@@ -49,5 +62,5 @@ declare class LngLat {
     };
     static fromMercatorCoord(x: number, y: number): LngLat;
 }
-export { LngLat, lambertConformalConic, rotateSphere };
+export { LngLat, lambertConformalConic, rotateSphere, verticalPerspective };
 export type { MapLikeType };