autumnplot-gl 3.1.0 → 3.2.0

package/lib/Hodographs.js

@@ -1,9 +1,10 @@
 import { PlotComponent } from "./PlotComponent";
 import { PolylineCollection } from "./PolylineCollection";
 import { BillboardCollection } from "./BillboardCollection";
-import { getMinZoom, hex2rgb, normalizeOptions } from './utils';
+import { getMinZoom, normalizeOptions } from './utils';
 import { ColorMap } from "./Colormap";
-const LINE_WIDTH = 4;
+import { Color } from "./Color";
+const LINE_WIDTH_MULTIPLIER = 2.5;
 const BG_MAX_RING_MAG = 40;
 const HODO_BG_DIMS = {
     BB_WIDTH: 256,
@@ -14,7 +15,7 @@ const HODO_BG_DIMS = {
     BB_MAG_WRAP: 1000,
     BB_MAG_BIN_SIZE: 1000,
 };
-function _createHodoBackgroundTexture() {
+function _createHodoBackgroundTexture(line_width) {
     let canvas = document.createElement('canvas');
     canvas.width = HODO_BG_DIMS.BB_TEX_WIDTH;
     canvas.height = HODO_BG_DIMS.BB_TEX_HEIGHT;
@@ -22,10 +23,10 @@ function _createHodoBackgroundTexture() {
     if (ctx === null) {
         throw "Could not get rendering context for the hodograph background canvas";
     }
-    ctx.lineWidth = LINE_WIDTH;
+    ctx.lineWidth = line_width;
     for (let irng = HODO_BG_DIMS.BB_TEX_WIDTH / 4; irng <= HODO_BG_DIMS.BB_TEX_WIDTH / 2; irng += HODO_BG_DIMS.BB_TEX_WIDTH / 4) {
         ctx.beginPath();
-        ctx.arc(HODO_BG_DIMS.BB_TEX_WIDTH / 2, HODO_BG_DIMS.BB_TEX_WIDTH / 2, irng - LINE_WIDTH / 2, 0, 2 * Math.PI);
+        ctx.arc(HODO_BG_DIMS.BB_TEX_WIDTH / 2, HODO_BG_DIMS.BB_TEX_WIDTH / 2, irng - line_width / 2, 0, 2 * Math.PI);
         ctx.stroke();
     }
     const ctr_x = HODO_BG_DIMS.BB_TEX_WIDTH / 2, ctr_y = HODO_BG_DIMS.BB_TEX_WIDTH / 2;
@@ -39,13 +40,15 @@ function _createHodoBackgroundTexture() {
     return canvas;
 }
 ;
-let HODO_BG_TEXTURE = null;
 const HODO_CMAP = new ColorMap([0, 1, 3, 6, 9], ['#ffffcc', '#a1dab4', '#41b6c4', '#225ea8']);
 const hodograph_opt_defaults = {
     bgcolor: '#000000',
-    thin_fac: 1
+    thin_fac: 1,
+    hodo_line_width: 2.5,
+    background_line_width: 1.5,
+    height_cmap: HODO_CMAP
 };
-/** A class representing a a field of hodograph plots */
+/** A class representing a field of hodograph plots */
 class Hodographs extends PlotComponent {
     /**
      * Create a field of hodographs
@@ -56,7 +59,8 @@ class Hodographs extends PlotComponent {
         super();
         this.profile_field = profile_field;
         this.opts = normalizeOptions(opts, hodograph_opt_defaults);
-        this.hodo_scale = (HODO_BG_DIMS.BB_TEX_WIDTH - LINE_WIDTH / 2) / (HODO_BG_DIMS.BB_TEX_WIDTH * BG_MAX_RING_MAG);
+        this.hodo_bg_texture = _createHodoBackgroundTexture(this.opts.background_line_width * LINE_WIDTH_MULTIPLIER);
+        this.hodo_scale = (HODO_BG_DIMS.BB_TEX_WIDTH - this.opts.background_line_width / 2) / (HODO_BG_DIMS.BB_TEX_WIDTH * BG_MAX_RING_MAG);
         this.bg_size = 140;
         this.gl_elems = null;
         this.line_elems = null;
@@ -82,7 +86,7 @@ class Hodographs extends PlotComponent {
                 'data': [...prof['z']],
             };
         });
-        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 hodo_line = await PolylineCollection.make(gl, hodo_polyline, { line_width: this.opts.hodo_line_width, cmap: this.opts.height_cmap, offset_scale: this.hodo_scale * this.bg_size });
         const sm_polyline = profiles.map(prof => {
             const zoom = getMinZoom(prof['jlat'], prof['ilon'], this.opts.thin_fac);
             const sm_mag = Math.hypot(prof['smu'], prof['smv']);
@@ -95,7 +99,7 @@ class Hodographs extends PlotComponent {
                 'zoom': zoom
             };
         });
-        const sm_line = await PolylineCollection.make(gl, sm_polyline, { line_width: 1.5, color: this.opts.bgcolor, offset_scale: this.hodo_scale * this.bg_size });
+        const sm_line = await PolylineCollection.make(gl, sm_polyline, { line_width: this.opts.background_line_width, color: this.opts.bgcolor, offset_scale: this.hodo_scale * this.bg_size });
         this.line_elems = {
             hodo_line: hodo_line, sm_line: sm_line
         };
@@ -105,12 +109,9 @@ class Hodographs extends PlotComponent {
      * 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 bg_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': this.hodo_bg_texture, 'mag_filter': gl.NEAREST };
         const max_zoom = map.getMaxZoom();
-        const bg_billboard = new BillboardCollection(this.profile_field.getStormMotionGrid(), this.opts.thin_fac, max_zoom, bg_image, HODO_BG_DIMS, hex2rgb(this.opts.bgcolor), this.bg_size * 0.004);
+        const bg_billboard = new BillboardCollection(this.profile_field.getStormMotionGrid(), this.opts.thin_fac, max_zoom, bg_image, HODO_BG_DIMS, this.bg_size * 0.004, { color: Color.fromHex(this.opts.bgcolor) });
         await bg_billboard.setup(gl);
         this.gl_elems = {
             gl: gl, map: map, bg_billboard: bg_billboard

package/lib/Paintball.js

@@ -1,5 +1,6 @@
+import { Color } from "./Color";
 import { PlotComponent, getGLFormatTypeAlignment } from "./PlotComponent";
-import { hex2rgba, normalizeOptions } from "./utils";
+import { normalizeOptions } from "./utils";
 import { WGLProgram, WGLTexture } from "autumn-wgl";
 const paintball_vertex_shader_src = `uniform mat4 u_matrix;
 uniform int u_offset;
@@ -68,7 +69,7 @@ class Paintball extends PlotComponent {
         super();
         this.field = field;
         this.opts = normalizeOptions(opts, paintball_opt_defaults);
-        this.color_components = [...this.opts.colors].reverse().map(color => hex2rgba(color)).flat();
+        this.color_components = [...this.opts.colors].reverse().map(color => Color.fromHex(color).toRGBATuple()).flat();
         this.gl_elems = null;
         this.fill_texture = null;
     }

package/lib/PlotComponent.js

@@ -11,11 +11,16 @@ function getGLFormatTypeAlignment(gl, is_float16) {
     if (is_float16) {
         const ext = gl.getExtension('OES_texture_half_float');
         const ext_lin = gl.getExtension('OES_texture_half_float_linear');
-        if ((!is_webgl2 && ext === null) || (!is_webgl2 && ext_lin === null)) {
-            throw "Float16 data are not supported on this hardware. Try Float32 data instead.";
+        if (is_webgl2) {
+            format = gl.R16F;
+            type = gl.HALF_FLOAT;
+        }
+        else {
+            if (ext === null || ext_lin === null)
+                throw "Float16 data are not supported on this hardware. Try Float32 data instead.";
+            format = gl.LUMINANCE;
+            type = ext.HALF_FLOAT_OES;
         }
-        format = is_webgl2 ? gl.R16F : gl.LUMINANCE;
-        type = is_webgl2 ? gl.HALF_FLOAT : ext.HALF_FLOAT_OES;
         row_alignment = 2;
     }
     else {

package/lib/PlotLayer.d.ts

@@ -4,7 +4,7 @@ import { PlotComponent } from './PlotComponent';
 declare abstract class PlotLayerBase<MapType extends MapLikeType> {
     readonly type: 'custom';
     readonly id: string;
-    protected map: MapType;
+    protected map: MapType | null;
     constructor(id: string);
     abstract onAdd(map: MapType, gl: WebGLAnyRenderingContext): void;
     abstract render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array): void;

package/lib/PlotLayer.worker.js

@@ -288,10 +288,10 @@ function makePolylines(lines) {
             return [v_ll.x, v_ll.y];
         });
         const has_offsets = line.offsets !== undefined;
-        const extrusion_verts = has_offsets ? line.offsets : verts;
+        const extrusion_verts = line.offsets !== undefined ? line.offsets : verts;
         let pt_prev, pt_this = verts[0], pt_next = verts[1];
         let ept_prev, ept_this = extrusion_verts[0], ept_next = extrusion_verts[1];
-        let len_prev, len_this = 0;
+        let len_prev, len_this = 0.0001;
         let [ext_x, ext_y] = compute_normal_vec(ept_this, ept_next, !has_offsets);
         ret.vertices[ilns.vertices++] = pt_this[0];
         ret.vertices[ilns.vertices++] = pt_this[1];
@@ -308,13 +308,13 @@ function makePolylines(lines) {
             len_this += Math.hypot(verts[ivt - 1][0] - verts[ivt][0], verts[ivt - 1][1] - verts[ivt][1]);
             ret.vertices[ilns.vertices++] = pt_prev[0];
             ret.vertices[ilns.vertices++] = pt_prev[1];
-            ret.vertices[ilns.vertices++] = len_prev;
+            ret.vertices[ilns.vertices++] = -len_prev;
             ret.vertices[ilns.vertices++] = pt_prev[0];
             ret.vertices[ilns.vertices++] = pt_prev[1];
             ret.vertices[ilns.vertices++] = len_prev;
             ret.vertices[ilns.vertices++] = pt_this[0];
             ret.vertices[ilns.vertices++] = pt_this[1];
-            ret.vertices[ilns.vertices++] = len_this;
+            ret.vertices[ilns.vertices++] = -len_this;
             ret.vertices[ilns.vertices++] = pt_this[0];
             ret.vertices[ilns.vertices++] = pt_this[1];
             ret.vertices[ilns.vertices++] = len_this;
@@ -332,7 +332,7 @@ function makePolylines(lines) {
         ret.vertices[ilns.vertices++] = len_this;
         ret.extrusion[ilns.extrusion++] = -ext_x;
         ret.extrusion[ilns.extrusion++] = -ext_y;
-        if ('offsets' in ret) {
+        if (ret.offsets !== undefined && line.offsets !== undefined) {
             const offsets = line.offsets;
             let off_prev, off_this = offsets[0];
             ret.offsets[ilns.offsets++] = off_this[0];
@@ -352,7 +352,7 @@ function makePolylines(lines) {
             ret.offsets[ilns.offsets++] = off_this[0];
             ret.offsets[ilns.offsets++] = off_this[1];
         }
-        if ('data' in ret) {
+        if (ret.data !== undefined && line.data !== undefined) {
             const data = line.data;
             let data_prev, data_this = data[0];
             ret.data[ilns.data++] = data_this;
@@ -366,7 +366,7 @@ function makePolylines(lines) {
             }
             ret.data[ilns.data++] = data_this;
         }
-        if ('zoom' in ret) {
+        if (ret.zoom !== undefined && line.zoom !== undefined) {
             for (let ivt = 0; ivt < verts.length * 4 - 2; ivt++) {
                 ret.zoom[ilns.zoom++] = line['zoom'];
             }

package/lib/PolylineCollection.d.ts

@@ -1,10 +1,18 @@
 import { LineData, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { ColorMap } from "./Colormap";
+/**
+ * A style to use to draw lines. The possible options are '-' for a solid line, '--' for a dashed line, ':' for a
+ *  dotted line, '-.' for a dash-dot line, or you could pass a list of numbers (e.g., [1, 1, 1, 0, 1, 0]) to
+ *  specify a custom dash scheme.
+ */
+type LineStyle = "-" | "--" | ":" | "-." | number[];
+declare function isLineStyle(obj: any): obj is LineStyle;
 interface PolylineCollectionOpts {
     offset_scale?: number;
     color?: string;
     cmap?: ColorMap;
     line_width?: number;
+    line_style?: LineStyle | number[];
 }
 declare class PolylineCollection {
     readonly width: number;
@@ -15,14 +23,13 @@ declare class PolylineCollection {
     private readonly offset;
     private readonly min_zoom;
     private readonly line_data;
-    private readonly line_texture;
     private readonly color;
-    private readonly cmap_min;
-    private readonly cmap_max;
-    private readonly index_map;
-    private readonly cmap_nonlin_texture;
+    private readonly cmap_gpu;
+    private readonly dash_texture;
+    private readonly n_dash;
     private constructor();
     static make(gl: WebGLAnyRenderingContext, lines: LineData[], opts?: PolylineCollectionOpts): Promise<PolylineCollection>;
     render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array, [map_width, map_height]: [number, number], map_zoom: number, map_bearing: number, map_pitch: number): void;
 }
-export { PolylineCollection };
+export { PolylineCollection, isLineStyle };
+export type { PolylineCollectionOpts, LineStyle };

package/lib/PolylineCollection.js

@@ -1,12 +1,12 @@
-import { Float16Array } from "@petamoriken/float16";
 import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
-import { makeIndexMap, makeTextureImage } from "./Colormap";
-import { getGLFormatTypeAlignment, layer_worker } from "./PlotComponent";
-import { hex2rgba } from "./utils";
+import { isWebGL2Ctx } from "./AutumnTypes";
+import { ColorMap, ColorMapGPUInterface } from "./Colormap";
+import { Color } from "./Color";
+import { layer_worker } from "./PlotComponent";
 const polyline_vertex_src = `uniform mat4 u_matrix;
 uniform int u_offset;
 
-attribute vec2 a_pos;
+attribute vec3 a_pos;
 attribute vec2 a_extrusion;
 attribute float a_data;
 
@@ -35,6 +35,9 @@ uniform lowp float u_offset_scale;
 varying highp float v_data;
 #endif
 
+varying highp float v_dist;
+varying lowp float v_cross;
+
 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,
@@ -66,6 +69,8 @@ void main() {
     float globe_width = 1.;
     vec2 globe_offset = vec2(globe_width * float(u_offset), 0.);
 
+    v_dist = abs(a_pos.z);
+    v_cross = sign(a_pos.z);
     vec4 center_pos = u_matrix * vec4(a_pos.xy + globe_offset, 0.0, 1.0);
     vec4 offset = vec4(0.0, 0.0, 0.0, 0.0);
 
@@ -73,7 +78,7 @@ void main() {
     if (u_zoom >= a_min_zoom) {
 #endif
 
-        vec2 offset_ext = u_line_width * 1.5 * a_extrusion;
+        vec2 offset_ext = u_line_width * 2. * a_extrusion;
 
         mat4 map_stretch_matrix = scalingMatrix(u_map_height / u_map_width, 1., 1.);
         mat4 rotation_matrix = rotationZMatrix(radians(u_map_bearing));  
@@ -95,41 +100,68 @@ void main() {
     v_data = a_data;
 #endif
 }`
-const polyline_fragment_src = `#ifdef DATA
-varying highp float v_data;
+const polyline_fragment_src = `
+uniform sampler2D u_dash_sampler;
 
-uniform sampler2D u_cmap_sampler;
-uniform sampler2D u_cmap_nonlin_sampler;
-uniform highp float u_cmap_min;
-uniform highp float u_cmap_max;
-uniform int u_n_index;
-#else
+#ifndef DATA
 uniform lowp vec4 u_color;
 #endif
 
-void main() {
-    lowp vec4 color;
+uniform lowp float u_line_width;
+uniform lowp float u_zoom;
+uniform int u_dash_pattern_length;
+
 #ifdef DATA
-    lowp float index_buffer = 1. / (2. * float(u_n_index));
-    lowp float normed_val = (v_data - u_cmap_min) / (u_cmap_max - u_cmap_min);
+varying highp float v_data;
+#endif
 
-    if (normed_val < 0.0 || normed_val > 1.0) {
-        discard;
-    }
+varying highp float v_dist;
+varying lowp float v_cross;
 
-    normed_val = index_buffer + normed_val * (1. - 2. * index_buffer); 
-    highp float nonlin_val = texture2D(u_cmap_nonlin_sampler, vec2(normed_val, 0.5)).r;
-    color = texture2D(u_cmap_sampler, vec2(nonlin_val, 0.5));
+void main() {
+    lowp float dash_x = fract(v_dist * 2e2 * pow(2., floor(u_zoom)) / float(u_dash_pattern_length));
+    lowp float dash = texture2D(u_dash_sampler, vec2(dash_x, 0.5)).r;
+
+    lowp vec4 color;
+#ifdef DATA
+    color = apply_colormap(v_data);
 #else
     color = u_color;
 #endif
+
+    lowp float feather = clamp((1. - abs(v_cross)) * u_line_width, 0., 1.);
+    color.a *= (dash >= 1. ? 1. : 0.) * feather;
+
     gl_FragColor = color;
 }`
+const dash_arrays = {
+    "-": [1],
+    "--": [1, 1, 1, 1, 0, 0],
+    ":": [1, 0],
+    "-.": [1, 1, 1, 0, 1, 0],
+};
+function isLineStyle(obj) {
+    return obj in dash_arrays || Array.isArray(obj) && obj.length > 0 && obj.map(e => typeof e === 'number').reduce((a, b) => a && b, true);
+}
+function makeDashTexture(gl, line_style) {
+    const dash_array = Array.isArray(line_style) ? line_style : dash_arrays[line_style];
+    const is_webgl2 = isWebGL2Ctx(gl);
+    const format = is_webgl2 ? gl.R8 : gl.LUMINANCE;
+    const type = gl.UNSIGNED_BYTE;
+    const row_alignment = 1;
+    const fill_image = { 'format': format, 'type': type,
+        'width': dash_array.length, 'height': 1, 'image': new Uint8Array(dash_array.map(d => d > 0 ? 255 : 0)),
+        'mag_filter': gl.NEAREST, 'row_alignment': row_alignment,
+    };
+    return [dash_array.length, new WGLTexture(gl, fill_image)];
+}
 class PolylineCollection {
     constructor(gl, polyline, opts) {
         opts = opts === undefined ? {} : opts;
-        this.color = opts.color === undefined ? [0., 0., 0., 1.] : hex2rgba(opts.color);
+        const color_hex = opts.color === undefined ? '#000000' : opts.color;
+        this.color = Color.fromHex(color_hex);
         const line_width = opts.line_width === undefined ? 1 : opts.line_width;
+        const line_style = opts.line_style === undefined ? '-' : opts.line_style;
         this.width = line_width;
         const shader_defines = [];
         this.vertices = new WGLBuffer(gl, polyline['vertices'], 3, gl.TRIANGLE_STRIP);
@@ -150,39 +182,21 @@ class PolylineCollection {
         else {
             this.min_zoom = null;
         }
-        this.cmap_min = -3.40282347e+38;
-        this.cmap_max = 3.40282347e+38;
+        let fragment_src = polyline_fragment_src;
         if (polyline.data !== undefined) {
-            // TAS: this needs some cleanup (there's some repated code between here and the contour fills that should be combined?)
-            this.min_zoom = new WGLBuffer(gl, polyline.zoom, 1, gl.TRIANGLE_STRIP);
             shader_defines.push('DATA');
-            const { format: format_nonlin, type: type_nonlin, row_alignment: row_alignment_nonlin } = getGLFormatTypeAlignment(gl, true);
-            let tex_image;
-            if (opts.cmap === undefined) {
-                tex_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'width': 1, 'height': 1, 'image': new Uint8Array(this.color), 'mag_filter': gl.NEAREST };
-                this.index_map = new Float16Array([0., 1.]);
-            }
-            else {
-                tex_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': makeTextureImage(opts.cmap), 'mag_filter': gl.NEAREST };
-                this.cmap_min = opts.cmap.levels[0];
-                this.cmap_max = opts.cmap.levels[opts.cmap.levels.length - 1];
-                this.index_map = makeIndexMap(opts.cmap);
-            }
-            const cmap_nonlin_image = { 'format': format_nonlin, 'type': type_nonlin,
-                'width': this.index_map.length, 'height': 1,
-                'image': new Uint16Array(this.index_map.buffer),
-                'mag_filter': gl.LINEAR, 'row_alignment': row_alignment_nonlin,
-            };
-            this.cmap_nonlin_texture = new WGLTexture(gl, cmap_nonlin_image);
-            this.line_texture = new WGLTexture(gl, tex_image);
-            this.line_data = new WGLBuffer(gl, polyline['data'], 1, gl.TRIANGLE_STRIP);
+            this.line_data = new WGLBuffer(gl, polyline.data, 1, gl.TRIANGLE_STRIP);
+            const cmap = opts.cmap === undefined ? new ColorMap([0, 1], [color_hex], { overflow_color: color_hex, underflow_color: color_hex }) : opts.cmap;
+            this.cmap_gpu = new ColorMapGPUInterface(cmap);
+            this.cmap_gpu.setupShaderVariables(gl, gl.NEAREST);
+            fragment_src = ColorMapGPUInterface.applyShader(fragment_src);
         }
         else {
-            this.line_texture = null;
             this.line_data = null;
-            this.index_map = null;
+            this.cmap_gpu = null;
         }
-        this.program = new WGLProgram(gl, polyline_vertex_src, polyline_fragment_src, { define: shader_defines });
+        [this.n_dash, this.dash_texture] = makeDashTexture(gl, line_style);
+        this.program = new WGLProgram(gl, polyline_vertex_src, fragment_src, { define: shader_defines });
     }
     static async make(gl, lines, opts) {
         const polylines = await layer_worker.makePolyLines(lines);
@@ -193,29 +207,27 @@ class PolylineCollection {
             matrix = [...matrix];
         const attributes = { 'a_pos': this.vertices, 'a_extrusion': this.extrusion };
         const uniforms = {
-            'u_matrix': matrix, 'u_line_width': this.width, 'u_map_width': map_width, 'u_map_height': map_height, 'u_map_bearing': map_bearing, 'u_offset': 0
+            'u_matrix': matrix, 'u_line_width': this.width, 'u_map_width': map_width, 'u_map_height': map_height, 'u_map_bearing': map_bearing, 'u_offset': 0, 'u_zoom': map_zoom,
+            'u_dash_pattern_length': this.n_dash
         };
-        const textures = {};
-        if (this.offset !== null) {
+        const textures = { 'u_dash_sampler': this.dash_texture };
+        if (this.offset !== null && this.scale !== null) {
             attributes['a_offset'] = this.offset;
             uniforms['u_offset_scale'] = this.scale * (map_height / map_width);
         }
         if (this.min_zoom !== null) {
             attributes['a_min_zoom'] = this.min_zoom;
-            uniforms['u_zoom'] = map_zoom;
         }
-        if (this.line_data !== null && this.line_texture !== null) {
+        if (this.line_data !== null) {
             attributes['a_data'] = this.line_data;
-            textures['u_cmap_sampler'] = this.line_texture;
-            textures['u_cmap_nonlin_sampler'] = this.cmap_nonlin_texture;
-            uniforms['u_cmap_min'] = this.cmap_min;
-            uniforms['u_cmap_max'] = this.cmap_max;
-            uniforms['u_n_index'] = this.index_map.length;
         }
         else {
-            uniforms['u_color'] = this.color;
+            uniforms['u_color'] = this.color.toRGBATuple();
         }
         this.program.use(attributes, uniforms, textures);
+        if (this.cmap_gpu !== null) {
+            this.cmap_gpu.bindShaderVariables(this.program);
+        }
         gl.enable(gl.BLEND);
         gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
         this.program.draw();
@@ -227,4 +239,4 @@ class PolylineCollection {
         this.program.draw();
     }
 }
-export { PolylineCollection };
+export { PolylineCollection, isLineStyle };

package/lib/StationPlot.d.ts

@@ -0,0 +1,34 @@
+import { WebGLAnyRenderingContext } from "./AutumnTypes";
+import { MapLikeType } from "./Map";
+import { PlotComponent } from "./PlotComponent";
+interface EarthCoord {
+    lon: number;
+    lat: number;
+}
+interface ObsRawData<ObsFieldName extends string> {
+    coord: EarthCoord;
+    data: Record<ObsFieldName, number>;
+}
+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[];
+}
+declare class ObsField<ObsFieldName extends string> {
+    readonly grid: UnstructuredGrid;
+    readonly data: ObsRawData<ObsFieldName>[];
+    constructor(data: ObsRawData<ObsFieldName>[]);
+}
+interface StationPlotOpts {
+}
+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);
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
+    render(gl: WebGLAnyRenderingContext, matrix: Float32Array | number[]): void;
+}
+export { StationPlot };

package/lib/StationPlot.js

@@ -0,0 +1,73 @@
+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;
+    }
+    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);
+    }
+}
+class ObsField {
+    constructor(data) {
+        this.grid = new UnstructuredGrid(data.map(d => d.coord));
+        this.data = data;
+    }
+}
+const station_plot_opts_defaults = {};
+class StationPlot extends PlotComponent {
+    constructor(field, data_positions, opts) {
+        super();
+        this.field = field;
+        this.data_positions = data_positions;
+        this.opts = normalizeOptions(opts, station_plot_opts_defaults);
+    }
+    async onAdd(map, gl) {
+    }
+    render(gl, matrix) {
+        if (matrix instanceof Float32Array)
+            matrix = [...matrix];
+    }
+}
+export { StationPlot };

package/lib/TextCollection.d.ts

@@ -1,4 +1,5 @@
 import { WebGLAnyRenderingContext } from "./AutumnTypes";
+import { Color } from "./Color";
 import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
 interface TextSpec {
     lat: number;
@@ -12,8 +13,8 @@ interface TextCollectionOptions {
     horizontal_align?: HorizontalAlign;
     vertical_align?: VerticalAlign;
     font_size?: number;
-    text_color?: [number, number, number];
-    halo_color?: [number, number, number];
+    text_color?: Color;
+    halo_color?: Color;
     halo?: boolean;
 }
 declare class TextCollection {