autumnplot-gl 2.2.2 → 3.0.0

package/lib/Contour.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 ContourOptions {
@@ -18,34 +18,33 @@ interface ContourOptions {
      * @default Draw contours at regular intervals given by the `interval` option.
      */
     levels?: number[];
-    /**
-     * A function to thin the contours based on zoom level. The function should take a zoom level and return a number `n` that means to only show every
-     * `n`th contour.
-     * @default Don't thin the contours on any zoom level
-     */
-    thinner?: (zoom: number) => number;
 }
 /**
- * A field of contoured data. The contours can optionally be thinned based on map zoom level.
+ * A field of contoured data.
  * @example
  * // Create a contoured height field, with black contours every 30 m (assuming the height field is in
- * // meters) and only using every other contour when the map zoom level is less than 5.
- * const contours = new Contour(height_field, {color: '#000000', interval: 30,
- *                                                  thinner: zoom => zoom < 5 ? 2 : 1});
+ * // meters).
+ * const contours = new Contour(height_field, {color: '#000000', interval: 30});
  */
-declare class Contour<ArrayType extends TypedArray> extends PlotComponent {
-    private readonly field;
-    readonly color: [number, number, number];
+declare class Contour<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponent<MapType> {
+    private field;
+    readonly color: string;
     readonly interval: number;
     readonly levels: number[];
-    readonly thinner: (zoom: number) => number;
     private gl_elems;
+    private contours;
     /**
      * Create a contoured field
      * @param field - The field to contour
      * @param opts  - Options for creating the contours
      */
     constructor(field: RawScalarField<ArrayType>, opts: ContourOptions);
+    /**
+     * Update the data displayed as contours
+     * @param field - The new field to contour
+     */
+    updateField(field: RawScalarField<ArrayType>): Promise<void>;
+    getContours(): Promise<import("./AutumnTypes").ContourData>;
     /**
      * @internal
      * Add the contours to a map
@@ -57,5 +56,63 @@ declare class Contour<ArrayType extends TypedArray> extends PlotComponent {
      */
     render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
+interface ContourLabelOptions {
+    /**
+     * Number of decimal places to use in the contour labels
+     * @default 0
+     */
+    n_decimal_places?: number;
+    /**
+     * Font face to use for the contour labels
+     * @default 'Trebuchet MS'
+     */
+    font_face?: string;
+    /**
+     * Font size in points to use for the contour labels
+     * @default 12
+     */
+    font_size?: number;
+    /**
+     * URL template to use in retrieving the font data for the labels. The default is to use the template from the map style.
+     */
+    font_url_template?: string;
+    /**
+     * Text color for the contour labels
+     * @default '#000000'
+     */
+    text_color?: string;
+    /**
+     * Halo (outline) color for the contour labels
+     * @default '#000000'
+     */
+    halo_color?: string;
+    /**
+     * Whether to draw the halo (outline) on the contour labels
+     * @default false
+     */
+    halo?: boolean;
+}
+declare class ContourLabels<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponent<MapType> {
+    private readonly contours;
+    private gl_elems;
+    private text_collection;
+    private readonly opts;
+    constructor(contours: Contour<ArrayType, MapType>, opts?: ContourLabelOptions);
+    /**
+     * Update contour labels when the field for the associated Contour object has been changed.
+     */
+    updateField(): Promise<void>;
+    /**
+     * @internal
+     * Add the contour labels to a map
+     */
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
+    /**
+     * @internal
+     * Render the contour labels
+     */
+    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+}
 export default Contour;
-export type { ContourOptions };
+export { ContourLabels };
+export type { ContourOptions, ContourLabelOptions };

package/lib/Contour.js

@@ -1,116 +1,15 @@
-import { PlotComponent, getGLFormatTypeAlignment } from './PlotComponent';
-import { hex2rgba } from './utils';
-import { WGLProgram, WGLTexture } from 'autumn-wgl';
-const contour_vertex_shader_src = `uniform mat4 u_matrix;
-uniform int u_offset;
-
-attribute vec2 a_pos;
-attribute float a_grid_cell_size;
-attribute vec2 a_tex_coord;
-
-varying highp vec2 v_tex_coord;
-varying highp float v_grid_cell_size;
-varying highp float v_map_scale_fac;
-
-void main() {
-    float globe_width = 1.;
-    vec2 globe_offset = vec2(globe_width * float(u_offset), 0.);
-
-    gl_Position = u_matrix * vec4(a_pos + globe_offset, 0.0, 1.0);
-    v_tex_coord = a_tex_coord;
-    v_grid_cell_size = a_grid_cell_size;
-
-    
-    highp float lat = 2. * atan(exp(a_pos.y / 6371229.0)) - 3.1414592654 / 2.;
-    v_map_scale_fac = cos(lat);
-}`
-const contour_fragment_shader_src = `#extension GL_OES_standard_derivatives : enable
-#define MAX_N_CONTOURS 40
-
-varying highp vec2 v_tex_coord;
-varying highp float v_grid_cell_size;
-varying highp float v_map_scale_fac;
-
-uniform sampler2D u_fill_sampler;
-uniform highp float u_contour_interval;
-uniform highp float u_contour_levels[MAX_N_CONTOURS];
-uniform int u_num_contours;
-uniform lowp float u_line_cutoff;
-uniform lowp vec3 u_color;
-uniform lowp vec2 u_step_size;
-uniform lowp float u_zoom_fac;
-
-void main() {
-    highp float field_val = texture2D(u_fill_sampler, v_tex_coord).r;
-
-    lowp vec2 grid_point = fract(v_tex_coord / u_step_size + vec2(0.5, 0.5));
-    highp vec2 grid_sw = v_tex_coord - grid_point * u_step_size;
-
-    lowp vec2 ihat = vec2(u_step_size.x, 0.0);
-    lowp vec2 jhat = vec2(0.0, u_step_size.y);
-    highp float fv_sw = texture2D(u_fill_sampler, grid_sw).r;
-    highp float fv_se = texture2D(u_fill_sampler, grid_sw + ihat).r;
-    highp float fv_nw = texture2D(u_fill_sampler, grid_sw + jhat).r;
-    highp float fv_ne = texture2D(u_fill_sampler, grid_sw + ihat + jhat).r;
-
-    highp float dfdx = mix(fv_se, fv_ne, grid_point.y) - mix(fv_sw, fv_nw, grid_point.y);
-    highp float dfdy = mix(fv_nw, fv_ne, grid_point.x) - mix(fv_sw, fv_se, grid_point.x);
-    highp float fwidth_field = sqrt((dfdx * dfdx + dfdy * dfdy) / (5e5 * v_grid_cell_size));
-
-    lowp float plot_val;
-
-    if (u_num_contours > 0) {
-        highp float min_contour_diff = u_contour_levels[1] - u_contour_levels[0];
-        bool assigned_contour = false;
-        highp float low_contour;
-        highp float high_contour;
-        highp float highest_contour;
-
-        for (int ncnt = 0; ncnt < MAX_N_CONTOURS; ncnt++) {
-            if (ncnt >= u_num_contours) { break; }
-
-            min_contour_diff = min(min_contour_diff, u_contour_levels[ncnt + 1] - u_contour_levels[ncnt]);
-
-            if (u_contour_levels[ncnt] < field_val && field_val < u_contour_levels[ncnt + 1]) {
-                assigned_contour = true;
-
-                low_contour = u_contour_levels[ncnt];
-                high_contour = u_contour_levels[ncnt + 1];
-            }
-
-            highest_contour = u_contour_levels[ncnt];
-        }
-
-        if (!assigned_contour) {
-            if (field_val < u_contour_levels[0]) {
-                plot_val = (u_contour_levels[0] - field_val) / min_contour_diff;
-            }
-            else if (field_val > highest_contour) {
-                plot_val = (field_val - highest_contour) / min_contour_diff;
-            }
-        }
-        else {
-            plot_val = min(field_val - low_contour, high_contour - field_val) / min_contour_diff;
-        }
-    }
-    else {
-        plot_val = fract(field_val / u_contour_interval);
-        if (plot_val > 0.5) plot_val = 1.0 - plot_val;
-    }
-
-    plot_val = plot_val / (max(0.001, fwidth_field / (u_zoom_fac * 0.125)));
-
-    if (plot_val > u_line_cutoff) discard;
-
-    gl_FragColor = vec4(u_color, 1. - (plot_val * plot_val / (u_line_cutoff * u_line_cutoff)));
-}`
+import { LngLat } from './Map';
+import { PlotComponent } from './PlotComponent';
+import { PolylineCollection } from './PolylineCollection';
+import { TextCollection } from './TextCollection';
+import { hex2rgb, normalizeOptions } from './utils';
+import { kdTree } from 'kd-tree-javascript';
 /**
- * A field of contoured data. The contours can optionally be thinned based on map zoom level.
+ * A field of contoured data.
  * @example
  * // Create a contoured height field, with black contours every 30 m (assuming the height field is in
- * // meters) and only using every other contour when the map zoom level is less than 5.
- * const contours = new Contour(height_field, {color: '#000000', interval: 30,
- *                                                  thinner: zoom => zoom < 5 ? 2 : 1});
+ * // meters).
+ * const contours = new Contour(height_field, {color: '#000000', interval: 30});
  */
 class Contour extends PlotComponent {
     /**
@@ -123,63 +22,193 @@ class Contour extends PlotComponent {
         this.field = field;
         this.interval = opts.interval || 1;
         this.levels = opts.levels || [];
-        const color = hex2rgba(opts.color || '#000000');
-        this.color = [color[0], color[1], color[2]];
-        this.thinner = opts.thinner || (() => 1);
+        this.color = opts.color || '#000000';
         this.gl_elems = null;
+        this.contours = null;
+    }
+    /**
+     * Update the data displayed as contours
+     * @param field - The new field to contour
+     */
+    async updateField(field) {
+        this.field = field;
+        if (this.gl_elems === null)
+            return;
+        const gl = this.gl_elems.gl;
+        const contour_data = await this.getContours();
+        const line_data = Object.values(contour_data).flat().map(c => {
+            return { vertices: c };
+        });
+        this.contours = await PolylineCollection.make(gl, line_data, { line_width: 2, color: this.color });
+        this.gl_elems.map.triggerRepaint();
+    }
+    async getContours() {
+        return await this.field.getContours({ interval: this.interval, levels: this.levels });
     }
     /**
      * @internal
      * Add the contours to a map
      */
     async onAdd(map, gl) {
-        // Basic procedure for these contours from https://www.shadertoy.com/view/lltBWM
-        gl.getExtension("OES_standard_derivatives");
-        const program = new WGLProgram(gl, contour_vertex_shader_src, contour_fragment_shader_src);
-        const { vertices: verts_buf, texcoords: tex_coords_buf, cellsize: cellsize_buf } = await this.field.grid.getWGLBuffers(gl);
-        const vertices = verts_buf;
-        const texcoords = tex_coords_buf;
-        const grid_cell_size = cellsize_buf;
-        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.LINEAR, 'row_alignment': row_alignment,
-        };
-        const fill_texture = new WGLTexture(gl, fill_image);
         this.gl_elems = {
-            map: map, program: program, vertices: vertices, texcoords: texcoords, grid_cell_size: grid_cell_size, fill_texture: fill_texture
+            gl: gl, map: map
         };
+        await this.updateField(this.field);
     }
     /**
      * @internal
      * Render the contours
      */
     render(gl, matrix) {
-        if (this.gl_elems === null)
+        if (this.gl_elems === null || this.contours === null)
             return;
         const gl_elems = this.gl_elems;
         if (matrix instanceof Float32Array)
             matrix = [...matrix];
         const zoom = gl_elems.map.getZoom();
-        const intv = this.thinner(zoom) * this.interval;
-        const cutoff = 0.3 / intv;
-        const step_size = [1 / this.field.grid.ni, 1 / this.field.grid.nj];
-        const zoom_fac = Math.pow(2, zoom);
-        let uniforms = { 'u_contour_interval': intv, 'u_line_cutoff': cutoff, 'u_color': this.color, 'u_step_size': step_size, 'u_zoom_fac': zoom_fac,
-            'u_matrix': matrix, 'u_num_contours': 0, 'u_contour_levels': [0], 'u_offset': 0 };
-        if (this.levels.length > 0) {
-            uniforms = { ...uniforms, 'u_num_contours': this.levels.length, 'u_contour_levels': this.levels };
+        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();
+        this.contours.render(gl, matrix, [map_width, map_height], zoom, bearing, pitch);
+    }
+}
+const contour_label_opt_defaults = {
+    n_decimal_places: 0,
+    font_face: 'Trebuchet MS',
+    font_size: 12,
+    font_url_template: '',
+    text_color: '#000000',
+    halo_color: '#000000',
+    halo: false
+};
+class ContourLabels extends PlotComponent {
+    constructor(contours, opts) {
+        super();
+        this.opts = normalizeOptions(opts, contour_label_opt_defaults);
+        this.contours = contours;
+        this.text_collection = null;
+        this.gl_elems = null;
+    }
+    /**
+     * Update contour labels when the field for the associated Contour object has been changed.
+     */
+    async updateField() {
+        if (this.gl_elems === null)
+            return;
+        const map = this.gl_elems.map;
+        const gl = this.gl_elems.gl;
+        const map_style = map.getStyle();
+        const font_url_template = this.opts.font_url_template == '' ? map_style.glyphs : this.opts.font_url_template;
+        const font_url = font_url_template.replace('{range}', '0-255').replace('{fontstack}', this.opts.font_face);
+        const label_pos = [];
+        const contour_data = await this.contours.getContours();
+        const contour_levels = Object.keys(contour_data).map(parseFloat);
+        contour_levels.sort((a, b) => a - b);
+        const map_max_zoom = map.getMaxZoom();
+        const contour_label_spacing = 0.01 * Math.pow(2, 7 - map_max_zoom);
+        let min_label_lat = null, max_label_lat = null, min_label_lon = null, max_label_lon = null;
+        Object.entries(contour_data).forEach(([level, contours]) => {
+            const icntr = (parseFloat(level) - contour_levels[0]);
+            const level_str = level.toString();
+            contours.forEach(contour => {
+                const c_map = contour.map(v => {
+                    const v_ll = new LngLat(...v).toMercatorCoord();
+                    return [v_ll.x, v_ll.y];
+                });
+                const dist = [];
+                c_map.forEach((v, i) => {
+                    if (i == 0) {
+                        dist.push(0);
+                    }
+                    else {
+                        const v_last = c_map[i - 1];
+                        const this_dist = Math.hypot(v_last[0] - v[0], v_last[1] - v[1]);
+                        dist.push(dist[i - 1] + this_dist);
+                    }
+                });
+                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);
+                    if (dist[idist - 1] <= target_dist && target_dist < dist[idist]) {
+                        const pt1 = contour[idist - 1];
+                        const pt2 = contour[idist];
+                        const alpha = (target_dist - dist[idist - 1]) / (dist[idist] - dist[idist - 1]);
+                        const pt_lon = (1 - alpha) * pt1[0] + alpha * pt2[0];
+                        const pt_lat = (1 - alpha) * pt1[1] + alpha * pt2[1];
+                        if (min_label_lon === null || pt_lon < min_label_lon)
+                            min_label_lon = pt_lon;
+                        if (max_label_lon === null || pt_lon > max_label_lon)
+                            max_label_lon = pt_lon;
+                        if (min_label_lat === null || pt_lat < min_label_lat)
+                            min_label_lat = pt_lat;
+                        if (max_label_lat === null || pt_lat > max_label_lat)
+                            max_label_lat = pt_lat;
+                        label_pos.push({ lon: pt_lon, lat: pt_lat, min_zoom: map_max_zoom, text: level_str });
+                        n_labels_placed++;
+                    }
+                }
+            });
+        });
+        const tree = new kdTree(label_pos, (a, b) => Math.hypot(a.lon - b.lon, a.lat - b.lat), ['lon', 'lat']);
+        const { x: min_label_x, y: max_label_y } = new LngLat(min_label_lon, min_label_lat).toMercatorCoord();
+        const { x: max_label_x, y: min_label_y } = new LngLat(max_label_lon, max_label_lat).toMercatorCoord();
+        const thin_grid_width = max_label_x - min_label_x;
+        const thin_grid_height = max_label_y - min_label_y;
+        const ni_thin_grid = Math.round(4 * thin_grid_width / contour_label_spacing);
+        const nj_thin_grid = Math.round(4 * thin_grid_height / contour_label_spacing);
+        const thin_grid_xs = [];
+        const thin_grid_ys = [];
+        for (let idx = 0; idx < ni_thin_grid; idx++) {
+            thin_grid_xs.push(min_label_x + (idx / ni_thin_grid) * thin_grid_width);
+        }
+        for (let jdy = 0; jdy < nj_thin_grid; jdy++) {
+            thin_grid_ys.push(min_label_y + (jdy / nj_thin_grid) * thin_grid_height);
         }
-        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_grid_cell_size': gl_elems.grid_cell_size, 'a_tex_coord': gl_elems.texcoords }, uniforms, { 'u_fill_sampler': gl_elems.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();
-        gl_elems.program.setUniforms({ 'u_offset': -2 });
-        gl_elems.program.draw();
-        gl_elems.program.setUniforms({ 'u_offset': -1 });
-        gl_elems.program.draw();
-        gl_elems.program.setUniforms({ 'u_offset': 1 });
-        gl_elems.program.draw();
+        let skip = 1;
+        for (let zoom = map_max_zoom - 1; zoom >= 0; zoom--) {
+            for (let idx = 0; idx < ni_thin_grid; idx += skip) {
+                for (let jdy = 0; jdy < nj_thin_grid; jdy += skip) {
+                    const grid_x = thin_grid_xs[idx];
+                    const grid_y = thin_grid_ys[jdy];
+                    const ll = LngLat.fromMercatorCoord(grid_x, grid_y);
+                    const [label, dist] = tree.nearest({ lon: ll.lng, lat: ll.lat, min_zoom: 0, text: "" }, 1)[0];
+                    label.min_zoom = zoom;
+                }
+            }
+            skip *= 2;
+        }
+        const tc_opts = {
+            horizontal_align: 'center', vertical_align: 'middle', font_size: this.opts.font_size,
+            halo: this.opts.halo,
+            text_color: hex2rgb(this.opts.text_color), halo_color: hex2rgb(this.opts.halo_color),
+        };
+        this.text_collection = await TextCollection.make(gl, label_pos, font_url, tc_opts);
+        map.triggerRepaint();
+    }
+    /**
+     * @internal
+     * Add the contour labels to a map
+     */
+    async onAdd(map, gl) {
+        this.gl_elems = {
+            gl: gl, map: map,
+        };
+        this.updateField();
+    }
+    /**
+     * @internal
+     * Render the contour labels
+     */
+    render(gl, matrix) {
+        if (this.gl_elems === null || this.text_collection === null)
+            return;
+        const gl_elems = this.gl_elems;
+        const map_width = gl_elems.map.getCanvas().width;
+        const map_height = gl_elems.map.getCanvas().height;
+        const map_zoom = gl_elems.map.getZoom();
+        this.text_collection.render(gl, matrix, [map_width, map_height], map_zoom);
     }
 }
 export default Contour;
+export { ContourLabels };

package/lib/ContourCreator.d.ts

@@ -0,0 +1,18 @@
+import { MarchingSquaresModule } from './cpp/marchingsquares';
+import './cpp/marchingsquares.wasm';
+import { Grid } from "./Grid";
+import { ContourData, TypedArray } from "./AutumnTypes";
+declare function initMSModule(): Promise<MarchingSquaresModule>;
+interface FieldContourOpts {
+    /**
+     * The interval at which to create contours. The field will be contoured at this interval from its minimum to its maximum.
+     */
+    interval?: number;
+    /**
+     * Contour the field at these specific levels.
+     */
+    levels?: number[];
+}
+declare function contourCreator<ArrayType extends TypedArray>(data: ArrayType, grid: Grid, opts: FieldContourOpts): Promise<ContourData>;
+export { contourCreator, initMSModule };
+export type { FieldContourOpts };

package/lib/ContourCreator.js

@@ -0,0 +1,59 @@
+import Module from './cpp/marchingsquares';
+import './cpp/marchingsquares.wasm';
+let msm_promise = null;
+function initMSModule() {
+    if (msm_promise === null) {
+        msm_promise = Module();
+    }
+    return msm_promise;
+}
+async function contourCreator(data, grid, opts) {
+    if (opts.interval === undefined && opts.levels === undefined) {
+        throw "Must supply either an interval or levels to contourCreator()";
+    }
+    const interval = opts.interval === undefined ? 0 : opts.interval;
+    const levels = opts.levels === undefined ? [] : [...opts.levels];
+    const msm = await initMSModule();
+    const grid_coords = grid.getGridCoords();
+    const grid_data = new msm.FloatList();
+    grid_data.resize(grid.ni * grid.nj, 0);
+    const tex_data = data;
+    tex_data.forEach((v, i) => grid_data.set(i, v));
+    const grid_x = new msm.FloatList();
+    grid_x.resize(grid.ni, 0);
+    grid_coords.x.forEach((v, i) => grid_x.set(i, v));
+    const grid_y = new msm.FloatList();
+    grid_y.resize(grid.nj, 0);
+    grid_coords.y.forEach((v, i) => grid_y.set(i, v));
+    if (levels.length == 0) {
+        const levels_cpp = msm.getContourLevelsFloat32(grid_data, grid.ni, grid.nj, interval);
+        for (let ilvl = 0; ilvl < levels_cpp.size(); ilvl++) {
+            levels.push(levels_cpp.get(ilvl));
+        }
+        levels_cpp.delete();
+    }
+    const contours = {};
+    levels.forEach(v => {
+        const contours_ = msm.makeContoursFloat32(grid_data, grid_x, grid_y, v);
+        contours[v] = [];
+        for (let icntr = 0; icntr < contours_.size(); icntr++) {
+            const contour = contours_.get(icntr);
+            const contour_point_list = contour.point_list;
+            contours[v].push([]);
+            for (let ipt = 0; ipt < contour_point_list.size(); ipt++) {
+                const pt = contour_point_list.get(ipt);
+                const [lon, lat] = grid.transform(pt.x, pt.y, { inverse: true });
+                contours[v][icntr].push([lon, lat]);
+                pt.delete();
+            }
+            contour_point_list.delete();
+            contour.delete();
+        }
+        contours_.delete();
+    });
+    grid_data.delete();
+    grid_x.delete();
+    grid_y.delete();
+    return contours;
+}
+export { contourCreator, initMSModule };

package/lib/Fill.d.ts

@@ -1,7 +1,7 @@
 import { PlotComponent } from './PlotComponent';
 import { ColorMap } from './Colormap';
 import { RawScalarField } from './RawField';
-import { MapType } from './Map';
+import { MapLikeType } from './Map';
 import { TypedArray, WebGLAnyRenderingContext } from './AutumnTypes';
 interface ContourFillOptions {
     /** The color map to use when creating the fills */
@@ -21,16 +21,18 @@ interface RasterOptions {
      */
     opacity?: number;
 }
-declare class PlotComponentFill<ArrayType extends TypedArray> extends PlotComponent {
-    private readonly field;
+declare class PlotComponentFill<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponent<MapType> {
+    private field;
     readonly cmap: ColorMap;
     readonly opacity: number;
     private readonly cmap_image;
     private readonly index_map;
     private gl_elems;
+    private fill_texture;
     protected image_mag_filter: number | null;
     protected cmap_mag_filter: number | null;
     constructor(field: RawScalarField<ArrayType>, opts: ContourFillOptions);
+    updateField(field: RawScalarField<ArrayType>): Promise<void>;
     onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
     render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;
 }
@@ -40,13 +42,18 @@ declare class PlotComponentFill<ArrayType extends TypedArray> extends PlotCompon
  * // Create a raster plot with the provided color map
  * const raster = new Raster(wind_speed_field, {cmap: color_map});
  */
-declare class Raster<ArrayType extends TypedArray> extends PlotComponentFill<ArrayType> {
+declare class Raster<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponentFill<ArrayType, MapType> {
     /**
      * Create a raster plot
      * @param field - The field to create the raster plot from
      * @param opts  - Options for creating the raster plot
      */
     constructor(field: RawScalarField<ArrayType>, opts: RasterOptions);
+    /**
+     * Update the data displayed as a raster plot
+     * @param field - The new field to display as a raster plot
+     */
+    updateField(field: RawScalarField<ArrayType>): Promise<void>;
     /**
      * @internal
      * Add the raster plot to a map
@@ -64,13 +71,18 @@ declare class Raster<ArrayType extends TypedArray> extends PlotComponentFill<Arr
  * // Create a field of filled contours with the provided color map
  * const fill = new ContourFill(wind_speed_field, {cmap: color_map});
  */
-declare class ContourFill<ArrayType extends TypedArray> extends PlotComponentFill<ArrayType> {
+declare class ContourFill<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponentFill<ArrayType, MapType> {
     /**
      * 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<ArrayType>, opts: ContourFillOptions);
+    /**
+     * Update the data displayed as filled contours
+     * @param field - The new field to display as filled contours
+     */
+    updateField(field: RawScalarField<ArrayType>): Promise<void>;
     /**
      * @internal
      * Add the filled contours to a map