autumnplot-gl 3.0.0 → 3.2.0

package/lib/Hodographs.d.ts

@@ -2,9 +2,11 @@ import { PlotComponent } from "./PlotComponent";
 import { MapLikeType } from "./Map";
 import { RawProfileField } from "./RawField";
 import { WebGLAnyRenderingContext } from "./AutumnTypes";
+import { ColorMap } from "./Colormap";
 interface HodographOptions {
     /**
      * The color of the hodograph plot background as a hex string
+     * @default '#000000'
      */
     bgcolor?: string;
     /**
@@ -13,14 +15,28 @@ interface HodographOptions {
      * @default 1
      */
     thin_fac?: number;
+    /**
+     * The width of the hodograph line in pixels
+     * @default 2.5
+     */
+    hodo_line_width: number;
+    /**
+     * The width of the lines on the background in pixels
+     * @default 1.5
+     */
+    background_line_width: number;
+    /**
+     * The colormap to use for the heights on the hodograph. Default is a yellow-blue colormap.
+     */
+    height_cmap: ColorMap;
 }
-/** A class representing a a field of hodograph plots */
+/** A class representing a field of hodograph plots */
 declare class Hodographs<MapType extends MapLikeType> extends PlotComponent<MapType> {
     private profile_field;
-    readonly bgcolor: string;
-    readonly thin_fac: number;
+    readonly opts: Required<HodographOptions>;
     private gl_elems;
     private line_elems;
+    private hodo_bg_texture;
     private readonly hodo_scale;
     private readonly bg_size;
     /**

package/lib/Hodographs.js

@@ -1,9 +1,10 @@
 import { PlotComponent } from "./PlotComponent";
 import { PolylineCollection } from "./PolylineCollection";
 import { BillboardCollection } from "./BillboardCollection";
-import { getMinZoom, hex2rgb } 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,9 +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']);
-/** A class representing a a field of hodograph plots */
+const hodograph_opt_defaults = {
+    bgcolor: '#000000',
+    thin_fac: 1,
+    hodo_line_width: 2.5,
+    background_line_width: 1.5,
+    height_cmap: HODO_CMAP
+};
+/** A class representing a field of hodograph plots */
 class Hodographs extends PlotComponent {
     /**
      * Create a field of hodographs
@@ -50,11 +57,10 @@ class Hodographs extends PlotComponent {
      */
     constructor(profile_field, opts) {
         super();
-        opts = opts || {};
         this.profile_field = profile_field;
-        this.bgcolor = opts.bgcolor || '#000000';
-        this.thin_fac = opts.thin_fac || 1;
-        this.hodo_scale = (HODO_BG_DIMS.BB_TEX_WIDTH - LINE_WIDTH / 2) / (HODO_BG_DIMS.BB_TEX_WIDTH * BG_MAX_RING_MAG);
+        this.opts = normalizeOptions(opts, hodograph_opt_defaults);
+        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;
@@ -72,7 +78,7 @@ class Hodographs extends PlotComponent {
         this.gl_elems.bg_billboard.updateField(field.getStormMotionGrid());
         const profiles = this.profile_field.profiles;
         const hodo_polyline = profiles.map(prof => {
-            const zoom = getMinZoom(prof['jlat'], prof['ilon'], this.thin_fac);
+            const zoom = getMinZoom(prof['jlat'], prof['ilon'], this.opts.thin_fac);
             return {
                 'offsets': [...prof['u']].map((u, ipt) => [u - prof['smu'], prof['v'][ipt] - prof['smv']]),
                 'vertices': [...prof['u']].map(u => [prof['lon'], prof['lat']]),
@@ -80,9 +86,9 @@ 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.thin_fac);
+            const zoom = getMinZoom(prof['jlat'], prof['ilon'], this.opts.thin_fac);
             const sm_mag = Math.hypot(prof['smu'], prof['smv']);
             const sm_ang = Math.PI / 2 - Math.atan2(-prof['smv'], -prof['smu']);
             const buffer = 2;
@@ -93,7 +99,7 @@ class Hodographs extends PlotComponent {
                 'zoom': zoom
             };
         });
-        const sm_line = await PolylineCollection.make(gl, sm_polyline, { line_width: 1.5, color: this.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
         };
@@ -103,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.thin_fac, max_zoom, bg_image, HODO_BG_DIMS, hex2rgb(this.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.d.ts

@@ -22,8 +22,8 @@ interface PaintballOptions {
  */
 declare class Paintball<ArrayType extends TypedArray, MapType extends MapLikeType> extends PlotComponent<MapType> {
     private field;
-    readonly colors: number[];
-    readonly opacity: number;
+    readonly opts: Required<PaintballOptions>;
+    private readonly color_components;
     private gl_elems;
     private fill_texture;
     /**

package/lib/Paintball.js

@@ -1,5 +1,6 @@
+import { Color } from "./Color";
 import { PlotComponent, getGLFormatTypeAlignment } from "./PlotComponent";
-import { hex2rgba } 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;
@@ -45,6 +46,10 @@ void main() {
     color.a = color.a * u_opacity;
     gl_FragColor = color;
 }`
+const paintball_opt_defaults = {
+    colors: ['#000000'],
+    opacity: 1
+};
 /**
  * A class representing a paintball plot, which is a plot of objects in every member of an ensemble. Objects are usually defined by a single threshold on
  * a field (such as simulated reflectivity greater than 40 dBZ), but could in theory be defined by any arbitrarily complicated method. In autumnplot-gl,
@@ -63,10 +68,8 @@ class Paintball extends PlotComponent {
     constructor(field, opts) {
         super();
         this.field = field;
-        opts = opts !== undefined ? opts : {};
-        const colors = opts.colors !== undefined ? [...opts.colors] : ['#000000'];
-        this.colors = colors.reverse().map(color => hex2rgba(color)).flat();
-        this.opacity = opts.opacity !== undefined ? opts.opacity : 1.;
+        this.opts = normalizeOptions(opts, paintball_opt_defaults);
+        this.color_components = [...this.opts.colors].reverse().map(color => Color.fromHex(color).toRGBATuple()).flat();
         this.gl_elems = null;
         this.fill_texture = null;
     }
@@ -119,7 +122,7 @@ class Paintball extends PlotComponent {
         if (matrix instanceof Float32Array)
             matrix = [...matrix];
         // Render to framebuffer
-        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_matrix': matrix, 'u_opacity': this.opacity, 'u_colors': this.colors, 'u_num_colors': this.colors.length / 4, 'u_offset': 0 }, { 'u_fill_sampler': this.fill_texture });
+        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_tex_coord': gl_elems.texcoords }, { 'u_matrix': matrix, 'u_opacity': this.opts.opacity, 'u_colors': this.color_components, 'u_num_colors': this.opts.colors.length, 'u_offset': 0 }, { 'u_fill_sampler': this.fill_texture });
         gl.enable(gl.BLEND);
         gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
         gl_elems.program.draw();

package/lib/PlotComponent.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

@@ -239,6 +239,9 @@ function makePolylinesMiter(lines) {
 }
 */
 function makePolylines(lines) {
+    if (lines.length == 0) {
+        return { vertices: new Float32Array([]), extrusion: new Float32Array([]) };
+    }
     const n_points_per_vert = Object.fromEntries(Object.entries(lines[0]).map(([k, v]) => {
         let n_verts;
         if (typeof v === 'number') {
@@ -285,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];
@@ -305,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;
@@ -329,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];
@@ -349,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;
@@ -363,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 };