autumnplot-gl 2.0.0-beta.1

package/lib/ColorBar.js

@@ -0,0 +1,183 @@
+;
+const createElement = (tagname, attributes, parent) => {
+    const elem = document.createElementNS('http://www.w3.org/2000/svg', tagname);
+    if (attributes !== undefined) {
+        Object.entries(attributes).forEach(([k, v]) => {
+            elem.setAttribute(k, v.toString());
+        });
+    }
+    if (parent !== undefined) {
+        parent.appendChild(elem);
+    }
+    return elem;
+};
+/**
+ * Make an SVG containing a color bar. The color bar can either be oriented horizontal or vertical, and a label can be provided.
+ * @param colormap - The color map to use
+ * @param opts     - The options for creating the color bar
+ * @returns An SVGElement containing the color bar image.
+ * @example
+ * // Create the color bar
+ * const svg = makeColorBar(color_map, {label: 'Wind Speed (kts)', orientation: 'horizontal',
+ *                                      fontface: 'Trebuchet MS'});
+ *
+ * // Add colorbar to the page
+ * document.getElementById('colorbar-container').appendChild(svg);
+ */
+function makeColorBar(colormap, opts) {
+    const label = opts.label || "";
+    const ticks = opts.ticks || colormap.levels;
+    const orientation = opts.orientation || 'vertical';
+    const fontface = opts.fontface || 'sans-serif';
+    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')) {
+        throw `tick_direction of '${tick_dir} doesn't match an orientation of ${orientation}`;
+    }
+    const getNChar = (n) => {
+        return n.toString().length;
+    };
+    const chars_left = getNChar(ticks[0]);
+    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_cross_pad = 3;
+    const bar_thickness = 10;
+    let height, width, bar_left, bar_top, bar_width, bar_height;
+    if (orientation == 'vertical') {
+        height = bar_long_size;
+        width = bar_cross_size;
+        bar_left = tick_dir == 'left' ? bar_cross_size - bar_cross_pad - bar_thickness : bar_cross_pad;
+        bar_top = bar_long_pad;
+        bar_width = bar_thickness;
+        bar_height = bar_long_size - 2 * bar_long_pad;
+    }
+    else {
+        width = bar_long_size;
+        height = bar_cross_size - 6;
+        bar_left = bar_long_pad;
+        bar_top = tick_dir == 'bottom' ? bar_cross_pad : bar_cross_size - 6 - bar_cross_pad - bar_thickness;
+        bar_height = bar_thickness;
+        bar_width = bar_long_size - 2 * bar_long_pad;
+    }
+    const n_colors = colormap.colors.length;
+    const root = createElement('svg', { width: width, height: height });
+    const gbar = createElement('g', {}, root);
+    let gtickattrs;
+    if (orientation == 'vertical') {
+        gtickattrs = tick_dir == 'left' ? { 'text-anchor': 'end', transform: `translate(${bar_left}, ${bar_top})` } :
+            { transform: `translate(${bar_left + bar_width}, ${bar_top})` };
+    }
+    else {
+        gtickattrs = tick_dir == 'bottom' ? { 'text-anchor': 'middle', transform: `translate(${bar_left}, ${bar_top + bar_height})` } :
+            { 'text-anchor': 'middle', transform: `translate(${bar_left}, ${bar_top})` };
+    }
+    const gticks = createElement('g', gtickattrs, root);
+    colormap.colors.forEach((color, icolor) => {
+        let attrs = {};
+        if (orientation == 'vertical') {
+            attrs = {
+                x: bar_left, y: bar_top + bar_height * (1 - (icolor + 1) / n_colors), width: bar_width, height: bar_height / n_colors
+            };
+        }
+        else {
+            attrs = { x: bar_left + bar_width * icolor / n_colors, y: bar_top, width: bar_width / n_colors, height: bar_height };
+        }
+        createElement('rect', { ...attrs, fill: color.color, opacity: color.opacity }, gbar);
+    });
+    ticks.forEach(level => {
+        const ilevel = colormap.levels.indexOf(level);
+        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);
+        let lineattrs;
+        if (orientation == 'vertical') {
+            lineattrs = tick_dir == 'left' ? { x2: -6 } : { x2: 6 };
+        }
+        else {
+            lineattrs = tick_dir == 'bottom' ? { y2: 6 } : { y2: -6 };
+        }
+        createElement('line', { ...lineattrs, stroke: '#000000', 'stroke-width': 1.5 }, gtick);
+        let textattrs;
+        if (orientation == 'vertical') {
+            textattrs = tick_dir == 'left' ? { x: -9, dy: '0.32em' } : { x: 9, dy: '0.32em' };
+        }
+        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);
+        text.textContent = level.toString();
+    });
+    const outline_attrs = {
+        x: bar_left,
+        y: bar_top,
+        width: bar_width,
+        height: bar_height,
+        stroke: '#000000',
+        'stroke-width': 1.5,
+        fill: 'none'
+    };
+    createElement('rect', outline_attrs, root);
+    let labelattrs;
+    if (orientation == 'vertical') {
+        labelattrs = tick_dir == 'left' ? { transform: `translate(15, ${height / 2}) rotate(-90)` } : { transform: `translate(${width - 6}, ${height / 2}) rotate(-90)` };
+    }
+    else {
+        labelattrs = tick_dir == 'bottom' ? { transform: `translate(${width / 2}, ${height - 5})` } : { transform: `translate(${width / 2}, 15)` };
+    }
+    const label_elem = createElement('text', { ...labelattrs, fill: '#000000', 'text-anchor': 'middle', style: `font-family: ${fontface};` }, root);
+    label_elem.textContent = label;
+    return root;
+}
+/**
+ * Make an SVG containing a color key for a paintball plot. The key can be split over any number of columns.
+ * @param colors - A list of colors
+ * @param labels - The labels corresponding to each color
+ * @param opts   - The options for creating the color key
+ * @returns An SVGElement containing the color bar image.
+ * @example
+ * // Create the color key
+ * const svg = makePaintballKey(colors, labels, {n_cols: 2, fontface: 'Trebuchet MS'});
+ *
+ * // Add the color key to the page
+ * document.getElementById('pb-key-container').appendChild(svg);
+ */
+function makePaintballKey(colors, labels, opts) {
+    if (colors.length != labels.length) {
+        throw `Mismatch between the number of colors (${colors.length}) and the number of labels (${labels.length})`;
+    }
+    opts = opts === undefined ? {} : opts;
+    const n_cols = opts.n_cols === undefined ? 1 : opts.n_cols;
+    const fontface = opts.fontface === undefined ? 'sans-serif' : opts.fontface;
+    let height, width;
+    const swatch_width = 20;
+    const swatch_height = 20;
+    const swatch_text_pad = 3;
+    const swatch_text_space = 100;
+    const swatch_width_pad = 5;
+    const swatch_height_pad = 5;
+    const n_rows = Math.ceil(colors.length / n_cols);
+    width = (swatch_width + swatch_text_pad + swatch_text_space) * n_cols + swatch_width_pad * (n_cols + 1);
+    height = swatch_height * n_rows + swatch_height_pad * (n_rows + 1);
+    const root = createElement('svg', { width: width, height: height });
+    const gbar = createElement('g', {}, root);
+    colors.forEach((color, icolor) => {
+        const label = labels[icolor];
+        const irow = icolor % n_rows;
+        const icol = Math.floor(icolor / n_rows);
+        let opacity = 1.;
+        if (typeof color != 'string') {
+            opacity = color.opacity;
+            color = color.color;
+        }
+        const x = swatch_width_pad + icol * (swatch_width + swatch_text_pad + swatch_text_space + swatch_width_pad);
+        const y = swatch_height_pad + irow * (swatch_height + swatch_height_pad);
+        createElement('rect', { x: x, y: y, fill: color, opacity: opacity, width: swatch_width, height: swatch_height }, gbar);
+        let textattrs = { x: x + swatch_width + swatch_text_pad, y: y + swatch_height / 2, dy: '0.32em' };
+        const text = createElement('text', { ...textattrs, fill: '#000000', style: `font-size: 0.8em; font-family: ${fontface};` }, gbar);
+        text.textContent = label;
+    });
+    return root;
+}
+export { makeColorBar, makePaintballKey };

package/lib/Colormap.d.ts

@@ -0,0 +1,70 @@
+interface Color {
+    /** The color as a hex color string */
+    color: string;
+    /** The opacity as a number from 0 to 1 */
+    opacity: number;
+}
+/** A mapping from values to colors */
+declare class ColorMap {
+    readonly levels: number[];
+    readonly colors: Color[];
+    /**
+     * Create a color map
+     * @param levels - The list of levels. The number of levels should always be one more than the number of colors.
+     * @param colors - A list of colors
+     */
+    constructor(levels: number[], colors: Color[] | string[]);
+    /**
+     * @returns an array of hex color strings
+     */
+    getColors(): string[];
+    /**
+     * @returns an array of opacities, one for each color in the color map
+     */
+    getOpacities(): number[];
+    /**
+     * Make a new color map with different opacities. The opacities are set by func.
+     * @param func - A function which takes the two levels associated with a color (an upper and lower bound) and returns an opacity in the range from 0 to 1.
+     * @returns A new color map
+     */
+    withOpacity(func: (level_lower: number, level_upper: number) => number): ColorMap;
+    /**
+     * Create a diverging color map using two input colors
+     * @param color1    - The color corresponding to the lowest value in the color map
+     * @param color2    - The color corresponding to the highest value in the color map
+     * @param level_min - The lowest value in the color map
+     * @param level_max - The highest value in the color map
+     * @param n_colors  - The number of colors to use
+     * @returns a Colormap object
+     */
+    static diverging(color1: string, color2: string, level_min: number, level_max: number, n_colors: number): ColorMap;
+}
+declare const pw_speed500mb: ColorMap;
+declare const pw_speed850mb: ColorMap;
+declare const pw_cape: ColorMap;
+declare const pw_t2m: ColorMap;
+declare const pw_td2m: 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
+ * @param level_max - The highest value in the color map
+ * @param n_colors  - The number of colors
+ * @returns a Colormap object
+ */
+declare const redblue: (level_min: number, level_max: number, n_colors: number) => ColorMap;
+/**
+ * Create a diverging blue/red colormap, where blue corresponds to the lowest value and red corresponds to the highest value
+ * @param level_min - The lowest value in the color map
+ * @param level_max - The highest value in the color map
+ * @param n_colors  - The number of colors
+ * @returns a Colormap object
+ */
+declare const bluered: (level_min: number, level_max: number, n_colors: number) => ColorMap;
+/**
+ * Make a canvas image corresponding to a color map
+ * @param colormap - The color map to use
+ * @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 type { Color };

package/lib/Colormap.js

@@ -0,0 +1,137 @@
+import { hex2rgb, hsv2rgb, rgb2hex, rgb2hsv } from "./utils";
+const spd500_colormap_data = {     "levels": [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, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140],     "colors": [         "#e6f4ff", "#dbf0fe", "#d1ebfe", "#c6e7fd", "#bce3fd", "#b1dffc", "#a7dbfc", "#9cd6fb", "#92d2fb", "#87cefa", "#84c2f6",         "#81b7f1", "#7eabed", "#7ba0e8", "#7994e4", "#7688df", "#737ddb", "#7071d6", "#6d66d2", "#6a5acd", "#7660cf", "#8366d0",         "#8f6cd2", "#9c72d3", "#a878d5", "#b47ed6", "#c184d8", "#cd8ad9", "#da90db", "#e696dc", "#e390d9", "#e08ad6", "#dd84d3",         "#da7ed0", "#d778cd", "#d472ca", "#d16cc7", "#ce66c4", "#cb60c1", "#c85abe", "#c453ba", "#c04cb6", "#bc45b2", "#b83eae",         "#b437aa", "#b030a6", "#ac29a2", "#a8229e", "#a41b9a", "#a01496", "#a41080", "#a80e75", "#ac0e75", "#b00c6a", "#b4085f",         "#b80649", "#bc043e", "#c00233", "#c80028", "#c80028", "#ca042a", "#cc082c", "#d00c2c", "#d21432", "#d41834", "#d41834",         "#d61c36", "#da243a", "#dc283c", "#de2c3e", "#e03040", "#e23442", "#e43844", "#e63c46", "#e84048", "#ea444a", "#ec484c",         "#ee4c4e", "#f05050", "#f16052", "#f27054", "#f38056", "#f49058", "#f5a05a", "#f6b05c", "#f7c05e", "#f8d060", "#f9e062",         "#faf064", "#f7eb61", "#f4e65e", "#f1e15b", "#eedc58", "#ebd755", "#e8d252", "#e5cd4f", "#e2c84c", "#dfc349", "#dcbe46",         "#d9b943", "#d6b440", "#d3af3d", "#d0aa3a", "#cda537", "#caa034", "#c79b31", "#c4962e", "#c1912b", "#be8c28", "#bb8725",         "#b88222", "#b57d1f", "#b2781c", "#af7319", "#ac6e16", "#a96913", "#a66410", "#a35f0d", "#a05a0a", "#a05a0a"     ] } 
+const spd850_colormap_data = {     "levels": [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],     "colors": [         "#f0f8ff", "#dbf0fe", "#c6e7fd", "#b1dffc", "#9cd6fb", "#87cefa", "#81b7f1", "#7ba0e8", "#7688df",         "#7071d6", "#6a5acd", "#8366d0", "#9c72d3", "#b47ed6", "#cd8ad9", "#e696dc", "#e08ad6", "#da7ed0",         "#d472ca", "#ce66c4", "#c85abe", "#c04cb6", "#b83eae", "#b030a6", "#a8229e", "#a01496", "#a81080",         "#b00c6a", "#b8043e", "#c80028", "#c80028", "#d01030", "#d41834", "#d82038", "#dc283c", "#e03040",         "#e43844", "#e84048", "#ec484c", "#f05050", "#f27054", "#f49058", "#f6b05c", "#f8d060", "#faf064",         "#f4e65e", "#eedc58", "#e8d252", "#e2c84c", "#dcbe46", "#d6b440", "#d0aa3a", "#caa034", "#c4962e",         "#be8c28", "#b88222", "#b2781c", "#ac6e16", "#a66410", "#a05a0a"     ] } 
+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"     ] } 
+function isColor(obj) {
+    return (typeof obj == 'object') && 'color' in obj && 'opacity' in obj;
+}
+/** A mapping from values to colors */
+class ColorMap {
+    /**
+     * Create a color map
+     * @param levels - The list of levels. The number of levels should always be one more than the number of colors.
+     * @param colors - A list of colors
+     */
+    constructor(levels, colors) {
+        if (levels.length != colors.length + 1) {
+            throw `Mismatch between number of levels (${levels.length}) and number of colors (${colors.length}; expected ${levels.length - 1})`;
+        }
+        this.levels = levels;
+        this.colors = colors.map(c => isColor(c) ? c : { 'color': c, 'opacity': 1. });
+    }
+    /**
+     * @returns an array of hex color strings
+     */
+    getColors() {
+        return this.colors.map(s => s['color']);
+    }
+    /**
+     * @returns an array of opacities, one for each color in the color map
+     */
+    getOpacities() {
+        return this.colors.map(s => s['opacity']);
+    }
+    /**
+     * Make a new color map with different opacities. The opacities are set by func.
+     * @param func - A function which takes the two levels associated with a color (an upper and lower bound) and returns an opacity in the range from 0 to 1.
+     * @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);
+    }
+    /**
+     * Create a diverging color map using two input colors
+     * @param color1    - The color corresponding to the lowest value in the color map
+     * @param color2    - The color corresponding to the highest value in the color map
+     * @param level_min - The lowest value in the color map
+     * @param level_max - The highest value in the color map
+     * @param n_colors  - The number of colors to use
+     * @returns a Colormap object
+     */
+    static diverging(color1, color2, level_min, level_max, n_colors) {
+        const stops = [];
+        const levels = [];
+        const level_step = (level_max - level_min) / (n_colors - 1);
+        const crossover = (level_max + level_min) / 2;
+        const crossover_hsv = [0, 0, 0.9];
+        const color1_hsv = rgb2hsv(hex2rgb(color1));
+        const color2_hsv = rgb2hsv(hex2rgb(color2));
+        for (let istop = 0; istop < n_colors; istop++) {
+            const level = level_min + istop * level_step;
+            let h, s, v;
+            let interp_fac;
+            if (level < crossover) {
+                interp_fac = (crossover - level) / (crossover - level_min);
+                [h, s, v] = [
+                    color1_hsv[0],
+                    crossover_hsv[1] + (color1_hsv[1] - crossover_hsv[1]) * interp_fac,
+                    crossover_hsv[2] + (color1_hsv[2] - crossover_hsv[2]) * interp_fac
+                ];
+            }
+            else if (level >= crossover) {
+                interp_fac = (level - crossover) / (level_max - crossover);
+                [h, s, v] = [
+                    color2_hsv[0],
+                    crossover_hsv[1] + (color2_hsv[1] - crossover_hsv[1]) * interp_fac,
+                    crossover_hsv[2] + (color2_hsv[2] - crossover_hsv[2]) * interp_fac
+                ];
+            }
+            const color = rgb2hex(hsv2rgb([h, s, v]));
+            stops.push({ 'color': color, 'opacity': Math.min(2 * interp_fac, 1) });
+        }
+        for (let ilev = 0; ilev <= n_colors; ilev++) {
+            const level_step = (level_max - level_min) / n_colors;
+            levels.push(level_min + ilev * level_step);
+        }
+        return new ColorMap(levels, stops);
+    }
+}
+// Some built-in colormaps
+const pw_speed500mb = new ColorMap(spd500_colormap_data.levels, spd500_colormap_data.colors).withOpacity((levl, levu) => Math.min((levu - 20) / 10, 1.));
+const pw_speed850mb = new ColorMap(spd850_colormap_data.levels, spd850_colormap_data.colors).withOpacity((levl, levu) => Math.min((levu - 20) / 10, 1.));
+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);
+/**
+ * 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
+ * @param level_max - The highest value in the color map
+ * @param n_colors  - The number of colors
+ * @returns a Colormap object
+ */
+const redblue = (level_min, level_max, n_colors) => {
+    return ColorMap.diverging('#ff0000', '#0000ff', level_min, level_max, n_colors);
+};
+/**
+ * Create a diverging blue/red colormap, where blue corresponds to the lowest value and red corresponds to the highest value
+ * @param level_min - The lowest value in the color map
+ * @param level_max - The highest value in the color map
+ * @param n_colors  - The number of colors
+ * @returns a Colormap object
+ */
+const bluered = (level_min, level_max, n_colors) => {
+    return ColorMap.diverging('#0000ff', '#ff0000', level_min, level_max, n_colors);
+};
+/**
+ * Make a canvas image corresponding to a color map
+ * @param colormap - The color map to use
+ * @returns A canvas element containing each color of the color map
+ */
+function makeTextureImage(colormap) {
+    const cmap_image = document.createElement('canvas');
+    cmap_image.width = colormap.colors.length;
+    cmap_image.height = 1;
+    let ctx = cmap_image.getContext('2d');
+    colormap.colors.forEach((stop, istop) => {
+        if (ctx === null) {
+            throw "Could not get rendering context for colormap image canvas";
+        }
+        ctx.fillStyle = stop['color'] + Math.round(stop['opacity'] * 255).toString(16);
+        ctx.fillRect(istop, 0, 1, 1);
+    });
+    return cmap_image;
+}
+export { ColorMap, bluered, redblue, pw_speed500mb, pw_speed850mb, pw_cape, pw_t2m, pw_td2m, makeTextureImage };

package/lib/Contour.d.ts

@@ -0,0 +1,71 @@
+import { WebGLAnyRenderingContext } from './AutumnTypes';
+import { MapType } from './Map';
+import { PlotComponent } from './PlotComponent';
+import { RawScalarField } from './RawField';
+import { WGLBuffer, WGLProgram, WGLTexture } from 'autumn-wgl';
+interface ContourOptions {
+    /**
+     * The color of the contours as a hex color string
+     * @default '#000000'
+     */
+    color?: string;
+    /**
+     * The contour interval for drawing contours at regular intervals
+     * @default 1
+     */
+    interval?: number;
+    /**
+     * A list of arbitrary levels (up to 40) to contour. This overrides the `interval` option.
+     * @default Draw contours at regular intervals given by the `interval` option.
+     */
+    levels?: number[];
+    /**
+     * A function to thin the contours based on zoom level. The function should take a zoom level and return a number `n` that means to only show every
+     * `n`th contour.
+     * @default Don't thin the contours on any zoom level
+     */
+    thinner?: (zoom: number) => number;
+}
+interface ContourGLElems {
+    map: MapType;
+    program: WGLProgram;
+    vertices: WGLBuffer;
+    grid_cell_size: WGLBuffer;
+    fill_texture: WGLTexture;
+    texcoords: WGLBuffer;
+}
+/**
+ * A field of contoured data. The contours can optionally be thinned based on map zoom level.
+ * @example
+ * // Create a contoured height field, with black contours every 30 m (assuming the height field is in
+ * // meters) and only using every other contour when the map zoom level is less than 5.
+ * const contours = new Contour(height_field, {color: '#000000', interval: 30,
+ *                                                  thinner: zoom => zoom < 5 ? 2 : 1});
+ */
+declare class Contour extends PlotComponent {
+    readonly field: RawScalarField;
+    readonly color: [number, number, number];
+    readonly interval: number;
+    readonly levels: number[];
+    readonly thinner: (zoom: number) => number;
+    /** @private */
+    gl_elems: ContourGLElems | null;
+    /**
+     * Create a contoured field
+     * @param field - The field to contour
+     * @param opts  - Options for creating the contours
+     */
+    constructor(field: RawScalarField, opts: ContourOptions);
+    /**
+     * @internal
+     * Add the contours to a map
+     */
+    onAdd(map: MapType, gl: WebGLAnyRenderingContext): Promise<void>;
+    /**
+     * @internal
+     * Render the contours
+     */
+    render(gl: WebGLAnyRenderingContext, matrix: number[]): void;
+}
+export default Contour;
+export type { ContourOptions };

package/lib/Contour.js

@@ -0,0 +1,172 @@
+import { isWebGL2Ctx } from './AutumnTypes';
+import { PlotComponent } from './PlotComponent';
+import { hex2rgba } from './utils';
+import { WGLProgram, WGLTexture } from 'autumn-wgl';
+const contour_vertex_shader_src = `uniform mat4 u_matrix;
+
+attribute vec2 a_pos;
+attribute float a_grid_cell_size;
+attribute vec2 a_tex_coord;
+
+varying highp vec2 v_tex_coord;
+varying highp float v_grid_cell_size;
+varying highp float v_map_scale_fac;
+
+void main() {
+    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);
+    v_tex_coord = a_tex_coord;
+    v_grid_cell_size = a_grid_cell_size;
+
+    
+    highp float lat = 2. * atan(exp(a_pos.y / 6371229.0)) - 3.1414592654 / 2.;
+    v_map_scale_fac = cos(lat);
+}`
+const contour_fragment_shader_src = `#extension GL_OES_standard_derivatives : enable
+#define MAX_N_CONTOURS 40
+
+varying highp vec2 v_tex_coord;
+varying highp float v_grid_cell_size;
+varying highp float v_map_scale_fac;
+
+uniform sampler2D u_fill_sampler;
+uniform highp float u_contour_interval;
+uniform highp float u_contour_levels[MAX_N_CONTOURS];
+uniform int u_num_contours;
+uniform lowp float u_line_cutoff;
+uniform lowp vec3 u_color;
+uniform lowp vec2 u_step_size;
+uniform lowp float u_zoom_fac;
+
+void main() {
+    highp float field_val = texture2D(u_fill_sampler, v_tex_coord).r;
+
+    
+    lowp vec2 ihat = vec2(u_step_size.x, 0.0);
+    lowp vec2 jhat = vec2(0.0, u_step_size.y);
+    highp float fv_xp1 = texture2D(u_fill_sampler, v_tex_coord + ihat).r;
+    highp float fv_xm1 = texture2D(u_fill_sampler, v_tex_coord - ihat).r;
+    highp float fv_yp1 = texture2D(u_fill_sampler, v_tex_coord + jhat).r;
+    highp float fv_ym1 = texture2D(u_fill_sampler, v_tex_coord - jhat).r;
+    highp float fwidth_field = sqrt(((fv_xp1 - fv_xm1) * (fv_xp1 - fv_xm1) + (fv_yp1 - fv_ym1) * (fv_yp1 - fv_ym1)) / (5e5 * v_grid_cell_size));
+
+    
+    lowp float plot_val;
+
+    if (u_num_contours > 0) {
+        highp float min_contour_diff = u_contour_levels[1] - u_contour_levels[0];
+        bool assigned_contour = false;
+        highp float low_contour;
+        highp float high_contour;
+        highp float highest_contour;
+
+        for (int ncnt = 0; ncnt < MAX_N_CONTOURS; ncnt++) {
+            if (ncnt >= u_num_contours) { break; }
+
+            min_contour_diff = min(min_contour_diff, u_contour_levels[ncnt + 1] - u_contour_levels[ncnt]);
+
+            if (u_contour_levels[ncnt] < field_val && field_val < u_contour_levels[ncnt + 1]) {
+                assigned_contour = true;
+
+                low_contour = u_contour_levels[ncnt];
+                high_contour = u_contour_levels[ncnt + 1];
+            }
+
+            highest_contour = u_contour_levels[ncnt];
+        }
+
+        if (!assigned_contour) {
+            if (field_val < u_contour_levels[0]) {
+                plot_val = (u_contour_levels[0] - field_val) / min_contour_diff;
+            }
+            else if (field_val > highest_contour) {
+                plot_val = (field_val - highest_contour) / min_contour_diff;
+            }
+        }
+        else {
+            plot_val = min(field_val - low_contour, high_contour - field_val) / min_contour_diff;
+        }
+    }
+    else {
+        plot_val = fract(field_val / u_contour_interval);
+        if (plot_val > 0.5) plot_val = 1.0 - plot_val;
+    }
+
+    plot_val = plot_val / (max(0.001, fwidth_field / (u_zoom_fac * 0.125)));
+
+    if (plot_val > u_line_cutoff) discard;
+
+    gl_FragColor = vec4(u_color, 1. - (plot_val * plot_val / (u_line_cutoff * u_line_cutoff)));
+}`
+/**
+ * A field of contoured data. The contours can optionally be thinned based on map zoom level.
+ * &example
+ * // Create a contoured height field, with black contours every 30 m (assuming the height field is in
+ * // meters) and only using every other contour when the map zoom level is less than 5.
+ * const contours = new Contour(height_field, {color: '#000000', interval: 30,
+ *                                                  thinner: zoom => zoom < 5 ? 2 : 1});
+ */
+class Contour extends PlotComponent {
+    /**
+     * Create a contoured field
+     * &param field - The field to contour
+     * &param opts  - Options for creating the contours
+     */
+    constructor(field, opts) {
+        super();
+        this.field = field;
+        this.interval = opts.interval || 1;
+        this.levels = opts.levels || [];
+        const color = hex2rgba(opts.color || '#000000');
+        this.color = [color[0], color[1], color[2]];
+        this.thinner = opts.thinner || (() => 1);
+        this.gl_elems = null;
+    }
+    /**
+     * &internal
+     * Add the contours to a map
+     */
+    async onAdd(map, gl) {
+        // Basic procedure for these contours from https://www.shadertoy.com/view/lltBWM
+        gl.getExtension('OES_texture_float');
+        gl.getExtension('OES_texture_float_linear');
+        gl.getExtension('OES_standard_derivatives');
+        const program = new WGLProgram(gl, contour_vertex_shader_src, contour_fragment_shader_src);
+        const { vertices: verts_buf, texcoords: tex_coords_buf, cellsize: cellsize_buf } = await this.field.grid.getWGLBuffers(gl);
+        const vertices = verts_buf;
+        const texcoords = tex_coords_buf;
+        const grid_cell_size = cellsize_buf;
+        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,
+        };
+        const fill_texture = new WGLTexture(gl, fill_image);
+        this.gl_elems = {
+            map: map, program: program, vertices: vertices, texcoords: texcoords, grid_cell_size: grid_cell_size, fill_texture: fill_texture
+        };
+    }
+    /**
+     * &internal
+     * Render the contours
+     */
+    render(gl, matrix) {
+        if (this.gl_elems === null)
+            return;
+        const gl_elems = this.gl_elems;
+        const zoom = gl_elems.map.getZoom();
+        const intv = this.thinner(zoom) * this.interval;
+        const cutoff = 0.5 / intv;
+        const step_size = [0.25 / this.field.grid.ni, 0.25 / this.field.grid.nj];
+        const zoom_fac = Math.pow(2, zoom);
+        let uniforms = { 'u_contour_interval': intv, 'u_line_cutoff': cutoff, 'u_color': this.color, 'u_step_size': step_size, 'u_zoom_fac': zoom_fac,
+            'u_matrix': matrix, 'u_num_contours': 0, 'u_contour_levels': [0] };
+        if (this.levels.length > 0) {
+            uniforms = { ...uniforms, 'u_num_contours': this.levels.length, 'u_contour_levels': this.levels };
+        }
+        gl_elems.program.use({ 'a_pos': gl_elems.vertices, 'a_grid_cell_size': gl_elems.grid_cell_size, 'a_tex_coord': gl_elems.texcoords }, uniforms, { 'u_fill_sampler': gl_elems.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();
+    }
+}
+export default Contour;