autumnplot-gl 4.0.0-beta → 4.1.0

package/lib/StationPlot.d.ts

@@ -1,8 +1,9 @@
 import { RenderMethodArg, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { MapLikeType } from "./Map";
 import { PlotComponent } from "./PlotComponent";
-import { Grid } from "./Grid";
+import { AutoZoomGrid } from "./grids/AutoZoom";
 import { RawObsField } from "./RawField";
+import { ColorMap } from "./Colormap";
 /**
  * Positions around the station plot at which to draw the various elements
  *
@@ -19,6 +20,7 @@ import { RawObsField } from "./RawField";
  *  | `'c'`   | center       |
  */
 type SPPosition = 'cl' | 'll' | 'lc' | 'lr' | 'cr' | 'ur' | 'uc' | 'ul' | 'c';
+/** Configuration for numerical values on station plots */
 interface SPNumberConfig {
     type: 'number';
     /**
@@ -30,6 +32,21 @@ interface SPNumberConfig {
      * @default '#000000'
      */
     color?: string;
+    /**
+     * A colormap to use for coloring numeric values
+     * @default null
+     */
+    cmap?: ColorMap | null;
+    /**
+     * Whether to draw a halo (outline) around the number
+     * @default true;
+     */
+    halo?: boolean;
+    /**
+     * The color to use for the halo (outline)
+     * @default '#ffffff'
+     */
+    halo_color?: string;
     /**
      * A function that properly formats the number for display
      * @example (val) => val === null ? '' : val.toFixed(0)
@@ -38,22 +55,34 @@ interface SPNumberConfig {
      */
     formatter?: (val: number | null) => string;
 }
+/** Configuration for strings on station plots */
 interface SPStringConfig {
     type: 'string';
     /**
-     * The position on the station plot at which to place the number
+     * The position on the station plot at which to place the string
      */
     pos: SPPosition;
     /**
-     * The color to use to draw the number
+     * The color to use to draw the string
      * @default '#000000'
      */
     color?: string;
+    /**
+     * Whether to draw a halo (outline) around the string
+     * @default true;
+     */
+    halo?: boolean;
+    /**
+     * The color to use for the halo (outline)
+     * @default '#ffffff'
+     */
+    halo_color?: string;
 }
+/** Configuration for wind barbs on station plots */
 interface SPBarbConfig {
     type: 'barb';
     /**
-     * The color to use to draw the number
+     * The color to use to draw the barb
      * @default '#000000'
      */
     color?: string;
@@ -67,18 +96,30 @@ interface SPBarbConfig {
  * 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');
+/** Configuration for symbols on station plots */
 interface SPSymbolConfig {
     type: 'symbol';
     /**
-     * The position on the station plot at which to place the number
+     * The position on the station plot at which to place the symbol
      */
     pos: SPPosition;
     /**
-     * The color to use to draw the number
+     * The color to use to draw the symbol
      * @default '#000000'
      */
-    color?: string;
+    color?: string | ((symbol: SPSymbol | null, category: SPSymbolCategory) => string);
+    /**
+     * Whether to draw a halo (outline) around the string
+     * @default true;
+     */
+    halo?: boolean;
+    /**
+     * The color to use for the halo (outline)
+     * @default '#ffffff'
+     */
+    halo_color?: string;
 }
+/** Configuration for station plot sub-elements */
 type SPConfig = SPNumberConfig | SPStringConfig | SPBarbConfig | SPSymbolConfig;
 /**
  * Configuration for station data plots
@@ -98,6 +139,7 @@ type SPConfig = SPNumberConfig | SPStringConfig | SPBarbConfig | SPSymbolConfig;
  * }
  */
 type SPDataConfig<ObsFieldName extends string> = Record<ObsFieldName, SPConfig>;
+/** Options for {@link StationPlot} components */
 interface StationPlotOptions<ObsFieldName extends string> {
     config: SPDataConfig<ObsFieldName>;
     /**
@@ -120,15 +162,40 @@ interface StationPlotOptions<ObsFieldName extends string> {
      */
     font_url_template?: string;
 }
-declare class StationPlot<GridType extends Grid, MapType extends MapLikeType, ObsFieldName extends string> extends PlotComponent<MapType> {
+type SPSymbolCategory = 'freezing_rain' | 'sleet' | 'snow' | 'rain' | 'blowing_dust' | 'thunder' | 'fog' | 'none';
+/**
+ * Station model plots for observed data
+ *
+ * ## Grid Compatibility
+ * - :white_check_mark: `PlateCarreeGrid`
+ * - :white_check_mark: `PlateCarreeRotatedGrid`
+ * - :white_check_mark: `LambertGrid`
+ * - :white_check_mark: `UnstructuredGrid`
+ * - :x:                `RadarSweepGrid`
+ * - :x:                `Geostationary`
+ *
+ * @example
+ * // Specify how to set up the station plot
+ * const station_plot_locs = {
+ *     tmpf: {type: 'number', pos: 'ul', color: '#cc0000', formatter: val => val === null ? '' : val.toFixed(0)},
+ *     dwpf: {type: 'number', pos: 'll', color: '#00aa00', formatter: val => val === null ? '' : val.toFixed(0)},
+ *     wind: {type: 'barb', pos: 'c'},
+ *     preswx: {type: 'symbol', pos: 'cl', color: '#ff00ff'},
+ *     skyc: {type: 'symbol', pos: 'c'},
+ * };
+ *
+ * // Create the station plot
+ * const station_plot = new StationPlot(obs_field, {config: station_plot_locs, thin_fac: 8, font_size: 14});
+ */
+declare class StationPlot<GridType extends AutoZoomGrid, 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
+     * Create station plots
+     * @param field - A field containing the observed data
+     * @param opts  - Various options for the station plots
      */
     constructor(field: RawObsField<GridType, ObsFieldName>, opts: StationPlotOptions<ObsFieldName>);
     /**

package/lib/StationPlot.js

@@ -76,11 +76,53 @@ function positionToAlignmentAndOffset(pos, off_size) {
     }
     return { horizontal_align: ha, vertical_align: va, offset_x: xoff, offset_y: yoff };
 }
+function symbolCategory(symbol) {
+    const sym = symbol.toLowerCase();
+    if (sym.includes('fzra') || (sym.includes('fz') && sym.includes('ra')))
+        return 'freezing_rain';
+    if (sym.includes('pl'))
+        return 'sleet';
+    if (sym.includes('sn') || sym.includes('sg') || sym.includes('gs'))
+        return 'snow';
+    if (sym.includes('ra') || sym.includes('dz'))
+        return 'rain';
+    if (sym.includes('du') || sym.includes('ds') || sym.includes('ss') || sym.includes('blsa') || sym.includes('bldu') || sym.includes('blpy'))
+        return 'blowing_dust';
+    if (sym.includes('ts') || sym.includes('thdr'))
+        return 'thunder';
+    if (sym.includes('fg'))
+        return 'fog';
+    return 'none';
+}
+/**
+ * Station model plots for observed data
+ *
+ * ## Grid Compatibility
+ * - :white_check_mark: `PlateCarreeGrid`
+ * - :white_check_mark: `PlateCarreeRotatedGrid`
+ * - :white_check_mark: `LambertGrid`
+ * - :white_check_mark: `UnstructuredGrid`
+ * - :x:                `RadarSweepGrid`
+ * - :x:                `Geostationary`
+ *
+ * @example
+ * // Specify how to set up the station plot
+ * const station_plot_locs = {
+ *     tmpf: {type: 'number', pos: 'ul', color: '#cc0000', formatter: val => val === null ? '' : val.toFixed(0)},
+ *     dwpf: {type: 'number', pos: 'll', color: '#00aa00', formatter: val => val === null ? '' : val.toFixed(0)},
+ *     wind: {type: 'barb', pos: 'c'},
+ *     preswx: {type: 'symbol', pos: 'cl', color: '#ff00ff'},
+ *     skyc: {type: 'symbol', pos: 'c'},
+ * };
+ *
+ * // Create the station plot
+ * const station_plot = new StationPlot(obs_field, {config: station_plot_locs, thin_fac: 8, font_size: 14});
+ */
 class StationPlot extends PlotComponent {
     /**
-     *
-     * @param field
-     * @param opts
+     * Create station plots
+     * @param field - A field containing the observed data
+     * @param opts  - Various options for the station plots
      */
     constructor(field, opts) {
         super();
@@ -105,31 +147,51 @@ class StationPlot extends PlotComponent {
         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);
+        const coords = this.field.grid.getEarthCoords();
+        const zoom = this.field.grid.getMinVisibleZoom(this.opts.thin_fac);
         let ibarb = 0;
-        const sub_component_promises = Object.entries(this.opts.config).map(async ([k_, config]) => {
+        let sub_component_promises = [];
+        Object.entries(this.opts.config).forEach(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);
+                const color = config.color === undefined ? Color.fromHex('#000000') : Color.normalizeColor(config.color);
+                const halo_color = config.halo_color === undefined ? Color.fromHex('#ffffff') : Color.normalizeColor(config.halo_color);
+                const halo = config.halo === undefined ? true : config.halo;
+                let cmap = null;
                 let text_specs;
                 if (config.type == 'number') {
+                    cmap = config.cmap === undefined ? null : config.cmap;
                     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] }));
+                    text_specs = comp.map((v, i) => {
+                        const spec = {
+                            text: formatter(v),
+                            lat: coords.lats[i],
+                            lon: coords.lons[i],
+                            min_zoom: zoom[i],
+                        };
+                        if (v !== null)
+                            spec.data_value = v;
+                        return spec;
+                    });
                 }
                 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] }));
+                    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'),
+                    font_size: this.opts.font_size, halo: halo,
+                    text_color: color, halo_color: halo_color,
+                    cmap: cmap
                 };
-                return await TextCollection.make(gl, text_specs, font_url, tc_opts);
+                sub_component_promises.push([TextCollection.make(gl, text_specs, font_url, tc_opts)]);
             }
             else if (config.type == 'barb') {
                 const comp = this.field.getVector(k);
@@ -138,28 +200,49 @@ class StationPlot extends PlotComponent {
             }
             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 color = config.color === undefined ? '#000000' : config.color;
+                const halo_color = config.halo_color === undefined ? Color.fromHex('#ffffff') : Color.normalizeColor(config.halo_color);
+                const halo = config.halo === undefined ? true : config.halo;
                 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);
+                const text_spec_data = [];
+                comp.forEach((v, i) => {
+                    const v_cat = v === null ? 'none' : symbolCategory(v);
+                    const text_color = typeof color === 'string' ? color : color(v, v_cat);
+                    const text_spec_data_filtered = text_spec_data.filter(tsd => tsd.color == text_color);
+                    let text_spec_color;
+                    if (text_spec_data_filtered.length == 0) {
+                        text_spec_color = { specs: [], color: text_color };
+                        text_spec_data.push(text_spec_color);
+                    }
+                    else {
+                        text_spec_color = text_spec_data_filtered[0];
+                    }
+                    text_spec_color.specs.push({
+                        text: v === null ? '' : String.fromCharCode(SYMBOLS[v]),
+                        lat: coords.lats[i],
+                        lon: coords.lons[i],
+                        min_zoom: zoom[i],
+                    });
+                });
+                const promises = [];
+                text_spec_data.forEach(tsd => {
+                    const tc_opts = {
+                        ...positionToAlignmentAndOffset(pos),
+                        font_size: this.opts.font_size, halo: halo,
+                        text_color: Color.normalizeColor(tsd.color), halo_color: halo_color,
+                    };
+                    if (tc_opts.offset_x !== undefined)
+                        tc_opts.offset_x -= 3;
+                    promises.push(TextCollection.make(gl, tsd.specs, wxsym_font_url, tc_opts));
+                });
+                sub_component_promises.push(promises);
             }
             else {
                 throw `Unknown station plot configuration type ${config.type}`;
             }
         });
-        this.text_components = (await Promise.all(sub_component_promises)).filter((c) => c !== undefined);
+        this.text_components = await Promise.all(sub_component_promises.map(p => Promise.all(p)));
         map.triggerRepaint();
     }
     /** @internal */
@@ -192,12 +275,12 @@ class StationPlot extends PlotComponent {
         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 => {
+        Object.values(this.opts.config).forEach((comp, idx) => {
             if (comp.type == 'barb') {
                 barb_components[ibarb++].render(gl, arg);
             }
             else {
-                text_components[itext++].render(gl, arg, [map_width, map_height], map_zoom);
+                text_components[itext++].forEach(tc => tc.render(gl, arg, [map_width, map_height], map_zoom));
             }
         });
     }

package/lib/TextCollection.d.ts

@@ -1,5 +1,6 @@
 import { RenderMethodArg, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { Color } from "./Color";
+import { ColorMap, ColorMapGPUInterface } from "./Colormap";
 import { ShaderProgramManager } from "./ShaderManager";
 import { WGLBuffer, WGLTexture } from "autumn-wgl";
 interface TextSpec {
@@ -7,6 +8,7 @@ interface TextSpec {
     lon: number;
     text: string;
     min_zoom?: number;
+    data_value?: number;
 }
 type HorizontalAlign = 'left' | 'center' | 'right';
 type VerticalAlign = 'baseline' | 'middle' | 'top';
@@ -15,6 +17,7 @@ interface TextCollectionOptions {
     vertical_align?: VerticalAlign;
     font_size?: number;
     text_color?: Color;
+    cmap?: ColorMap | null;
     halo_color?: Color;
     halo?: boolean;
     offset_x?: number;
@@ -25,7 +28,9 @@ declare class TextCollection {
     readonly anchors: WGLBuffer;
     readonly offsets: WGLBuffer;
     readonly texcoords: WGLBuffer;
+    readonly data: WGLBuffer | null;
     readonly texture: WGLTexture;
+    readonly cmap_gpu: ColorMapGPUInterface | null;
     readonly opts: Required<TextCollectionOptions>;
     private constructor();
     static make(gl: WebGLAnyRenderingContext, text_locs: TextSpec[], fontstack_url_template: string, opts?: TextCollectionOptions): Promise<TextCollection>;

package/lib/TextCollection.js

@@ -1,5 +1,6 @@
 import { getRendererData, isWebGL2Ctx } from "./AutumnTypes";
 import { Color } from "./Color";
+import { ColorMap, ColorMapGPUInterface } from "./Colormap";
 import { LngLat } from "./Map";
 import { ShaderProgramManager } from "./ShaderManager";
 import { Cache, normalizeOptions } from "./utils";
@@ -18,8 +19,16 @@ in vec3 a_pos;
 in vec2 a_offset;
 in vec2 a_tex_coord;
 
+#ifdef DATA
+in highp float a_value;
+#endif
+
 out highp vec2 v_tex_coord;
 
+#ifdef DATA
+out highp float v_value;
+#endif
+
 mat4 scalingMatrix(float x_scale, float y_scale, float z_scale) {
     return mat4(x_scale, 0.0,     0.0,     0.0,
                 0.0,     y_scale, 0.0,     0.0,
@@ -41,14 +50,25 @@ void main() {
 
     gl_Position = projectTile(a_pos.xy + globe_offset) + u_font_size / 12. * 1.5 * map_stretch_matrix * vec4(offset, 0., 0.);
     v_tex_coord = a_tex_coord;
+
+#ifdef DATA
+    v_value = a_value;
+#endif
 }`
 const text_fragment_shader_src = `#version 300 es
 
 in highp vec2 v_tex_coord;
+
+#ifdef DATA
+in highp float v_value;
+#endif
+
 uniform sampler2D u_sdf_sampler;
 uniform int u_is_halo;
 
+#ifndef DATA
 uniform lowp vec4 u_text_color;
+#endif
 uniform lowp vec4 u_halo_color;
 
 #define SDF_FILL 0.75
@@ -62,7 +82,13 @@ void main() {
     lowp float step_width = 0.08;
     lowp float alpha = smoothstep(SDF_FILL - step_width, SDF_FILL + step_width, sdf_val);
 
-    lowp vec4 color = u_is_halo == 1 ? u_halo_color : u_text_color;
+#ifdef DATA
+    lowp vec4 text_color = apply_colormap(v_value);
+#else
+    lowp vec4 text_color = u_text_color;
+#endif
+
+    lowp vec4 color = u_is_halo == 1 ? u_halo_color : text_color;
 
     if (u_is_halo == 1) {
         alpha = min(smoothstep(SDF_HALO - step_width, SDF_HALO + step_width, sdf_val), 1.0 - alpha);
@@ -154,6 +180,9 @@ function createAtlas(pbf_glyphs) {
 const FONT_ATLAS_CACHE = new Cache(async (urls) => {
     const promises = urls.map(async (url) => {
         const resp = await fetch(url);
+        if (resp.status != 200) {
+            throw `Error ${resp.status} retrieving font pbf from '${url}'`;
+        }
         const blob = await resp.blob();
         const data_buffer = await blob.arrayBuffer();
         // Parse the PBF and get the glyph data
@@ -168,6 +197,7 @@ const text_collection_opt_defaults = {
     vertical_align: 'baseline',
     font_size: 12,
     text_color: new Color([0, 0, 0, 1]),
+    cmap: null,
     halo_color: new Color([0, 0, 0, 1]),
     halo: false,
     offset_x: 0,
@@ -176,6 +206,7 @@ const text_collection_opt_defaults = {
 class TextCollection {
     constructor(gl, text_locs, font_atlas, opts) {
         this.opts = normalizeOptions(opts, text_collection_opt_defaults);
+        const text_color_hex = this.opts.text_color === undefined ? new Color([0, 0, 0, 1]) : this.opts.text_color;
         const is_webgl2 = isWebGL2Ctx(gl);
         const format = is_webgl2 ? gl.R8 : gl.LUMINANCE;
         const type = gl.UNSIGNED_BYTE;
@@ -193,11 +224,15 @@ class TextCollection {
         const anchor_data = new Float32Array(n_verts * 3);
         const offset_data = new Float32Array(n_verts * 2);
         const tc_data = new Float32Array(n_verts * 2);
-        let i_anch = 0, i_off = 0, i_tc = 0;
+        const value_data = new Float32Array(n_verts);
+        let i_anch = 0, i_off = 0, i_tc = 0, i_dat = 0;
+        let has_data = false;
         text_locs.forEach(loc => {
             const { lat, lon, text } = loc;
             const min_zoom = loc.min_zoom === undefined ? 0 : loc.min_zoom;
+            const data_value = loc.data_value === undefined ? NaN : loc.data_value;
             const { x: anchor_x, y: anchor_y } = new LngLat(lon, lat).toMercatorCoord();
+            has_data = has_data || loc.data_value !== undefined;
             let x_offset = this.opts.offset_x;
             let y_offset = this.opts.offset_y;
             const init_i_off = i_off;
@@ -251,6 +286,12 @@ class TextCollection {
                 tc_data[i_tc++] = glyph_info.atlas_j / font_atlas.atlas_height;
                 tc_data[i_tc++] = (glyph_info.atlas_i + glyph_info.width) / font_atlas.atlas_width;
                 tc_data[i_tc++] = glyph_info.atlas_j / font_atlas.atlas_height;
+                value_data[i_dat++] = data_value;
+                value_data[i_dat++] = data_value;
+                value_data[i_dat++] = data_value;
+                value_data[i_dat++] = data_value;
+                value_data[i_dat++] = data_value;
+                value_data[i_dat++] = data_value;
                 x_offset += glyph_info.advance - glyph_info.left;
             }
             if (this.opts.horizontal_align == 'center') {
@@ -274,18 +315,40 @@ class TextCollection {
                 }
             }
         });
-        this.shader_manager = new ShaderProgramManager(text_vertex_shader_src, text_fragment_shader_src, []);
+        const shader_defines = [];
+        let fragment_src = text_fragment_shader_src;
+        if (has_data) {
+            shader_defines.push('DATA');
+            this.data = new WGLBuffer(gl, value_data, 1, gl.TRIANGLE_STRIP);
+            const cmap = this.opts.cmap === null ? new ColorMap([0, 1], [text_color_hex], { overflow_color: text_color_hex, underflow_color: text_color_hex }) : this.opts.cmap;
+            this.cmap_gpu = new ColorMapGPUInterface(cmap);
+            this.cmap_gpu.setupShaderVariables(gl, gl.NEAREST);
+            fragment_src = ColorMapGPUInterface.applyShader(fragment_src);
+        }
+        else {
+            this.data = null;
+            this.cmap_gpu = null;
+        }
+        this.shader_manager = new ShaderProgramManager(text_vertex_shader_src, fragment_src, shader_defines);
         this.anchors = new WGLBuffer(gl, anchor_data, 3, gl.TRIANGLE_STRIP);
         this.offsets = new WGLBuffer(gl, offset_data, 2, gl.TRIANGLE_STRIP);
         this.texcoords = new WGLBuffer(gl, tc_data, 2, gl.TRIANGLE_STRIP);
+        this.data = has_data ? new WGLBuffer(gl, value_data, 1, gl.TRIANGLE_STRIP) : null;
     }
     static async make(gl, text_locs, fontstack_url_template, opts) {
         const FONT_GROUP_SIZE = 256;
         const characters = text_locs.map(tl => [...tl.text]).flat().map(c => c.charCodeAt(0)).filter((c, i, ary) => ary.indexOf(c) == i);
-        const char_code_min = Math.min(...characters);
-        const char_code_max = Math.max(...characters);
-        const stack_start = Math.floor(char_code_min / FONT_GROUP_SIZE) * FONT_GROUP_SIZE;
-        const stack_end = Math.floor(char_code_max / FONT_GROUP_SIZE) * FONT_GROUP_SIZE;
+        let stack_start, stack_end;
+        if (characters.length > 0) {
+            const char_code_min = Math.min(...characters);
+            const char_code_max = Math.max(...characters);
+            stack_start = Math.floor(char_code_min / FONT_GROUP_SIZE) * FONT_GROUP_SIZE;
+            stack_end = Math.floor(char_code_max / FONT_GROUP_SIZE) * FONT_GROUP_SIZE;
+        }
+        else {
+            stack_start = 0;
+            stack_end = 0;
+        }
         const fontstack_urls = [];
         for (let istack = stack_start; istack <= stack_end; istack += FONT_GROUP_SIZE) {
             fontstack_urls.push(fontstack_url_template.replace('{range}', `${istack}-${istack + FONT_GROUP_SIZE - 1}`));
@@ -298,13 +361,23 @@ class TextCollection {
     render(gl, arg, [map_width, map_height], map_zoom) {
         const render_data = getRendererData(arg);
         const program = this.shader_manager.getShaderProgram(gl, render_data.shaderData);
+        const attributes = { 'a_pos': this.anchors, 'a_offset': this.offsets, 'a_tex_coord': this.texcoords };
         const uniforms = {
             'u_map_width': map_width, 'u_map_height': map_height, 'u_map_zoom': map_zoom, 'u_font_size': this.opts.font_size,
-            'u_text_color': this.opts.text_color.toRGBATuple(), 'u_halo_color': this.opts.halo_color.toRGBATuple(), 'u_offset': 0,
+            'u_halo_color': this.opts.halo_color.toRGBATuple(), 'u_offset': 0,
             ...this.shader_manager.getShaderUniforms(render_data)
         };
+        if (this.data !== null) {
+            attributes['a_value'] = this.data;
+        }
+        else {
+            uniforms['u_text_color'] = this.opts.text_color.toRGBATuple();
+        }
         uniforms['u_is_halo'] = this.opts.halo ? 1 : 0;
-        program.use({ 'a_pos': this.anchors, 'a_offset': this.offsets, 'a_tex_coord': this.texcoords }, uniforms, { 'u_sdf_sampler': this.texture });
+        program.use(attributes, uniforms, { 'u_sdf_sampler': this.texture });
+        if (this.cmap_gpu !== null) {
+            this.cmap_gpu.bindShaderVariables(program);
+        }
         gl.enable(gl.BLEND);
         gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
         program.draw();

package/lib/WasmInterface.d.ts

@@ -0,0 +1,7 @@
+import { MarchingSquaresModule } from './cpp/marchingsquares';
+import './cpp/marchingsquares.wasm';
+interface InitMSModuleOpts {
+    document_script?: string;
+}
+declare function initMSModule(opts: InitMSModuleOpts): Promise<MarchingSquaresModule>;
+export { initMSModule };

package/lib/WasmInterface.js

@@ -0,0 +1,11 @@
+// Should rename this eventually
+import Module from './cpp/marchingsquares';
+import './cpp/marchingsquares.wasm';
+let msm_promise = null;
+function initMSModule(opts) {
+    if (msm_promise === null) {
+        msm_promise = Module({ 'locateFile': (fname, dir) => (opts.document_script === undefined ? dir : opts.document_script) + fname });
+    }
+    return msm_promise;
+}
+export { initMSModule };

package/lib/WorkerPool.d.ts

@@ -0,0 +1,8 @@
+import * as Comlink from 'comlink';
+type Promisify<T> = (T extends (...args: infer TArguments) => infer TReturn ? (...args: TArguments) => Promise<TReturn> : unknown);
+type WorkerPool<T> = {
+    [K in keyof T]: Promisify<T[K]>;
+};
+declare function createWorkerPool<T>(workers: Worker[], init?: (wkr: Comlink.Remote<T>) => void): WorkerPool<T>;
+export { createWorkerPool };
+export type { WorkerPool };