autumnplot-gl 2.2.3 → 3.0.0

package/lib/Hodographs.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="mapbox-gl" />
 import { PlotComponent } from "./PlotComponent";
+import { MapLikeType } from "./Map";
 import { RawProfileField } from "./RawField";
 import { WebGLAnyRenderingContext } from "./AutumnTypes";
 interface HodographOptions {
@@ -15,22 +15,30 @@ interface HodographOptions {
     thin_fac?: number;
 }
 /** A class representing a a field of hodograph plots */
-declare class Hodographs extends PlotComponent {
-    private readonly profile_field;
-    readonly bgcolor: [number, number, number];
+declare class Hodographs<MapType extends MapLikeType> extends PlotComponent<MapType> {
+    private profile_field;
+    readonly bgcolor: string;
     readonly thin_fac: number;
     private gl_elems;
+    private line_elems;
+    private readonly hodo_scale;
+    private readonly bg_size;
     /**
      * 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);
+    /**
+     * Update the profiles displayed
+     * @param field - The new profiles to display as hodographs
+     */
+    updateField(field: RawProfileField): Promise<void>;
     /**
      * @internal
      * Add the hodographs to a map
      */
-    onAdd(map: mapboxgl.Map, gl: WebGLAnyRenderingContext): Promise<void>;
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
     /**
      * @internal
      * Render the hodographs

package/lib/Hodographs.js

@@ -1,8 +1,8 @@
-import { PlotComponent, layer_worker } from "./PlotComponent";
+import { PlotComponent } from "./PlotComponent";
 import { PolylineCollection } from "./PolylineCollection";
 import { BillboardCollection } from "./BillboardCollection";
-import { getMinZoom, hex2rgba } from './utils';
-import { LngLat } from "./Map";
+import { getMinZoom, hex2rgb } from './utils';
+import { ColorMap } from "./Colormap";
 const LINE_WIDTH = 4;
 const BG_MAX_RING_MAG = 40;
 const HODO_BG_DIMS = {
@@ -40,28 +40,7 @@ function _createHodoBackgroundTexture() {
 }
 ;
 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;
+const HODO_CMAP = new ColorMap([0, 1, 3, 6, 9], ['#ffffcc', '#a1dab4', '#41b6c4', '#225ea8']);
 /** A class representing a a field of hodograph plots */
 class Hodographs extends PlotComponent {
     /**
@@ -73,79 +52,85 @@ class Hodographs extends PlotComponent {
         super();
         opts = opts || {};
         this.profile_field = profile_field;
-        const color = hex2rgba(opts.bgcolor || '#000000');
-        this.bgcolor = [color[0], color[1], color[2]];
+        this.bgcolor = opts.bgcolor || '#000000';
         this.thin_fac = opts.thin_fac || 1;
+        this.hodo_scale = (HODO_BG_DIMS.BB_TEX_WIDTH - LINE_WIDTH / 2) / (HODO_BG_DIMS.BB_TEX_WIDTH * BG_MAX_RING_MAG);
+        this.bg_size = 140;
         this.gl_elems = null;
+        this.line_elems = null;
     }
     /**
-     * @internal
-     * Add the hodographs to a map
+     * Update the profiles displayed
+     * @param field - The new profiles to display as hodographs
      */
-    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();
+    async updateField(field) {
+        this.profile_field = field;
+        if (this.gl_elems === null)
+            return;
+        // XXX: This might leak VRAM
+        const gl = this.gl_elems.gl;
+        this.gl_elems.bg_billboard.updateField(field.getStormMotionGrid());
+        const profiles = this.profile_field.profiles;
+        const hodo_polyline = profiles.map(prof => {
             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],
+                'offsets': [...prof['u']].map((u, ipt) => [u - prof['smu'], prof['v'][ipt] - prof['smv']]),
+                'vertices': [...prof['u']].map(u => [prof['lon'], prof['lat']]),
                 'zoom': zoom,
-                'texcoords': [...prof['z']].map(z => [z / max_tex_z, 0.5])
+                'data': [...prof['z']],
             };
-        }));
-        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 hodo_line = await PolylineCollection.make(gl, hodo_polyline, { line_width: 2.5, cmap: HODO_CMAP, offset_scale: this.hodo_scale * this.bg_size });
+        const sm_polyline = profiles.map(prof => {
             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)],
+                'offsets': [[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]]
+                'vertices': [[prof['lon'], prof['lat']], [prof['lon'], prof['lat']]],
+                'zoom': zoom
             };
-        }));
-        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);
+        });
+        const sm_line = await PolylineCollection.make(gl, sm_polyline, { line_width: 1.5, color: this.bgcolor, offset_scale: this.hodo_scale * this.bg_size });
+        this.line_elems = {
+            hodo_line: hodo_line, sm_line: sm_line
+        };
+    }
+    /**
+     * @internal
+     * Add the hodographs to a map
+     */
+    async onAdd(map, gl) {
+        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(this.profile_field.getStormMotionGrid(), this.thin_fac, max_zoom, bg_image, HODO_BG_DIMS, hex2rgb(this.bgcolor), this.bg_size * 0.004);
+        await bg_billboard.setup(gl);
         this.gl_elems = {
-            map: map, bg_billboard: bg_billboard, hodo_line: hodo_line, sm_line: sm_line
+            gl: gl, map: map, bg_billboard: bg_billboard
         };
+        this.updateField(this.profile_field);
     }
     /**
      * @internal
      * Render the hodographs
      */
     render(gl, matrix) {
-        if (this.gl_elems === null)
+        if (this.gl_elems === null || this.line_elems === null)
             return;
         const gl_elems = this.gl_elems;
+        const line_elems = this.line_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);
+        line_elems.hodo_line.render(gl, matrix, [map_width, map_height], zoom, bearing, pitch);
+        line_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);
     }
 }

package/lib/Map.d.ts

@@ -1,5 +1,15 @@
-import mapboxgl from 'mapbox-gl';
-type MapType = mapboxgl.Map | maplibregl.Map;
+type StyleSpecification = {
+    glyphs?: string;
+};
+type MapLikeType = {
+    triggerRepaint: () => void;
+    getCanvas: () => HTMLCanvasElement;
+    getStyle: () => StyleSpecification;
+    getZoom: () => number;
+    getMaxZoom: () => number;
+    getBearing: () => number;
+    getPitch: () => number;
+};
 interface LambertConformalConicParameters {
     lon_0: number;
     lat_0: number;
@@ -37,6 +47,7 @@ declare class LngLat {
         x: number;
         y: number;
     };
+    static fromMercatorCoord(x: number, y: number): LngLat;
 }
 export { LngLat, lambertConformalConic, rotateSphere };
-export type { MapType };
+export type { MapLikeType };

package/lib/Map.js

@@ -124,11 +124,17 @@ function rotateSphere(params) {
 function mercatorXfromLng(lng) {
     return (180 + lng) / 360;
 }
+function lngFromMercatorX(x) {
+    return 360 * x - 180;
+}
 function mercatorYfromLat(lat) {
     const sin_lat = Math.sin(lat * Math.PI / 180);
     const y = (180 - (90 / Math.PI * Math.log((1 + sin_lat) / (1 - sin_lat)))) / 360;
     return Math.min(2, Math.max(-2, y));
 }
+function latFromMercatorY(y) {
+    return Math.atan(Math.sinh((180 - y * 360) * Math.PI / 180)) * 180 / Math.PI;
+}
 /**
  * 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).
@@ -156,5 +162,8 @@ class LngLat {
     toMercatorCoord() {
         return { x: mercatorXfromLng(this.lng), y: mercatorYfromLat(this.lat) };
     }
+    static fromMercatorCoord(x, y) {
+        return new LngLat(lngFromMercatorX(x), latFromMercatorY(y));
+    }
 }
 export { LngLat, lambertConformalConic, rotateSphere };

package/lib/Paintball.d.ts

@@ -1,5 +1,5 @@
 import { TypedArray, WebGLAnyRenderingContext } from "./AutumnTypes";
-import { MapType } from "./Map";
+import { MapLikeType } from "./Map";
 import { PlotComponent } from "./PlotComponent";
 import { RawScalarField } from "./RawField";
 interface PaintballOptions {
@@ -20,11 +20,12 @@ interface PaintballOptions {
  * 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<ArrayType extends TypedArray> extends PlotComponent {
-    private readonly field;
+declare class Paintball<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponent<MapType> {
+    private field;
     readonly colors: number[];
     readonly opacity: number;
     private gl_elems;
+    private fill_texture;
     /**
      * 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
@@ -33,6 +34,11 @@ declare class Paintball<ArrayType extends TypedArray> extends PlotComponent {
      * @param opts  - Options for creating the paintball plot
      */
     constructor(field: RawScalarField<ArrayType>, opts?: PaintballOptions);
+    /**
+     * Update the field displayed as a paintball plot
+     * @param field - The new field to display as a paintball plot
+     */
+    updateField(field: RawScalarField<ArrayType>): Promise<void>;
     /**
      * @internal
      * Add the paintball plot to a map.

package/lib/Paintball.js

@@ -68,6 +68,30 @@ class Paintball extends PlotComponent {
         this.colors = colors.reverse().map(color => hex2rgba(color)).flat();
         this.opacity = opts.opacity !== undefined ? opts.opacity : 1.;
         this.gl_elems = null;
+        this.fill_texture = null;
+    }
+    /**
+     * Update the field displayed as a paintball plot
+     * @param field - The new field to display as a paintball plot
+     */
+    async updateField(field) {
+        this.field = field;
+        if (this.gl_elems === null)
+            return;
+        const gl = this.gl_elems.gl;
+        gl.pixelStorei(gl.UNPACK_ALIGNMENT, 2);
+        const tex_data = this.field.getTextureData();
+        const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, !(tex_data instanceof Float32Array));
+        const fill_image = { 'format': format, 'type': type,
+            'width': this.field.grid.ni, 'height': this.field.grid.nj, 'image': tex_data,
+            'mag_filter': gl.NEAREST, 'row_alignment': row_alignment,
+        };
+        if (this.fill_texture === null) {
+            this.fill_texture = new WGLTexture(gl, fill_image);
+        }
+        else {
+            this.fill_texture.setImageData(fill_image);
+        }
     }
     /**
      * @internal
@@ -79,29 +103,23 @@ class Paintball extends PlotComponent {
         const { vertices: verts_buf, texcoords: tex_coords_buf } = await this.field.grid.getWGLBuffers(gl);
         const vertices = verts_buf;
         const texcoords = tex_coords_buf;
-        gl.pixelStorei(gl.UNPACK_ALIGNMENT, 2);
-        const { format, type, row_alignment } = getGLFormatTypeAlignment(gl, this.field.isFloat16());
-        const fill_image = { 'format': format, 'type': type,
-            'width': this.field.grid.ni, 'height': this.field.grid.nj, 'image': this.field.getTextureData(),
-            'mag_filter': gl.NEAREST, 'row_alignment': row_alignment,
-        };
-        const fill_texture = new WGLTexture(gl, fill_image);
         this.gl_elems = {
-            program: program, vertices: vertices, fill_texture: fill_texture, texcoords: texcoords,
+            gl: gl, program: program, vertices: vertices, texcoords: texcoords,
         };
+        this.updateField(this.field);
     }
     /**
      * @internal
      * Render the paintball plot
      */
     render(gl, matrix) {
-        if (this.gl_elems === null)
+        if (this.gl_elems === null || this.fill_texture === null)
             return;
         const gl_elems = this.gl_elems;
         if (matrix instanceof Float32Array)
             matrix = [...matrix];
         // Render to framebuffer
-        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_matrix': matrix, 'u_opacity': this.opacity, 'u_colors': this.colors, 'u_num_colors': this.colors.length / 4, 'u_offset': 0 }, { 'u_fill_sampler': gl_elems.fill_texture });
+        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_matrix': matrix, 'u_opacity': this.opacity, 'u_colors': this.colors, 'u_num_colors': this.colors.length / 4, 'u_offset': 0 }, { 'u_fill_sampler': this.fill_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();

package/lib/PlotComponent.d.ts

@@ -1,5 +1,5 @@
 import * as Comlink from 'comlink';
-import { MapType } from './Map';
+import { MapLikeType } from './Map';
 import { WebGLAnyRenderingContext } from './AutumnTypes';
 declare const layer_worker: Comlink.Remote<{
     makeBBElements: (field_lats: Float32Array, field_lons: Float32Array, field_ni: number, field_nj: number, thin_fac_base: number, max_zoom: number) => {
@@ -11,15 +11,15 @@ declare const layer_worker: Comlink.Remote<{
         tex_coords: Float32Array;
         grid_cell_size: Float32Array;
     };
-    makePolyLines: (lines: import("./AutumnTypes").LineSpec[]) => import("./AutumnTypes").PolylineSpec;
+    makePolyLines: (lines: import("./AutumnTypes").LineData[]) => import("./AutumnTypes").Polyline;
 }>;
-declare abstract class PlotComponent {
+declare abstract class PlotComponent<MapType extends MapLikeType> {
     abstract onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
     abstract render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
 declare function getGLFormatTypeAlignment(gl: WebGLAnyRenderingContext, is_float16: boolean): {
-    format: number;
-    type: number;
+    format: 33325 | 33326 | 6409;
+    type: 36193 | 5131 | 5126;
     row_alignment: number;
 };
 export { PlotComponent, layer_worker, getGLFormatTypeAlignment };

package/lib/PlotLayer.d.ts

@@ -1,12 +1,14 @@
 import { WebGLAnyRenderingContext } from './AutumnTypes';
-import { MapType } from './Map';
+import { MapLikeType } from './Map';
 import { PlotComponent } from './PlotComponent';
-declare abstract class PlotLayerBase {
+declare abstract class PlotLayerBase<MapType extends MapLikeType> {
     readonly type: 'custom';
     readonly id: string;
+    protected map: MapType;
     constructor(id: string);
     abstract onAdd(map: MapType, gl: WebGLAnyRenderingContext): void;
     abstract render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
+    protected repaint(): void;
 }
 /**
  * A static map layer. The data are assumed to be static in time. If the data have a time component (e.g., a model forecast), an {@link MultiPlotLayer}
@@ -17,19 +19,19 @@ declare abstract class PlotLayerBase {
  * const wind_speed_layer = new PlotLayer('wind-speed-fill', wind_speed_fill);
  * const barb_layer = new PlotLayer('barbs', wind_barbs);
  */
-declare class PlotLayer extends PlotLayerBase {
+declare class PlotLayer<MapType extends MapLikeType> extends PlotLayerBase<MapType> {
     private readonly field;
     /**
      * Create a map layer from a field
      * @param id    - A unique id for this layer
      * @param field - The field to plot in this layer
      */
-    constructor(id: string, field: PlotComponent);
+    constructor(id: string, field: PlotComponent<MapType>);
     /**
      * @internal
      * Add this layer to a map
      */
-    onAdd(map: MapType, gl: WebGLAnyRenderingContext): void;
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
     /**
      * @internal
      * Render this layer
@@ -50,10 +52,9 @@ declare class PlotLayer extends PlotLayerBase {
  * // Set the date/time in the map layer
  * height_layer.setActiveKey('20230112_1200');
  */
-declare class MultiPlotLayer extends PlotLayerBase {
+declare class MultiPlotLayer<MapType extends MapLikeType> extends PlotLayerBase<MapType> {
     private fields;
     private field_key;
-    private map;
     private gl;
     /**
      * Create a time-varying map layer
@@ -72,7 +73,7 @@ declare class MultiPlotLayer extends PlotLayerBase {
     render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
     /**
      * Set the active key
-     * @param key - The new key
+     * @param key - The new key. The field with that key is plotted immediately.
      */
     setActiveKey(key: string): void;
     /**
@@ -81,11 +82,10 @@ declare class MultiPlotLayer extends PlotLayerBase {
      */
     getKeys(): string[];
     /**
-     * Add a field valid at a specific date/time
+     * Add a field with a given key
      * @param field - The field to add
-     * @param dt    - The date/time at which the field is valid
+     * @param key   - The key to associate with the field
      */
-    addField(field: PlotComponent, key: string): void;
-    private repaintIfNecessary;
+    addField(field: PlotComponent<MapType>, key: string): void;
 }
 export { PlotLayer, MultiPlotLayer };

package/lib/PlotLayer.js

@@ -2,6 +2,12 @@ class PlotLayerBase {
     constructor(id) {
         this.type = 'custom';
         this.id = id;
+        this.map = null;
+    }
+    repaint() {
+        if (this.map !== null) {
+            this.map.triggerRepaint();
+        }
     }
 }
 /**
@@ -27,8 +33,9 @@ class PlotLayer extends PlotLayerBase {
      * @internal
      * Add this layer to a map
      */
-    onAdd(map, gl) {
-        this.field.onAdd(map, gl);
+    async onAdd(map, gl) {
+        this.map = map;
+        await this.field.onAdd(map, gl);
     }
     /**
      * @internal
@@ -73,10 +80,10 @@ class MultiPlotLayer extends PlotLayerBase {
         this.gl = gl;
         Object.values(this.fields).forEach(field => {
             field.onAdd(map, gl).then(res => {
-                this.repaintIfNecessary(null);
+                this.repaint();
             });
         });
-        this.repaintIfNecessary(null);
+        this.repaint();
     }
     /**
      * @internal
@@ -90,12 +97,12 @@ class MultiPlotLayer extends PlotLayerBase {
     }
     /**
      * Set the active key
-     * @param key - The new key
+     * @param key - The new key. The field with that key is plotted immediately.
      */
     setActiveKey(key) {
         const old_field_key = this.field_key;
         this.field_key = key;
-        this.repaintIfNecessary(old_field_key);
+        this.repaint();
     }
     /**
      * Get a list of all dates/times that have been added to the layer
@@ -105,15 +112,15 @@ class MultiPlotLayer extends PlotLayerBase {
         return Object.keys(this.fields);
     }
     /**
-     * Add a field valid at a specific date/time
+     * Add a field with a given key
      * @param field - The field to add
-     * @param dt    - The date/time at which the field is valid
+     * @param key   - The key to associate with the field
      */
     addField(field, key) {
         const old_field_key = this.field_key;
         if (this.map !== null && this.gl !== null && field !== null) {
             field.onAdd(this.map, this.gl).then(res => {
-                this.repaintIfNecessary(null);
+                this.repaint();
             });
         }
         this.fields[key] = field;
@@ -121,10 +128,5 @@ class MultiPlotLayer extends PlotLayerBase {
             this.field_key = key;
         }
     }
-    repaintIfNecessary(old_field_key) {
-        if (this.map !== null && old_field_key !== this.field_key) {
-            this.map.triggerRepaint();
-        }
-    }
 }
 export { PlotLayer, MultiPlotLayer };

package/lib/PlotLayer.worker.d.ts

@@ -1,4 +1,4 @@
-import { PolylineSpec, LineSpec } from "./AutumnTypes";
+import { LineData, Polyline } from "./AutumnTypes";
 declare function makeBBElements(field_lats: Float32Array, field_lons: Float32Array, field_ni: number, field_nj: number, thin_fac_base: number, max_zoom: number): {
     pts: Float32Array;
     tex_coords: Float32Array;
@@ -8,7 +8,7 @@ declare function makeDomainVerticesAndTexCoords(field_lats: Float32Array, field_
     tex_coords: Float32Array;
     grid_cell_size: Float32Array;
 };
-declare function makePolylines(lines: LineSpec[]): PolylineSpec;
+declare function makePolylines(lines: LineData[]): Polyline;
 declare const ep_interface: {
     makeBBElements: typeof makeBBElements;
     makeDomainVerticesAndTexCoords: typeof makeDomainVerticesAndTexCoords;