autumnplot-gl 3.2.0 → 4.0.0-beta

package/lib/StationPlot.d.ts

@@ -1,34 +1,145 @@
-import { WebGLAnyRenderingContext } from "./AutumnTypes";
+import { RenderMethodArg, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { MapLikeType } from "./Map";
 import { PlotComponent } from "./PlotComponent";
-interface EarthCoord {
-    lon: number;
-    lat: number;
+import { Grid } from "./Grid";
+import { RawObsField } from "./RawField";
+/**
+ * Positions around the station plot at which to draw the various elements
+ *
+ *  | Value   | Position     |
+ *  | --------|--------------|
+ *  | `'cl'`  | center-left  |
+ *  | `'ll'`  | lower-left   |
+ *  | `'lc'`  | lower-center |
+ *  | `'lr'`  | lower-right  |
+ *  | `'cr'`  | center-right |
+ *  | `'ur'`  | upper-right  |
+ *  | `'uc'`  | upper-center |
+ *  | `'ul'`  | upper-left   |
+ *  | `'c'`   | center       |
+ */
+type SPPosition = 'cl' | 'll' | 'lc' | 'lr' | 'cr' | 'ur' | 'uc' | 'ul' | 'c';
+interface SPNumberConfig {
+    type: 'number';
+    /**
+     * The position on the station plot at which to place the number
+     */
+    pos: SPPosition;
+    /**
+     * The color to use to draw the number
+     * @default '#000000'
+     */
+    color?: string;
+    /**
+     * A function that properly formats the number for display
+     * @example (val) => val === null ? '' : val.toFixed(0)
+     * @param val - The number to format
+     * @returns A string containing the formatted nubmer
+     */
+    formatter?: (val: number | null) => string;
 }
-interface ObsRawData<ObsFieldName extends string> {
-    coord: EarthCoord;
-    data: Record<ObsFieldName, number>;
+interface SPStringConfig {
+    type: 'string';
+    /**
+     * The position on the station plot at which to place the number
+     */
+    pos: SPPosition;
+    /**
+     * The color to use to draw the number
+     * @default '#000000'
+     */
+    color?: string;
 }
-type SPPositions = 'cl' | 'll' | 'lc' | 'lr' | 'cr' | 'ur' | 'uc' | 'ul';
-type SPDataPosition<ObsFieldName extends string> = Record<ObsFieldName, SPPositions>;
-declare class UnstructuredGrid {
-    readonly coords: EarthCoord[];
-    constructor(coords: EarthCoord[]);
-    getZoomThinning(thin_fac: number, map_max_zoom: number): number[];
+interface SPBarbConfig {
+    type: 'barb';
+    /**
+     * The color to use to draw the number
+     * @default '#000000'
+     */
+    color?: string;
+    /**
+     * A multiplier for the barb size
+     * @default 1
+     */
+    barb_size_multipler?: number;
 }
-declare class ObsField<ObsFieldName extends string> {
-    readonly grid: UnstructuredGrid;
-    readonly data: ObsRawData<ObsFieldName>[];
-    constructor(data: ObsRawData<ObsFieldName>[]);
+/**
+ * Accepted symbol codes for sky cover and present weather symbols
+ */
+type SPSymbol = ('0/8' | '1/8' | '2/8' | '3/8' | '4/8' | '5/8' | '6/8' | '7/8' | '8/8' | 'clr' | 'few' | 'sct' | 'bkn' | 'ovc' | 'obsc' | 'va' | 'fu' | 'hz' | 'du' | 'bldu' | 'sa' | 'blsa' | 'vcblsa' | 'vcbldu' | 'blpy' | 'po' | 'vcpo' | 'vcds' | 'vcss' | 'br' | 'bcbr' | 'bc' | 'mifg' | 'vcts' | 'virga' | 'vcsh' | 'ts' | 'thdr' | 'vctshz' | 'tsfzfg' | 'tsbr' | 'tsdz' | 'vctsup' | '-tsup' | 'tsup' | '+tsup' | 'sq' | 'fc' | '+fc' | 'ds' | 'ss' | 'drsa' | 'drdu' | '+ds' | '+ss' | 'drsn' | '+drsn' | '-blsn' | 'blsn' | '+blsn' | 'vcblsn' | 'vcfg' | 'bcfg' | 'prfg' | 'fg' | 'fzfg' | '-vctsdz' | '-dz' | '-dzbr' | 'vctsdz' | 'dz' | '+vctsdz' | '+dz' | '-fzdz' | '-fzdzsn' | 'fzdz' | '+fzdz' | 'fzdzsn' | '-dzra' | 'dzra' | '+dzra' | '-ra' | '-rabr' | 'ra' | 'rabr' | 'rafg' | 'vcra' | '+ra' | '-fzra' | '-fzrasn' | '-fzrabr' | '-fzrapl' | '-fzrasnpl' | 'tsfzrapl' | '-tsfzra' | 'fzra' | '+fzra' | 'fzrasn' | 'tsfzra' | '-dzsn' | '-rasn' | '-snra' | '-sndz' | 'rasn' | '+rasn' | 'snra' | 'dzsn' | 'sndz' | '+dzsn' | '+sndz' | '-sn' | '-snbr' | 'sn' | '+sn' | '-snsg' | 'sg' | '-sg' | 'ic' | '-fzdzpl' | '-fzdzplsn' | 'fzdzpl' | '-fzraplsn' | 'fzrapl' | '+fzrapl' | '-rapl' | '-rasnpl' | '-raplsn' | '+rapl' | 'rapl' | '-snpl' | 'snpl' | '-pl' | 'pl' | '-plsn' | '-plra' | 'plra' | '-pldz' | '+pl' | 'plsn' | 'plup' | '+plsn' | '-sh' | '-shra' | 'sh' | 'shra' | '+sh' | '+shra' | '-shrasn' | '-shsnra' | '+shrabr' | 'shrasn' | '+shrasn' | 'shsnra' | '+shsnra' | '-shsn' | 'shsn' | '+shsn' | '-gs' | '-shgs' | 'fzraplgs' | '-sngs' | 'gsplsn' | 'gspl' | 'plgssn' | 'gs' | 'shgs' | '+gs' | '+shgs' | '-gr' | '-shgr' | '-sngr' | 'gr' | 'shgr' | '+gr' | '+shgr' | '-tsrasn' | 'tsrasn' | '-tssnra' | 'tssnra' | '-vctsra' | '-tsra' | 'tsra' | '-tsdz' | 'vctsra' | 'tspl' | '-tssn' | '-tspl' | 'tssn' | '-vctssn' | 'vctssn' | 'tsplsn' | 'tssnpl' | '-tssnpl' | '-tsragr' | 'tsrags' | 'tsragr' | 'tsgs' | 'tsgr' | '+tsfzrapl' | '+vctsra' | '+tsra' | '+tsfzra' | '+tssn' | '+tspl' | '+tsplsn' | '+vctssn' | 'tssa' | 'tsds' | 'tsdu' | '+tsgs' | '+tsgr' | '+tsrags' | '+tsragr' | 'in' | '-up' | 'up' | '+up' | '-fzup' | 'fzup' | '+fzup');
+interface SPSymbolConfig {
+    type: 'symbol';
+    /**
+     * The position on the station plot at which to place the number
+     */
+    pos: SPPosition;
+    /**
+     * The color to use to draw the number
+     * @default '#000000'
+     */
+    color?: string;
 }
-interface StationPlotOpts {
+type SPConfig = SPNumberConfig | SPStringConfig | SPBarbConfig | SPSymbolConfig;
+/**
+ * Configuration for station data plots
+ * @example
+ * spconfig : SPDataConfig<'id' | 'tmpf' | 'wind' | 'skyc'> = {
+ *      // Add a string to the station plot (like the station ID)
+ *      id:   {type: 'string', pos: 'lr'},
+ *
+ *      // Add a number to the station plot (like the temperature)
+ *      tmpf: {type: 'number', pos: 'ul', color: '#cc0000', formatter: val => val === null ? '' : val.toFixed(0)},
+ *
+ *      // Add a barb to the station plot
+ *      wind: {type: 'barb', pos: 'c'},
+ *
+ *      // Add a symbol to the station plot
+ *      skyc: {type: 'symbol', pos: 'c'},
+ * }
+ */
+type SPDataConfig<ObsFieldName extends string> = Record<ObsFieldName, SPConfig>;
+interface StationPlotOptions<ObsFieldName extends string> {
+    config: SPDataConfig<ObsFieldName>;
+    /**
+     * Thin factor at zoom level 1 for the station plots. Should be a power of 2.
+     * @default 1
+     */
+    thin_fac?: number;
+    /**
+     * Font face to use for plotting text
+     * @default 'Trebuchet MS'
+     */
+    font_face?: string;
+    /**
+     * Size of the font to use for the text
+     * @default 12
+     */
+    font_size?: number;
+    /**
+     * URL template to use in retrieving the font data for the text. The default is to use the template from the map style.
+     */
+    font_url_template?: string;
 }
-declare class StationPlot<ObsFieldName extends string, MapType extends MapLikeType> extends PlotComponent<MapType> {
-    readonly field: ObsField<ObsFieldName>;
-    readonly data_positions: SPDataPosition<ObsFieldName>;
-    readonly opts: Required<StationPlotOpts>;
-    constructor(field: ObsField<ObsFieldName>, data_positions: SPDataPosition<ObsFieldName>, opts: StationPlotOpts);
+declare class StationPlot<GridType extends Grid, MapType extends MapLikeType, ObsFieldName extends string> extends PlotComponent<MapType> {
+    private field;
+    readonly opts: Required<StationPlotOptions<ObsFieldName>>;
+    private gl_elems;
+    private text_components;
+    /**
+     *
+     * @param field
+     * @param opts
+     */
+    constructor(field: RawObsField<GridType, ObsFieldName>, opts: StationPlotOptions<ObsFieldName>);
+    /**
+     * Update the data displayed as station plots
+     * @param field - The new field to display as station plots
+     */
+    updateField(field: RawObsField<GridType, ObsFieldName>): Promise<void>;
+    /** @internal */
     onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
-    render(gl: WebGLAnyRenderingContext, matrix: Float32Array | number[]): void;
+    /** @internal */
+    render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg): void;
 }
-export { StationPlot };
+export default StationPlot;
+export type { StationPlotOptions, SPPosition, SPNumberConfig, SPStringConfig, SPBarbConfig, SPSymbolConfig, SPConfig, SPDataConfig, SPSymbol };

package/lib/StationPlot.js

@@ -1,73 +1,205 @@
-import { kdTree } from "kd-tree-javascript";
-import { LngLat } from "./Map";
 import { PlotComponent } from "./PlotComponent";
-import { getMinZoom, normalizeOptions } from "./utils";
-class UnstructuredGrid {
-    constructor(coords) {
-        this.coords = coords;
+import { normalizeOptions } from "./utils";
+import { TextCollection } from "./TextCollection";
+import { Color } from "./Color";
+import Barbs from "./Barbs";
+const SYMBOLS = {
+    // Sky cover symbols
+    '0/8': 59658, '1/8': 59659, '2/8': 59660, '3/8': 59661, '4/8': 59662, '5/8': 59663, '6/8': 59664, '7/8': 59665, '8/8': 59666,
+    'clr': 59658, 'few': 59660, 'sct': 59662, 'bkn': 59664, 'ovc': 59666, 'obsc': 59667,
+    // Present weather symbols
+    'va': 59810, 'fu': 59810, 'hz': 59811, 'du': 59812, 'bldu': 59814, 'sa': 59814, 'blsa': 59814, 'vcblsa': 59814, 'vcbldu': 59814, 'blpy': 59814,
+    'po': 59816, 'vcpo': 59816, 'vcds': 59817, 'vcss': 59817,
+    'br': 59818, 'bcbr': 59818, 'bc': 59819, 'mifg': 59820,
+    'vcts': 59821, 'virga': 59822, 'vcsh': 59824, 'ts': 59825, 'thdr': 59825, 'vctshz': 59825,
+    'tsfzfg': 59825, 'tsbr': 59825, 'tsdz': 59825, 'vctsup': 59825,
+    '-tsup': 59825, 'tsup': 59825, '+tsup': 59825,
+    'sq': 59826, 'fc': 59827, '+fc': 59827,
+    'ds': 59839, 'ss': 59839, 'drsa': 59839, 'drdu': 59839, '+ds': 59842, '+ss': 59842,
+    'drsn': 59844, '+drsn': 59845, '-blsn': 59846, 'blsn': 59846, '+blsn': 59847, 'vcblsn': 59846,
+    'vcfg': 59848, 'bcfg': 59849, 'prfg': 59852, 'fg': 59853, 'fzfg': 59857,
+    '-vctsdz': 59859, '-dz': 59859, '-dzbr': 59859, 'vctsdz': 59861, 'dz': 59861, '+vctsdz': 59863, '+dz': 59863,
+    '-fzdz': 59864, '-fzdzsn': 59864, 'fzdz': 59865, '+fzdz': 59865, 'fzdzsn': 59865,
+    '-dzra': 59866, 'dzra': 59867, '+dzra': 59867, '-ra': 59869, '-rabr': 59869, 'ra': 59871, 'rabr': 59871, 'rafg': 59871, 'vcra': 59871, '+ra': 59873,
+    '-fzra': 59874, '-fzrasn': 59874, '-fzrabr': 59874, '-fzrapl': 59874, '-fzrasnpl': 59874, 'tsfzrapl': 59875, '-tsfzra': 59875,
+    'fzra': 59875, '+fzra': 59875, 'fzrasn': 59875, 'tsfzra': 59875,
+    '-dzsn': 59876, '-rasn': 59876, '-snra': 59876, '-sndz': 59876, 'rasn': 59877, '+rasn': 59877, 'snra': 59877, 'dzsn': 59877, 'sndz': 59877, '+dzsn': 59877, '+sndz': 59877,
+    '-sn': 59879, '-snbr': 59879, 'sn': 59881, '+sn': 59883, '-snsg': 59885, 'sg': 59885, '-sg': 59885, 'ic': 59886,
+    '-fzdzpl': 59887, '-fzdzplsn': 59887, 'fzdzpl': 59887, '-fzraplsn': 59887, 'fzrapl': 59887, '+fzrapl': 59887,
+    '-rapl': 59887, '-rasnpl': 59887, '-raplsn': 59887, '+rapl': 59887, 'rapl': 59887, '-snpl': 59887, 'snpl': 59887,
+    '-pl': 59887, 'pl': 59887, '-plsn': 59887, '-plra': 59887, 'plra': 59887, '-pldz': 59887, '+pl': 59887, 'plsn': 59887, 'plup': 59887, '+plsn': 59887,
+    '-sh': 59888, '-shra': 59888, 'sh': 59889, 'shra': 59889, '+sh': 59889, '+shra': 59889, '-shrasn': 59891, '-shsnra': 59891, '+shrabr': 59892,
+    'shrasn': 59892, '+shrasn': 59892, 'shsnra': 59892, '+shsnra': 59892, '-shsn': 59893, 'shsn': 59894, '+shsn': 59894,
+    '-gs': 59895, '-shgs': 59895, 'fzraplgs': 59896, '-sngs': 59896, 'gsplsn': 59896, 'gspl': 59896, 'plgssn': 59896, 'gs': 59896, 'shgs': 59896, '+gs': 59896, '+shgs': 59896,
+    '-gr': 59897, '-shgr': 59897, '-sngr': 59898, 'gr': 59898, 'shgr': 59898, '+gr': 59898, '+shgr': 59898,
+    '-tsrasn': 59907, 'tsrasn': 59907, '-tssnra': 59907, 'tssnra': 59907, '-vctsra': 59908, '-tsra': 59908, 'tsra': 59908, '-tsdz': 59908, 'vctsra': 59908,
+    'tspl': 59909, '-tssn': 59909, '-tspl': 59909, 'tssn': 59909, '-vctssn': 59909, 'vctssn': 59909, 'tsplsn': 59909, 'tssnpl': 59909, '-tssnpl': 59909, '-tsragr': 59910,
+    'tsrags': 59910, 'tsragr': 59910, 'tsgs': 59910, 'tsgr': 59910,
+    '+tsfzrapl': 59911, '+vctsra': 59912, '+tsra': 59912, '+tsfzra': 59912, '+tssn': 59913, '+tspl': 59913, '+tsplsn': 59913, '+vctssn': 59913,
+    'tssa': 59914, 'tsds': 59914, 'tsdu': 59914, '+tsgs': 59915, '+tsgr': 59915, '+tsrags': 59915, '+tsragr': 59915, 'in': 59750,
+    '-up': 59750, 'up': 59750, '+up': 59751, '-fzup': 59756, 'fzup': 59756, '+fzup': 59757,
+};
+const station_plot_opts_defaults = {
+    config: {},
+    thin_fac: 1,
+    font_face: 'Trebuchet MS',
+    font_size: 12,
+    font_url_template: '',
+};
+function positionToAlignmentAndOffset(pos, off_size) {
+    off_size = off_size === undefined ? 10 : off_size;
+    let ha, va;
+    let xoff, yoff;
+    if (pos == 'll' || pos == 'cl' || pos == 'ul') {
+        ha = 'right';
+        xoff = -off_size;
     }
-    getZoomThinning(thin_fac, map_max_zoom) {
-        let min_label_lon = null, min_label_lat = null, max_label_lon = null, max_label_lat = null;
-        this.coords.forEach(coord => {
-            if (min_label_lon === null || coord.lon < min_label_lon)
-                min_label_lon = coord.lon;
-            if (max_label_lon === null || coord.lon > max_label_lon)
-                max_label_lon = coord.lon;
-            if (min_label_lat === null || coord.lat < min_label_lat)
-                min_label_lat = coord.lat;
-            if (max_label_lat === null || coord.lat > max_label_lat)
-                max_label_lat = coord.lat;
-        });
-        if (min_label_lon === null || min_label_lat === null || max_label_lon === null || max_label_lat === null)
-            return [];
-        const kd_nodes = this.coords.map(c => ({ lon: c.lon, lat: c.lat, min_zoom: map_max_zoom }));
-        const tree = new kdTree(kd_nodes, (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(thin_grid_width * thin_fac); // thin_fac was 4 / contour_label_spacing for the contour labels
-        const nj_thin_grid = Math.round(thin_grid_height * thin_fac);
-        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);
-        }
-        for (let idx = 0; idx < ni_thin_grid; idx++) {
-            for (let jdy = 0; jdy < nj_thin_grid; jdy++) {
-                const zoom = getMinZoom(jdy, idx, Math.pow(2, map_max_zoom));
-                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 }, 1)[0];
-                label.min_zoom = zoom;
-            }
-        }
-        return kd_nodes.map(n => n.min_zoom);
+    else if (pos == 'lc' || pos == 'c' || pos == 'uc') {
+        ha = 'center';
+        xoff = 0;
     }
-}
-class ObsField {
-    constructor(data) {
-        this.grid = new UnstructuredGrid(data.map(d => d.coord));
-        this.data = data;
+    else {
+        ha = 'left';
+        xoff = off_size;
+    }
+    if (pos == 'll' || pos == 'lc' || pos == 'lr') {
+        va = 'top';
+        yoff = -off_size;
+    }
+    else if (pos == 'cl' || pos == 'c' || pos == 'cr') {
+        va = 'middle';
+        yoff = 0;
     }
+    else {
+        va = 'baseline';
+        yoff = off_size;
+    }
+    return { horizontal_align: ha, vertical_align: va, offset_x: xoff, offset_y: yoff };
 }
-const station_plot_opts_defaults = {};
 class StationPlot extends PlotComponent {
-    constructor(field, data_positions, opts) {
+    /**
+     *
+     * @param field
+     * @param opts
+     */
+    constructor(field, opts) {
         super();
         this.field = field;
-        this.data_positions = data_positions;
-        this.opts = normalizeOptions(opts, station_plot_opts_defaults);
+        this.opts = normalizeOptions(opts, station_plot_opts_defaults); // Is there a way to do this without invoking `as`?
+        this.gl_elems = null;
+        this.text_components = null;
+    }
+    /**
+     * Update the data displayed as station plots
+     * @param field - The new field to display as station plots
+     */
+    async updateField(field) {
+        this.field = field;
+        if (this.gl_elems === null)
+            return;
+        const map = this.gl_elems.map;
+        const gl = this.gl_elems.gl;
+        const barb_components = this.gl_elems.barb_components;
+        const map_style = map.getStyle();
+        const font_url_template = this.opts.font_url_template == '' ? map_style.glyphs : this.opts.font_url_template;
+        if (font_url_template === undefined)
+            throw "The map style doesn't have any glyph information. Please pass the font_url_template option to StationPlot";
+        const font_url = font_url_template.replace('{fontstack}', this.opts.font_face);
+        let ibarb = 0;
+        const sub_component_promises = Object.entries(this.opts.config).map(async ([k_, config]) => {
+            const k = k_;
+            if (config.type == 'number' || config.type == 'string') {
+                const pos = config.pos;
+                const color_opt = config.color;
+                const color = color_opt === undefined ? Color.fromHex('#000000') : Color.normalizeColor(color_opt);
+                const coords = this.field.grid.getEarthCoords();
+                const zoom = this.field.grid.getMinVisibleZoom(this.opts.thin_fac);
+                let text_specs;
+                if (config.type == 'number') {
+                    const comp = this.field.getScalar(k);
+                    const formatter = config.formatter === undefined ? (val) => val === null ? 'null' : val.toString() : config.formatter;
+                    text_specs = comp.map((v, i) => ({ text: formatter(v), lat: coords.lats[i], lon: coords.lons[i], min_zoom: zoom[i] }));
+                }
+                else {
+                    const comp = this.field.getStrings(k);
+                    text_specs = comp.map((v, i) => ({ text: v === null ? '' : v, lat: coords.lats[i], lon: coords.lons[i], min_zoom: zoom[i] }));
+                }
+                const tc_opts = {
+                    ...positionToAlignmentAndOffset(pos),
+                    font_size: this.opts.font_size, halo: true,
+                    text_color: color, halo_color: Color.fromHex('#ffffff'),
+                };
+                return await TextCollection.make(gl, text_specs, font_url, tc_opts);
+            }
+            else if (config.type == 'barb') {
+                const comp = this.field.getVector(k);
+                const barb_comp = barb_components[ibarb++];
+                barb_comp.updateField(comp);
+            }
+            else if (config.type == 'symbol') {
+                const pos = config.pos;
+                const color_opt = config.color;
+                const color = color_opt === undefined ? Color.fromHex('#000000') : Color.normalizeColor(color_opt);
+                const comp = this.field.getStrings(k);
+                const coords = this.field.grid.getEarthCoords();
+                const zoom = this.field.grid.getMinVisibleZoom(this.opts.thin_fac);
+                const wxsym_font_url = font_url_template.replace('{fontstack}', 'wx_symbols');
+                const text_specs = comp.map((v, i) => ({ text: v === null ? '' : String.fromCharCode(SYMBOLS[v]),
+                    lat: coords.lats[i], lon: coords.lons[i], min_zoom: zoom[i] }));
+                const tc_opts = {
+                    ...positionToAlignmentAndOffset(pos),
+                    font_size: this.opts.font_size, halo: true,
+                    text_color: color, halo_color: Color.fromHex('#ffffff'),
+                };
+                if (tc_opts.offset_x !== undefined)
+                    tc_opts.offset_x -= 3;
+                return await TextCollection.make(gl, text_specs, wxsym_font_url, tc_opts);
+            }
+            else {
+                throw `Unknown station plot configuration type ${config.type}`;
+            }
+        });
+        this.text_components = (await Promise.all(sub_component_promises)).filter((c) => c !== undefined);
+        map.triggerRepaint();
     }
+    /** @internal */
     async onAdd(map, gl) {
+        const barb_promises = Object.entries(this.opts.config).map(async ([k_, config]) => {
+            const k = k_;
+            if (config.type == 'barb') {
+                const comp = this.field.getVector(k);
+                const color = config.color === undefined ? '#000000' : config.color;
+                const barb_size = config.barb_size_multipler === undefined ? 1 : config.barb_size_multipler;
+                const barb_comp = new Barbs(comp, { thin_fac: this.opts.thin_fac, color: color, barb_size_multiplier: barb_size });
+                await barb_comp.onAdd(map, gl);
+                return barb_comp;
+            }
+        });
+        const barb_components = (await Promise.all(barb_promises)).filter((c) => c !== undefined);
+        this.gl_elems = {
+            map: map, gl: gl, barb_components: barb_components
+        };
+        this.updateField(this.field);
     }
-    render(gl, matrix) {
-        if (matrix instanceof Float32Array)
-            matrix = [...matrix];
+    /** @internal */
+    render(gl, arg) {
+        if (this.gl_elems === null || this.text_components === null)
+            return;
+        const gl_elems = this.gl_elems;
+        const text_components = this.text_components;
+        const barb_components = this.gl_elems.barb_components;
+        const map_width = gl_elems.map.getCanvas().width;
+        const map_height = gl_elems.map.getCanvas().height;
+        const map_zoom = gl_elems.map.getZoom();
+        let itext = 0, ibarb = 0;
+        Object.values(this.opts.config).forEach(comp => {
+            if (comp.type == 'barb') {
+                barb_components[ibarb++].render(gl, arg);
+            }
+            else {
+                text_components[itext++].render(gl, arg, [map_width, map_height], map_zoom);
+            }
+        });
     }
 }
-export { StationPlot };
+export default StationPlot;

package/lib/TextCollection.d.ts

@@ -1,6 +1,7 @@
-import { WebGLAnyRenderingContext } from "./AutumnTypes";
+import { RenderMethodArg, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { Color } from "./Color";
-import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
+import { ShaderProgramManager } from "./ShaderManager";
+import { WGLBuffer, WGLTexture } from "autumn-wgl";
 interface TextSpec {
     lat: number;
     lon: number;
@@ -16,17 +17,19 @@ interface TextCollectionOptions {
     text_color?: Color;
     halo_color?: Color;
     halo?: boolean;
+    offset_x?: number;
+    offset_y?: number;
 }
 declare class TextCollection {
-    readonly program: WGLProgram;
+    readonly shader_manager: ShaderProgramManager;
     readonly anchors: WGLBuffer;
     readonly offsets: WGLBuffer;
     readonly texcoords: WGLBuffer;
     readonly texture: WGLTexture;
     readonly opts: Required<TextCollectionOptions>;
     private constructor();
-    static make(gl: WebGLAnyRenderingContext, text_locs: TextSpec[], fontstack_url: string, opts?: TextCollectionOptions): Promise<TextCollection>;
-    render(gl: WebGLAnyRenderingContext, matrix: number[], [map_width, map_height]: [number, number], map_zoom: number): void;
+    static make(gl: WebGLAnyRenderingContext, text_locs: TextSpec[], fontstack_url_template: string, opts?: TextCollectionOptions): Promise<TextCollection>;
+    render(gl: WebGLAnyRenderingContext, arg: RenderMethodArg, [map_width, map_height]: [number, number], map_zoom: number): void;
 }
 export { TextCollection };
-export type { TextSpec, TextCollectionOptions };
+export type { TextSpec, TextCollectionOptions, HorizontalAlign, VerticalAlign };