autumnplot-gl 2.0.0 → 2.1.0

package/lib/ColorBar.d.ts

@@ -25,6 +25,11 @@ interface ColorBarOptions {
      * @default 'sans-serif'
      */
     fontface?: string;
+    /**
+     * The font size (in points) to use for the tick labels
+     * @default 12
+     */
+    ticklabelsize?: number;
 }
 /**
  * Make an SVG containing a color bar. The color bar can either be oriented horizontal or vertical, and a label can be provided.

package/lib/ColorBar.js

@@ -29,6 +29,7 @@ function makeColorBar(colormap, opts) {
     const ticks = opts.ticks || colormap.levels;
     const orientation = opts.orientation || 'vertical';
     const fontface = opts.fontface || 'sans-serif';
+    const tickfontsize = opts.ticklabelsize || 12;
     const tick_dir = opts.tick_direction || (orientation == 'vertical' ? 'left' : 'bottom');
     if (orientation == 'vertical' && (tick_dir == 'top' || tick_dir == 'bottom') ||
         orientation == 'horizontal' && (tick_dir == 'left' || tick_dir == 'right')) {
@@ -41,7 +42,7 @@ function makeColorBar(colormap, opts) {
     const chars_right = getNChar(ticks[ticks.length - 1]);
     const bar_long_size = 600;
     const bar_cross_size = bar_long_size / 9;
-    const bar_long_pad = orientation == 'horizontal' ? Math.max(chars_left, chars_right) * 6 : 5;
+    const bar_long_pad = orientation == 'horizontal' ? Math.max(chars_left, chars_right) * 6 : 8;
     const bar_cross_pad = 3;
     const bar_thickness = 10;
     let height, width, bar_left, bar_top, bar_width, bar_height;
@@ -86,8 +87,14 @@ function makeColorBar(colormap, opts) {
         }
         createElement('rect', { ...attrs, fill: color.color, opacity: color.opacity }, gbar);
     });
-    ticks.forEach(level => {
-        const ilevel = colormap.levels.indexOf(level);
+    const first_level = colormap.levels[0];
+    const last_level = colormap.levels[colormap.levels.length - 1];
+    ticks.filter(level => first_level <= level && level <= last_level).forEach(level => {
+        const diffs = colormap.levels.map(l => Math.abs(l - level));
+        let ilevel = diffs.indexOf(diffs.reduce((a, b) => Math.min(a, b)));
+        if (level <= colormap.levels[ilevel] && ilevel > 0)
+            ilevel -= 1;
+        ilevel += (level - colormap.levels[ilevel]) / (colormap.levels[ilevel + 1] - colormap.levels[ilevel]);
         const tickattrs = orientation == 'vertical' ? { transform: `translate(0, ${bar_height * (1 - ilevel / n_colors)})` } :
             { transform: `translate(${bar_width * ilevel / n_colors}, 0)` };
         const gtick = createElement('g', tickattrs, gticks);
@@ -106,7 +113,7 @@ function makeColorBar(colormap, opts) {
         else {
             textattrs = tick_dir == 'bottom' ? { y: 9, dy: '0.8em' } : { y: -9, dy: '0em' };
         }
-        const text = createElement('text', { ...textattrs, fill: '#000000', style: `font-family: ${fontface};` }, gtick);
+        const text = createElement('text', { ...textattrs, fill: '#000000', style: `font-family: ${fontface}; font-size: ${tickfontsize}pt` }, gtick);
         text.textContent = level.toString();
     });
     const outline_attrs = {

package/lib/Colormap.d.ts

@@ -44,6 +44,7 @@ declare const pw_speed850mb: ColorMap;
 declare const pw_cape: ColorMap;
 declare const pw_t2m: ColorMap;
 declare const pw_td2m: ColorMap;
+declare const nws_storm_clear_refl: ColorMap;
 /**
  * Create a diverging red/blue colormap, where red corresponds to the lowest value and blue corresponds to the highest value
  * @param level_min - The lowest value in the color map
@@ -66,5 +67,5 @@ declare const bluered: (level_min: number, level_max: number, n_colors: number)
  * @returns A canvas element containing each color of the color map
  */
 declare function makeTextureImage(colormap: ColorMap): HTMLCanvasElement;
-export { ColorMap, bluered, redblue, pw_speed500mb, pw_speed850mb, pw_cape, pw_t2m, pw_td2m, makeTextureImage };
+export { ColorMap, bluered, redblue, pw_speed500mb, pw_speed850mb, pw_cape, pw_t2m, pw_td2m, nws_storm_clear_refl, makeTextureImage };
 export type { Color };

package/lib/Colormap.js

@@ -4,6 +4,7 @@ const spd850_colormap_data = {     "levels": [20, 21, 22, 23, 24, 25, 26, 27, 28
 const cape_colormap_data = {     "levels": [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400,         1500, 1600, 1700, 1800, 1900, 2000, 2100, 2200, 2300, 2400, 2500, 2600, 2700, 2800, 2900,         3000, 3100, 3200, 3300, 3400, 3500, 3600, 3700, 3800, 3900, 4000, 4100, 4200, 4300, 4400,         4500, 4600, 4700, 4800, 4900, 5000, 5100, 5200, 5300, 5400, 5500, 5600, 5700, 5800, 5900,         6000, 6500, 7000, 7500, 8000, 8500, 9000, 9500, 10000],     "colors": [         "#ffffff", "#f0f0f0", "#e1e1e1", "#d2d2d2", "#c3c3c3", "#a5a5a5", "#969696", "#878787", "#787878", "#696969",         "#37536a", "#436075", "#506d80", "#5c7a8b", "#698796", "#7594a2", "#82a1ad", "#8eaeb8", "#9bbbc3", "#a7c8ce",         "#e9dd96", "#e8d186", "#e7c575", "#e6b865", "#e5ac54", "#e5a044", "#e49433", "#e38723", "#e27b12", "#e16f02",         "#dc4110", "#d33b17", "#ca351e", "#c12e25", "#b8282c", "#af2234", "#a61c3b", "#9d1542", "#940f49", "#8b0950",         "#73088a", "#7e1894", "#8a289f", "#9538a9", "#a148b3", "#ac59be", "#b869c8", "#c379d2", "#cf89dd", "#da99e7",         "#e9bec3", "#e3b0b7", "#dda3ac", "#d795a0", "#d18894", "#ca7a89", "#c46d7d", "#be5f71", "#b85266", "#b2445a",         "#893d48", "#8f4752", "#96525b", "#9c5c65", "#a2676f", "#a97178", "#af7c82", "#b6868b"     ] } 
 const t2m_colormap_data = {     "levels": [-60, -59, -58, -57, -56, -55, -54, -53, -52, -51, -50, -49, -48, -47, -46, -45, -44, -43, -42, -41,         -40, -39, -38, -37, -36, -35, -34, -33, -32, -31, -30, -29, -28, -27, -26, -25, -24, -23, -22, -21,         -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1,         0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,         20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39,         40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59,         60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79,         80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99,         100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119,         120],     "colors": [         "#235877", "#2a5f7c", "#316782", "#396e87", "#40768c", "#477d91", "#4e8497", "#558c9c", "#5d93a1", "#649ba6",         "#6ba2ac", "#72a9b1", "#79b1b6", "#81b8bb", "#88c0c1", "#8fc7c6", "#96cecb", "#9dd6d0", "#a5ddd6", "#ace5db",         "#b3ece0", "#b3ece0", "#b1e7df", "#b0e1dd", "#aedcdc", "#add7da", "#abd2d9", "#aaccd8", "#a8c7d6", "#a7c2d5",         "#a5bcd4", "#a4b7d2", "#a2b2d1", "#9fa7ce", "#9ea2cd", "#9c9dcb", "#9c9dcb", "#9b97ca", "#9992c8", "#988dc7",         "#9688c6", "#9582c4", "#9278c2", "#9073c0", "#8f6dbf", "#8d68bd", "#8c63bc", "#8a5dbb", "#8958b9", "#8753b8",         "#864eb6", "#8448b5", "#8343b4", "#813eb2", "#8038b1", "#7e33b0", "#7d33ae", "#7b29ad", "#7a23ab", "#781eaa",         "#a037af", "#a443b3", "#a74fb7", "#ab5cbb", "#af68bf", "#b374c3", "#b680c7", "#ba8dcc", "#be99d0", "#c1a5d4",         "#c5b1d8", "#c9bddc", "#cdcae0", "#d0d6e4", "#d4e2e8", "#deecf2", "#d1e2ee", "#c5d9ea", "#b8cfe6", "#acc5e3",         "#9fbbdf", "#92b2db", "#86a8d7", "#799ed3", "#6c94cf", "#608bcb", "#5381c7", "#4777c4", "#3a6dc0", "#2d64bc",         "#215ab8", "#1450b4", "#0f4455", "#1c4e5a", "#2a585f", "#376363", "#456d68", "#52776d", "#5f8172", "#6d8c77",         "#7a967c", "#88a080", "#95aa85", "#a3b58a", "#b0bf8f", "#bdc994", "#cbd399", "#d8de9d", "#e6e8a2", "#f3f2a7",         "#f8eea2", "#f0e199", "#e8d591", "#e1c888", "#d9bc80", "#d1af77", "#c9a36f", "#c19666", "#ba8a5e", "#b27d55",         "#aa714d", "#a26444", "#9b583c", "#8b3f2b", "#833222", "#7b261a", "#7b261a", "#741911", "#6c0d09", "#640000",         "#5f0000", "#630507", "#670a0e", "#6c0f15", "#70141c", "#741824", "#781d2b", "#7d2232", "#812739", "#852c40",         "#73372d", "#7a4036", "#80493f", "#875349", "#8e5c52", "#94655b", "#9b6e64", "#a88177", "#af8a80", "#b69389",         "#bd9c92", "#c3a69c", "#caafa5", "#d1b8ae", "#d7c1b7", "#decac0", "#e5d4ca", "#ebddd3", "#f2e6dc", "#e8dfd6",         "#e0d7cf", "#d8d0c8", "#d0c8c0", "#c8c0b9", "#c0b9b2", "#b7b1ab", "#afa9a4", "#a7a29c", "#9f9a95", "#97938e",         "#8f8b87", "#878380", "#7f7c78", "#777471", "#6f6c6a", "#666563", "#5e5d5c", "#565554", "#4e4e4d", "#464646"     ] } 
 const td2m_colormap_data = {     "levels": [-40, -39, -38, -37, -36, -35, -34, -33, -32, -31, -30, -29, -28, -27, -26, -25, -24, -23, -22, -21,         -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1,         0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,         20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39,         40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59,         60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79,         80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90],     "colors": [         "#986d4d", "#966c4c", "#946b4c", "#926a4b", "#90694b", "#8e684a", "#8c664a", "#8a6549", "#886448", "#866348", "#846247",         "#826147", "#806046", "#7e5f46", "#7c5e45", "#7a5d44", "#785b44", "#765a43", "#745943", "#725842", "#715742", "#6f5641",         "#6d5540", "#6b5440", "#69533f", "#67523f", "#65503e", "#634f3d", "#614e3d", "#5f4d3c", "#5d4c3c", "#5b4b3b", "#594a3b",         "#57493a", "#554839", "#534739", "#514538", "#4f4438", "#4d4337", "#4b4237", "#494136", "#4d4334", "#514738", "#564c3c",         "#5a5041", "#5e5545", "#625949", "#675e4d", "#6b6251", "#6f6755", "#746b5a", "#78705e", "#7c7462", "#807966", "#857d6a",         "#89826f", "#8d8673", "#928b77", "#968f7b", "#9a947f", "#9e9883", "#a39d88", "#a7a18c", "#aba690", "#afaa94", "#b8b39c",         "#b8b39c", "#bcb8a1", "#c1bca5", "#c9c5ad", "#c9cab1", "#d2ceb6", "#d2ceb6", "#d6d3ba", "#dfdcc2", "#e3e0c6", "#e7e5ca",         "#ebe9cf", "#f0eed3", "#f4f2d7", "#e6f5e6", "#d7f0d7", "#c8eac8", "#b9e5b9", "#aadfaa", "#9bda9b", "#8cd48c", "#7dcf7d",         "#6ec96e", "#5fc45f", "#30ae30", "#2ca32c", "#279927", "#238e23", "#1e831e", "#1a791a", "#156e15", "#116311", "#0c590c",         "#084e08", "#61a3af", "#5896a0", "#508992", "#477b83", "#3e6e74", "#366166", "#2d5457", "#244648", "#1c393a", "#132c2b",         "#66669a", "#605e94", "#59568e", "#534e88", "#4d4682", "#463e7c", "#403676", "#3a2e70", "#33266a", "#2d1e64", "#724071",         "#784573", "#7d4b75", "#835076", "#885678", "#8e5b7a", "#93617c", "#99667d", "#9e6c7f", "#a47181"     ] } 
+const nws_storm_clear_refl_colormap_data = {     "levels": [         -15, -14.53608247, -14.07216495, -13.60824742, -13.1443299, -12.68041237, -12.21649485, -11.75257732,         -11.28865979, -10.82474227, -10.36082474, -9.89690722, -9.43298969, -8.96907216, -8.50515464, -8.04123711,         -7.57731959, -7.11340206, -6.64948454, -6.18556701, -5.72164948, -5.25773196, -4.79381443, -4.32989691,         -3.86597938, -3.40206186, -2.93814433, -2.4742268, -2.01030928, -1.54639175, -1.08247423, -0.6185567,         -0.15463918, 0.30927835, 0.77319588, 1.2371134, 1.70103093, 2.16494845, 2.62886598, 3.09278351,         3.55670103, 4.02061856, 4.48453608, 4.94845361, 5.41237113, 5.87628866, 6.34020619, 6.80412371,         7.26804124, 7.73195876, 8.19587629, 8.65979381, 9.12371134, 9.58762887, 10.05154639, 10.51546392,         10.97938144, 11.44329897, 11.90721649, 12.37113402, 12.83505155, 13.29896907, 13.7628866, 14.22680412,         14.69072165, 15.15463918, 15.6185567, 16.08247423, 16.54639175, 17.01030928, 17.4742268, 17.93814433,         18.40206186, 18.86597938, 19.32989691, 19.79381443, 20.25773196, 20.72164948, 21.18556701, 21.64948454,         22.11340206, 22.57731959, 23.04123711, 23.50515464, 23.96907216, 24.43298969, 24.89690722, 25.36082474,         25.82474227, 26.28865979, 26.75257732, 27.21649485, 27.68041237, 28.1443299, 28.60824742, 29.07216495,         29.53608247, 30, 30.46391753, 30.92783505, 31.39175258, 31.8556701, 32.31958763, 32.78350515,         33.24742268, 33.71134021, 34.17525773, 34.63917526, 35.10309278, 35.56701031, 36.03092784, 36.49484536,         36.95876289, 37.42268041, 37.88659794, 38.35051546, 38.81443299, 39.27835052, 39.74226804, 40.20618557,         40.67010309, 41.13402062, 41.59793814, 42.06185567, 42.5257732, 42.98969072, 43.45360825, 43.91752577,         44.3814433, 44.84536082, 45.30927835, 45.77319588, 46.2371134, 46.70103093, 47.16494845, 47.62886598,         48.09278351, 48.55670103, 49.02061856, 49.48453608, 49.94845361, 50.41237113, 50.87628866, 51.34020619,         51.80412371, 52.26804124, 52.73195876, 53.19587629, 53.65979381, 54.12371134, 54.58762887, 55.05154639,         55.51546392, 55.97938144, 56.44329897, 56.90721649, 57.37113402, 57.83505155, 58.29896907, 58.7628866,         59.22680412, 59.69072165, 60.15463918, 60.6185567, 61.08247423, 61.54639175, 62.01030928, 62.4742268,         62.93814433, 63.40206186, 63.86597938, 64.32989691, 64.79381443, 65.25773196, 65.72164948, 66.18556701,         66.64948454, 67.11340206, 67.57731959, 68.04123711, 68.50515464, 68.96907216, 69.43298969, 69.89690722,         70.36082474, 70.82474227, 71.28865979, 71.75257732, 72.21649485, 72.68041237, 73.1443299, 73.60824742,         74.07216495, 74.53608247, 75     ],     "colors": [         "#959052", "#979356", "#9c9a60", "#a09c64", "#a3a067", "#a8a570", "#aaa875", "#acac79", "#b1b182", "#b5b587",         "#b6b88c", "#bcbd93", "#bfc199", "#c1c39c", "#c1c39c", "#c6caa5", "#cacdaa", "#cccfaf", "#cfd1b3", "#cccfb3",         "#c8ccb3", "#c6c8b3", "#bfc3b3", "#bfc3b3", "#bcc1b3", "#b8bdb3", "#b5bab3", "#afb5b3", "#acb3b3", "#aaafb3",         "#a7aeb3", "#a3aab3", "#a0a8b3", "#9ca5b3", "#9aa1b3", "#97a0b3", "#939cb3", "#909ab3", "#939ab5", "#8c95b3",         "#8791b1", "#838eb1", "#808caf", "#7c89af", "#7785ae", "#7482ac", "#7080aa", "#6b7caa", "#6275a8", "#5e72a7",         "#5e72a7", "#5b70a5", "#566da3", "#5269a3", "#4f67a1", "#4b64a1", "#4660a0", "#425d9e", "#4260a1", "#4467a5",         "#486eaa", "#4975ae", "#4d7cb1", "#4f83b5", "#508aba", "#5491bf", "#5699c3", "#599ec6", "#5ba5ca", "#5daccf",         "#60b3d4", "#62bad8", "#64c1db", "#67c8df", "#69cfe4", "#6ed6e8", "#67d6d6", "#60d6c4", "#59d6b3", "#52d6a1",         "#4bd690", "#42d67e", "#3bd66d", "#34d65b", "#11d418", "#11d116", "#0fcd16", "#0fc816", "#0fc316", "#0fbf15",         "#0fbc15", "#0fb613", "#0eb313", "#0eaf13", "#0eaa13", "#0ca511", "#0ca111", "#0c9e11", "#0c9911", "#0c950f",         "#0c900f", "#0a8c0f", "#0a870f", "#0a830e", "#0a800e", "#0a7c0c", "#0a770c", "#08720c", "#086e0c", "#086b0a",         "#08660a", "#08620a", "#085d08", "#1c6708", "#317208", "#467c08", "#5b8707", "#6e9107", "#839c05", "#97a805",         "#acb105", "#c1bc05", "#d6c603", "#e9d103", "#ffe200", "#ffd800", "#ffd300", "#ffc800", "#ffc300", "#ffba00",         "#ffb500", "#ffb000", "#ffac00", "#ffa700", "#ff9e00", "#ff9900", "#ff9300", "#ff8900", "#ff8500", "#ff7f00",         "#ff0000", "#f70000", "#f00000", "#e90000", "#e20000", "#db0000", "#d40000", "#cd0000", "#c60000", "#bf0000",         "#b80000", "#b10000", "#aa0000", "#a30000", "#9a0000", "#930000", "#8c0000", "#850000", "#7e0000", "#770000",         "#700000", "#ffffff", "#fff4ff", "#ffe9ff", "#ffdfff", "#ffd4ff", "#ffc8ff", "#ffbdff", "#ffb3ff", "#ffa8ff",         "#ff9cff", "#ff91ff", "#ff75ff", "#fb6bfd", "#f960f9", "#f656f6", "#f24bf4", "#ef3ff0", "#ed36ef", "#e92aeb",         "#e61fe8", "#e416e6", "#e10ae2", "#b100ff", "#ac00fb", "#a300f6", "#9a00f4", "#9300ef", "#8700e9", "#8200e8",         "#7900e2", "#7200dd", "#6900db", "#6200d6"     ] } 
 function isColor(obj) {
     return (typeof obj == 'object') && 'color' in obj && 'opacity' in obj;
 }
@@ -39,8 +40,21 @@ class ColorMap {
      * @returns A new color map
      */
     withOpacity(func) {
-        const new_colors = this.colors.map((c, ic) => { return { 'color': c['color'], 'opacity': func(this.levels[ic], this.levels[ic + 1]) }; });
-        return new ColorMap(this.levels, new_colors);
+        const new_colors = [];
+        const new_levels = [];
+        for (let ic = 0; ic < this.colors.length; ic++) {
+            const color = this.colors[ic];
+            const level_lower = this.levels[ic];
+            const level_upper = this.levels[ic + 1];
+            const new_color = { 'color': color['color'], 'opacity': func(level_lower, level_upper) };
+            if (new_color['opacity'] > 0) {
+                if (new_levels[new_levels.length - 1] != level_lower)
+                    new_levels.push(level_lower);
+                new_levels.push(level_upper);
+                new_colors.push(new_color);
+            }
+        }
+        return new ColorMap(new_levels, new_colors);
     }
     /**
      * Create a diverging color map using two input colors
@@ -95,6 +109,7 @@ const pw_speed850mb = new ColorMap(spd850_colormap_data.levels, spd850_colormap_
 const pw_cape = new ColorMap(cape_colormap_data.levels, cape_colormap_data.colors).withOpacity((levl, levu) => Math.min(levu / 1000., 1.));
 const pw_t2m = new ColorMap(t2m_colormap_data.levels, t2m_colormap_data.colors);
 const pw_td2m = new ColorMap(td2m_colormap_data.levels, td2m_colormap_data.colors);
+const nws_storm_clear_refl = new ColorMap(nws_storm_clear_refl_colormap_data.levels, nws_storm_clear_refl_colormap_data.colors);
 /**
  * Create a diverging red/blue colormap, where red corresponds to the lowest value and blue corresponds to the highest value
  * @param level_min - The lowest value in the color map
@@ -134,4 +149,4 @@ function makeTextureImage(colormap) {
     });
     return cmap_image;
 }
-export { ColorMap, bluered, redblue, pw_speed500mb, pw_speed850mb, pw_cape, pw_t2m, pw_td2m, makeTextureImage };
+export { ColorMap, bluered, redblue, pw_speed500mb, pw_speed850mb, pw_cape, pw_t2m, pw_td2m, nws_storm_clear_refl, makeTextureImage };

package/lib/{ContourFill.d.ts → Fill.d.ts}

@@ -13,7 +13,16 @@ interface ContourFillOptions {
      */
     opacity?: number;
 }
-interface ContourFillGLElems {
+interface RasterOptions {
+    /** The color map to use when creating the raster plot */
+    cmap: ColorMap;
+    /**
+     * The opacity for the raster plot
+     * @default 1
+     */
+    opacity?: number;
+}
+interface PlotComponentFillGLElems {
     program: WGLProgram;
     vertices: WGLBuffer;
     fill_texture: WGLTexture;
@@ -21,13 +30,7 @@ interface ContourFillGLElems {
     cmap_texture: WGLTexture;
     cmap_nonlin_texture: WGLTexture;
 }
-/**
- * A filled contoured field
- * @example
- * // Create a field of filled contours with the provided color map
- * const fill = new ContourFill(wind_speed_field, {cmap: color_map});
- */
-declare class ContourFill extends PlotComponent {
+declare class PlotComponentFill extends PlotComponent {
     readonly field: RawScalarField;
     readonly cmap: ColorMap;
     readonly opacity: number;
@@ -36,7 +39,44 @@ declare class ContourFill extends PlotComponent {
     /** @private */
     readonly index_map: Float32Array;
     /** @private */
-    gl_elems: ContourFillGLElems | null;
+    gl_elems: PlotComponentFillGLElems | null;
+    image_mag_filter: number | null;
+    cmap_mag_filter: number | null;
+    constructor(field: RawScalarField, opts: ContourFillOptions);
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
+    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+}
+/**
+ * A raster (i.e. pixel) plot
+ * @example
+ * // Create a raster plot with the provided color map
+ * const raster = new Raster(wind_speed_field, {cmap: color_map});
+ */
+declare class Raster extends PlotComponentFill {
+    /**
+     * Create a raster plot
+     * @param field - The field to create the raster plot from
+     * @param opts  - Options for creating the raster plot
+     */
+    constructor(field: RawScalarField, opts: RasterOptions);
+    /**
+     * @internal
+     * Add the raster plot to a map
+     */
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
+    /**
+     * @internal
+     * Render the raster plot
+     */
+    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+}
+/**
+ * A filled contoured field
+ * @example
+ * // Create a field of filled contours with the provided color map
+ * const fill = new ContourFill(wind_speed_field, {cmap: color_map});
+ */
+declare class ContourFill extends PlotComponentFill {
     /**
      * Create a filled contoured field
      * @param field - The field to create filled contours from
@@ -54,5 +94,5 @@ declare class ContourFill extends PlotComponent {
      */
     render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
 }
-export default ContourFill;
-export type { ContourFillOptions };
+export { ContourFill, Raster };
+export type { ContourFillOptions, RasterOptions };

package/lib/{ContourFill.js → Fill.js}

@@ -38,18 +38,7 @@ void main() {
     color.a = color.a * u_opacity;
     gl_FragColor = color;
 }`
-/**
- * A filled contoured field
- * &example
- * // Create a field of filled contours with the provided color map
- * const fill = new ContourFill(wind_speed_field, {cmap: color_map});
- */
-class ContourFill extends PlotComponent {
-    /**
-     * Create a filled contoured field
-     * &param field - The field to create filled contours from
-     * &param opts  - Options for creating the filled contours
-     */
+class PlotComponentFill extends PlotComponent {
     constructor(field, opts) {
         super();
         this.field = field;
@@ -75,15 +64,16 @@ class ContourFill extends PlotComponent {
         });
         this.index_map = new Float32Array(inv_cmap_norm);
         this.gl_elems = null;
+        this.image_mag_filter = null;
+        this.cmap_mag_filter = null;
     }
-    /**
-     * &internal
-     * Add the filled contours to a map
-     */
     async onAdd(map, gl) {
         // Basic procedure for the filled contours inspired by https://blog.mbq.me/webgl-weather-globe/
         gl.getExtension('OES_texture_float');
         gl.getExtension('OES_texture_float_linear');
+        if (this.image_mag_filter === null || this.cmap_mag_filter === null) {
+            throw `Implement magnification filtes in a subclass`;
+        }
         const program = new WGLProgram(gl, contourfill_vertex_shader_src, contourfill_fragment_shader_src);
         const { vertices: verts_buf, texcoords: tex_coords_buf } = await this.field.grid.getWGLBuffers(gl);
         const vertices = verts_buf;
@@ -91,10 +81,10 @@ class ContourFill extends PlotComponent {
         const format = isWebGL2Ctx(gl) ? gl.R32F : gl.LUMINANCE;
         const fill_image = { 'format': format, 'type': gl.FLOAT,
             'width': this.field.grid.ni, 'height': this.field.grid.nj, 'image': this.field.data,
-            'mag_filter': gl.LINEAR,
+            'mag_filter': this.image_mag_filter,
         };
         const fill_texture = new WGLTexture(gl, fill_image);
-        const cmap_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': this.cmap_image, 'mag_filter': gl.NEAREST };
+        const cmap_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': this.cmap_image, 'mag_filter': this.cmap_mag_filter };
         const cmap_texture = new WGLTexture(gl, cmap_image);
         const cmap_nonlin_image = { 'format': format, 'type': gl.FLOAT,
             'width': this.index_map.length, 'height': 1,
@@ -107,10 +97,6 @@ class ContourFill extends PlotComponent {
             fill_texture: fill_texture, cmap_texture: cmap_texture, cmap_nonlin_texture: cmap_nonlin_texture,
         };
     }
-    /**
-     * &internal
-     * Render the filled contours
-     */
     render(gl, matrix) {
         if (this.gl_elems === null)
             return;
@@ -122,4 +108,68 @@ class ContourFill extends PlotComponent {
         gl_elems.program.draw();
     }
 }
-export default ContourFill;
+/**
+ * A raster (i.e. pixel) plot
+ * &example
+ * // Create a raster plot with the provided color map
+ * const raster = new Raster(wind_speed_field, {cmap: color_map});
+ */
+class Raster extends PlotComponentFill {
+    /**
+     * Create a raster plot
+     * &param field - The field to create the raster plot from
+     * &param opts  - Options for creating the raster plot
+     */
+    constructor(field, opts) {
+        super(field, opts);
+    }
+    /**
+     * &internal
+     * Add the raster plot to a map
+     */
+    async onAdd(map, gl) {
+        this.image_mag_filter = gl.NEAREST;
+        this.cmap_mag_filter = gl.LINEAR;
+        super.onAdd(map, gl);
+    }
+    /**
+     * &internal
+     * Render the raster plot
+     */
+    render(gl, matrix) {
+        super.render(gl, matrix);
+    }
+}
+/**
+ * A filled contoured field
+ * &example
+ * // Create a field of filled contours with the provided color map
+ * const fill = new ContourFill(wind_speed_field, {cmap: color_map});
+ */
+class ContourFill extends PlotComponentFill {
+    /**
+     * Create a filled contoured field
+     * &param field - The field to create filled contours from
+     * &param opts  - Options for creating the filled contours
+     */
+    constructor(field, opts) {
+        super(field, opts);
+    }
+    /**
+     * &internal
+     * Add the filled contours to a map
+     */
+    async onAdd(map, gl) {
+        this.image_mag_filter = gl.LINEAR;
+        this.cmap_mag_filter = gl.NEAREST;
+        super.onAdd(map, gl);
+    }
+    /**
+     * &internal
+     * Render the filled contours
+     */
+    render(gl, matrix) {
+        super.render(gl, matrix);
+    }
+}
+export { ContourFill, Raster };

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 import { PlotComponent } from "./PlotComponent";
 import Contour, { ContourOptions } from "./Contour";
-import ContourFill, { ContourFillOptions } from "./ContourFill";
+import { ContourFill, Raster, ContourFillOptions, RasterOptions } from "./Fill";
 import Barbs, { BarbsOptions } from "./Barbs";
 import Paintball, { PaintballOptions } from "./Paintball";
 import Hodographs, { HodographOptions } from './Hodographs';
@@ -18,5 +18,6 @@ declare const colormaps: {
     pw_cape: ColorMap;
     pw_t2m: ColorMap;
     pw_td2m: ColorMap;
+    nws_storm_clear_refl: ColorMap;
 };
-export { PlotComponent, Barbs, BarbsOptions, Contour, ContourOptions, ContourFill, ContourFillOptions, Paintball, PaintballOptions, Hodographs, HodographOptions, WindProfile, PlotLayer, MultiPlotLayer, MapType, ColorMap, colormaps, makeColorBar, makePaintballKey, Color, ColorbarOrientation, ColorbarTickDirection, ColorBarOptions, PaintballKeyOptions, RawScalarField, RawVectorField, RawProfileField, Grid, GridType, VectorRelativeTo, RawVectorFieldOptions, PlateCarreeGrid, LambertGrid, WebGLAnyRenderingContext };
+export { PlotComponent, Barbs, BarbsOptions, Contour, ContourOptions, ContourFill, Raster, ContourFillOptions, RasterOptions, Paintball, PaintballOptions, Hodographs, HodographOptions, WindProfile, PlotLayer, MultiPlotLayer, MapType, ColorMap, colormaps, makeColorBar, makePaintballKey, Color, ColorbarOrientation, ColorbarTickDirection, ColorBarOptions, PaintballKeyOptions, RawScalarField, RawVectorField, RawProfileField, Grid, GridType, VectorRelativeTo, RawVectorFieldOptions, PlateCarreeGrid, LambertGrid, WebGLAnyRenderingContext };

package/lib/index.js

@@ -1,11 +1,11 @@
 import { PlotComponent } from "./PlotComponent";
 import Contour from "./Contour";
-import ContourFill from "./ContourFill";
+import { ContourFill, Raster } from "./Fill";
 import Barbs from "./Barbs";
 import Paintball from "./Paintball";
 import Hodographs from './Hodographs';
 import { PlotLayer, MultiPlotLayer } from './PlotLayer';
-import { ColorMap, bluered, redblue, pw_speed500mb, pw_speed850mb, pw_cape, pw_t2m, pw_td2m } from './Colormap';
+import { ColorMap, bluered, redblue, pw_speed500mb, pw_speed850mb, pw_cape, pw_t2m, pw_td2m, nws_storm_clear_refl } from './Colormap';
 import { makeColorBar, makePaintballKey } from "./ColorBar";
 import { RawScalarField, RawVectorField, RawProfileField, Grid, PlateCarreeGrid, LambertGrid } from "./RawField";
 const colormaps = {
@@ -15,6 +15,7 @@ const colormaps = {
     pw_speed850mb: pw_speed850mb,
     pw_cape: pw_cape,
     pw_t2m: pw_t2m,
-    pw_td2m: pw_td2m
+    pw_td2m: pw_td2m,
+    nws_storm_clear_refl: nws_storm_clear_refl,
 };
-export { PlotComponent, Barbs, Contour, ContourFill, Paintball, Hodographs, PlotLayer, MultiPlotLayer, ColorMap, colormaps, makeColorBar, makePaintballKey, RawScalarField, RawVectorField, RawProfileField, Grid, PlateCarreeGrid, LambertGrid };
+export { PlotComponent, Barbs, Contour, ContourFill, Raster, Paintball, Hodographs, PlotLayer, MultiPlotLayer, ColorMap, colormaps, makeColorBar, makePaintballKey, RawScalarField, RawVectorField, RawProfileField, Grid, PlateCarreeGrid, LambertGrid };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "autumnplot-gl",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",