@aguacerowx/mapsgl 0.0.57 → 0.0.58

package/src/GridRenderLayer.js

@@ -1,1388 +1,1388 @@
-import proj4 from 'proj4';
-
-const MERCATOR_SAFE_LIMIT = 89;
-
-/** Mapbox GL 3+ uses a WebGL2 context; LUMINANCE is not a valid sized internal format in WebGL2. */
-function isWebGL2Context(gl) {
-    return typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext;
-}
-
-function hrdpsObliqueTransform(rotated_lon, rotated_lat) {
-    const o_lat_p = 53.91148;
-    const o_lon_p = 245.305142;
-    const DEG_TO_RAD = Math.PI / 180.0;
-    const RAD_TO_DEG = 180.0 / Math.PI;
-    const o_lat_p_rad = o_lat_p * DEG_TO_RAD;
-    const rot_lon_rad = rotated_lon * DEG_TO_RAD;
-    const rot_lat_rad = rotated_lat * DEG_TO_RAD;
-    const sin_rot_lat = Math.sin(rot_lat_rad);
-    const cos_rot_lat = Math.cos(rot_lat_rad);
-    const sin_rot_lon = Math.sin(rot_lon_rad);
-    const cos_rot_lon = Math.cos(rot_lon_rad);
-    const sin_o_lat_p = Math.sin(o_lat_p_rad);
-    const cos_o_lat_p = Math.cos(o_lat_p_rad);
-    const sin_lat = cos_o_lat_p * sin_rot_lat + sin_o_lat_p * cos_rot_lat * cos_rot_lon;
-    let lat = Math.asin(sin_lat) * RAD_TO_DEG;
-    const sin_lon_num = cos_rot_lat * sin_rot_lon;
-    const sin_lon_den = -sin_o_lat_p * sin_rot_lat + cos_o_lat_p * cos_rot_lat * cos_rot_lon;
-    let lon = Math.atan2(sin_lon_num, sin_lon_den) * RAD_TO_DEG + o_lon_p;
-    if (lon > 180) lon -= 360;
-    else if (lon < -180) lon += 360;
-    return [lon, lat];
-}
-
-export class GridRenderLayer {
-    /**
-     * @param {string | { layerId?: string, id?: string }} idOrOpts - Mapbox custom layer id, or `{ layerId }` / `{ id }` (RN / prop passthrough parity).
-     */
-    constructor(idOrOpts) {
-        let id;
-        if (typeof idOrOpts === 'string') {
-            id = idOrOpts;
-        } else if (idOrOpts != null && typeof idOrOpts === 'object') {
-            id = idOrOpts.layerId ?? idOrOpts.id;
-        } else {
-            id = idOrOpts;
-        }
-        this.id = id;
-        this.type = 'custom';
-        this.renderingMode = '2d';
-        this.map = null;
-        this.gl = null;
-        this.program = null;
-        this.opacity = 1;
-        this.dataRange = [0, 1];
-        this.vertexBuffer = null;
-        this.indexBuffer = null;
-        this.indexCount = 0;
-        this.dataTexture = null;
-        this.colormapTexture = null;
-        this.encoding = null;
-        this.textureWidth = 0;
-        this.textureHeight = 0;
-        this.cachedCorners = null;
-        this.cachedGridDef = null;
-        this.scaleType = 'linear'; 
-        this.currentConversion = {
-            type: 0 
-        };
-        this.dataTextureArray = null; // NEW: Will hold all timesteps
-        this.currentTimestep = 0; // NEW: Which layer to display
-        this.timestepCount = 0;
-        this.noSmoothing = false;
-        this.currentVariable = '';
-        this.u_is_ptype = null;
-        this.isMRMS = false;
-    }
-
-    setIsMRMS(isMRMS) {
-        this.isMRMS = isMRMS;
-    }
-
-    setVariable(variable) {
-        this.currentVariable = variable;
-    }
-
-    setSmoothing(noSmoothing) {
-        this.noSmoothing = noSmoothing;
-
-        // Exit if the WebGL context or the data texture aren't available yet.
-        if (!this.gl || !this.dataTexture) {
-            return;
-        }
-
-        const gl = this.gl;
-        // Determine the correct filtering mode based on the smoothing flag.
-        const filter = noSmoothing ? gl.NEAREST : gl.LINEAR;
-
-        // Bind the specific texture we want to modify.
-        gl.bindTexture(gl.TEXTURE_2D, this.dataTexture);
-
-        // Update the filtering parameters for how the texture is rendered when scaled down or up.
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
-
-        // Unbind the texture as a good practice to avoid accidental changes.
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        
-        // The u_no_smoothing uniform is still passed to the shader to control
-        // the alpha feathering logic at the edges of the data grid.
-
-        // Trigger a map repaint to apply the visual change immediately.
-        if (this.map) {
-            this.map.triggerRepaint();
-        }
-    }
-
-    /**
-     * Safely get MercatorCoordinate from lng/lat with proper fallbacks
-     * @param {number} lon - Longitude
-     * @param {number} lat - Latitude
-     * @returns {object} Mercator coordinate with x, y properties
-     */
-    getMercatorCoordinate(lon, lat) {
-        // Try to use the map's transform MercatorCoordinate first
-        if (this.map && this.map.transform && this.map.transform.MercatorCoordinate) {
-            try {
-                return this.map.transform.MercatorCoordinate.fromLngLat({ lon, lat });
-            } catch (e) {
-                // fall through to manual projection
-            }
-        }
-
-        // Fallback to imported mapboxgl MercatorCoordinate
-        if (mapboxgl && mapboxgl.MercatorCoordinate) {
-            try {
-                return mapboxgl.MercatorCoordinate.fromLngLat([lon, lat]);
-            } catch (e) {
-                // fall through to manual projection
-            }
-        }
-        
-        // Final fallback: manual calculation
-        // This is the Web Mercator projection formula
-        const x = (lon + 180) / 360;
-        const latRad = lat * Math.PI / 180;
-        const y = (1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2;
-        
-        return { x, y };
-    }
-
-    onAdd(map, gl) {
-        this.map = map;
-        this.gl = gl;
-
-        const vertexSource = `
-            attribute vec2 a_position;
-            attribute vec2 a_texCoord;
-            uniform mat4 u_matrix;
-            varying vec2 v_texCoord;
-            void main() {
-                gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);
-                v_texCoord = a_texCoord;
-            }`;
-
-        const fragmentSource = `
-            precision highp float;
-            varying vec2 v_texCoord;
-
-            uniform sampler2D u_data_texture;
-            uniform sampler2D u_colormap_texture;
-
-            uniform vec2 u_texture_size;
-            uniform bool u_no_smoothing;
-
-            uniform float u_scale;
-            uniform float u_offset;
-            uniform float u_missing_quantized;
-            uniform int u_scale_type;
-
-            uniform float u_opacity;
-            uniform vec2 u_data_range;
-            uniform int u_conversion_type;
-
-            uniform bool u_is_ptype;
-            uniform bool u_is_mrms;
-
-            // --- HELPER FUNCTIONS ---
-            float dequantize_val(float q_val) {
-                if (abs(q_val - u_missing_quantized) < 0.5) {
-                    return -9999.0;
-                }
-                float intermediate = q_val * u_scale + u_offset;
-                if (u_scale_type == 1) {
-                    return intermediate * abs(intermediate);
-                }
-                return intermediate;
-            }
-
-            float get_ptype_from_physical(float val) {
-                if (val < 0.0) return -1.0;
-
-                if (val < 100.0) return 0.0;
-                if (val < 200.0) return 1.0;
-                if (val < 300.0) return 2.0;
-                if (val < 400.0) return 3.0;
-                return -1.0;
-            }
-
-            float get_value(vec2 coord) {
-                float value_0_to_255 = texture2D(u_data_texture, coord).r * 255.0;
-                float val = value_0_to_255 - 128.0;
-                if (abs(val - u_missing_quantized) < 0.5) {
-                    return 99999.0;
-                }
-                return val;
-            }
-
-            float convert_units(float raw_value) {
-                if (u_conversion_type == 1) return raw_value;
-                if (u_conversion_type == 2) return raw_value * 1.8 + 32.0;
-                return raw_value;
-            }
-
-            void main() {
-                float raw_value;
-
-                if (u_no_smoothing) {
-                    float quantized_value = get_value(v_texCoord);
-                    if (quantized_value >= 99999.0) discard;
-                    raw_value = dequantize_val(quantized_value);
-                } else {
-                    vec2 texel_size = 1.0 / u_texture_size;
-                    vec2 tex_coord_in_texels = v_texCoord * u_texture_size;
-                    vec2 bl_texel_index = floor(tex_coord_in_texels - 0.5);
-                    vec2 f = fract(tex_coord_in_texels - 0.5);
-                    vec2 v00_coord = (bl_texel_index + vec2(0.5, 0.5)) * texel_size;
-                    vec2 v10_coord = (bl_texel_index + vec2(1.5, 0.5)) * texel_size;
-                    vec2 v01_coord = (bl_texel_index + vec2(0.5, 1.5)) * texel_size;
-                    vec2 v11_coord = (bl_texel_index + vec2(1.5, 1.5)) * texel_size;
-
-                    if (u_is_ptype) {
-                        float v00 = dequantize_val(get_value(v00_coord));
-                        float v10 = dequantize_val(get_value(v10_coord));
-                        float v01 = dequantize_val(get_value(v01_coord));
-                        float v11 = dequantize_val(get_value(v11_coord));
-
-                        float p00 = get_ptype_from_physical(v00);
-                        float p10 = get_ptype_from_physical(v10);
-                        float p01 = get_ptype_from_physical(v01);
-                        float p11 = get_ptype_from_physical(v11);
-                        
-                        // Count unique valid precipitation types - no array initialization in GLSL ES 1.0
-                        bool has_type_0 = false;
-                        bool has_type_1 = false;
-                        bool has_type_2 = false;
-                        bool has_type_3 = false;
-                        int valid_count = 0;
-                        
-                        if (p00 >= 0.0) { 
-                            int type = int(p00);
-                            if (type == 0) has_type_0 = true;
-                            else if (type == 1) has_type_1 = true;
-                            else if (type == 2) has_type_2 = true;
-                            else if (type == 3) has_type_3 = true;
-                            valid_count++; 
-                        }
-                        if (p10 >= 0.0) { 
-                            int type = int(p10);
-                            if (type == 0) has_type_0 = true;
-                            else if (type == 1) has_type_1 = true;
-                            else if (type == 2) has_type_2 = true;
-                            else if (type == 3) has_type_3 = true;
-                            valid_count++; 
-                        }
-                        if (p01 >= 0.0) { 
-                            int type = int(p01);
-                            if (type == 0) has_type_0 = true;
-                            else if (type == 1) has_type_1 = true;
-                            else if (type == 2) has_type_2 = true;
-                            else if (type == 3) has_type_3 = true;
-                            valid_count++; 
-                        }
-                        if (p11 >= 0.0) { 
-                            int type = int(p11);
-                            if (type == 0) has_type_0 = true;
-                            else if (type == 1) has_type_1 = true;
-                            else if (type == 2) has_type_2 = true;
-                            else if (type == 3) has_type_3 = true;
-                            valid_count++; 
-                        }
-                        
-                        if (valid_count == 0) discard;
-                        
-                        // Count unique types
-                        int unique_types = 0;
-                        if (has_type_0) unique_types++;
-                        if (has_type_1) unique_types++;
-                        if (has_type_2) unique_types++;
-                        if (has_type_3) unique_types++;
-                        
-                        if (unique_types == 1) {
-                            // ALL SAME TYPE - smooth interpolation
-                            float total_value = 0.0;
-                            float total_weight = 0.0;
-                            
-                            if (p00 >= 0.0) {
-                                float weight = (1.0 - f.x) * (1.0 - f.y);
-                                total_value += v00 * weight;
-                                total_weight += weight;
-                            }
-                            if (p10 >= 0.0) {
-                                float weight = f.x * (1.0 - f.y);
-                                total_value += v10 * weight;
-                                total_weight += weight;
-                            }
-                            if (p01 >= 0.0) {
-                                float weight = (1.0 - f.x) * f.y;
-                                total_value += v01 * weight;
-                                total_weight += weight;
-                            }
-                            if (p11 >= 0.0) {
-                                float weight = f.x * f.y;
-                                total_value += v11 * weight;
-                                total_weight += weight;
-                            }
-                            
-                            if (total_weight <= 0.0) discard;
-                            raw_value = total_value / total_weight;
-                            
-                        } else {
-                            // MULTIPLE TYPES - weighted voting
-                            float type_weight_0 = 0.0;
-                            float type_weight_1 = 0.0;
-                            float type_weight_2 = 0.0;
-                            float type_weight_3 = 0.0;
-                            
-                            if (p00 >= 0.0) {
-                                float w = (1.0 - f.x) * (1.0 - f.y);
-                                int type = int(p00);
-                                if (type == 0) type_weight_0 += w;
-                                else if (type == 1) type_weight_1 += w;
-                                else if (type == 2) type_weight_2 += w;
-                                else if (type == 3) type_weight_3 += w;
-                            }
-                            if (p10 >= 0.0) {
-                                float w = f.x * (1.0 - f.y);
-                                int type = int(p10);
-                                if (type == 0) type_weight_0 += w;
-                                else if (type == 1) type_weight_1 += w;
-                                else if (type == 2) type_weight_2 += w;
-                                else if (type == 3) type_weight_3 += w;
-                            }
-                            if (p01 >= 0.0) {
-                                float w = (1.0 - f.x) * f.y;
-                                int type = int(p01);
-                                if (type == 0) type_weight_0 += w;
-                                else if (type == 1) type_weight_1 += w;
-                                else if (type == 2) type_weight_2 += w;
-                                else if (type == 3) type_weight_3 += w;
-                            }
-                            if (p11 >= 0.0) {
-                                float w = f.x * f.y;
-                                int type = int(p11);
-                                if (type == 0) type_weight_0 += w;
-                                else if (type == 1) type_weight_1 += w;
-                                else if (type == 2) type_weight_2 += w;
-                                else if (type == 3) type_weight_3 += w;
-                            }
-                            
-                            // Find winning type
-                            float max_type_weight = 0.0;
-                            float winning_type = -1.0;
-                            if (type_weight_0 > max_type_weight) { max_type_weight = type_weight_0; winning_type = 0.0; }
-                            if (type_weight_1 > max_type_weight) { max_type_weight = type_weight_1; winning_type = 1.0; }
-                            if (type_weight_2 > max_type_weight) { max_type_weight = type_weight_2; winning_type = 2.0; }
-                            if (type_weight_3 > max_type_weight) { max_type_weight = type_weight_3; winning_type = 3.0; }
-                            
-                            if (winning_type == -1.0) discard;
-                            
-                            // Interpolate only winning type
-                            float total_value = 0.0;
-                            float total_weight = 0.0;
-                            
-                            if (p00 == winning_type) {
-                                float weight = (1.0 - f.x) * (1.0 - f.y);
-                                total_value += v00 * weight;
-                                total_weight += weight;
-                            }
-                            if (p10 == winning_type) {
-                                float weight = f.x * (1.0 - f.y);
-                                total_value += v10 * weight;
-                                total_weight += weight;
-                            }
-                            if (p01 == winning_type) {
-                                float weight = (1.0 - f.x) * f.y;
-                                total_value += v01 * weight;
-                                total_weight += weight;
-                            }
-                            if (p11 == winning_type) {
-                                float weight = f.x * f.y;
-                                total_value += v11 * weight;
-                                total_weight += weight;
-                            }
-                            
-                            if (total_weight <= 0.0) discard;
-                            raw_value = total_value / total_weight;
-                        }
-                    } else {
-                        float v00 = get_value(v00_coord);
-                        float v10 = get_value(v10_coord);
-                        float v01 = get_value(v01_coord);
-                        float v11 = get_value(v11_coord);
-                        float total_value = 0.0;
-                        float total_weight = 0.0;
-                        if (v00 < 99999.0) { float w = (1.0-f.x)*(1.0-f.y); total_value+=v00*w; total_weight+=w; }
-                        if (v10 < 99999.0) { float w = f.x*(1.0-f.y); total_value+=v10*w; total_weight+=w; }
-                        if (v01 < 99999.0) { float w = (1.0-f.x)*f.y; total_value+=v01*w; total_weight+=w; }
-                        if (v11 < 99999.0) { float w = f.x*f.y; total_value+=v11*w; total_weight+=w; }
-                        if (total_weight <= 0.0) discard;
-                        raw_value = dequantize_val(total_value / total_weight);
-                    }
-                }
-
-                float converted_value = convert_units(raw_value);
-
-                // Compare against u_data_range in the same unit space as the colormap (after unit conversion).
-                if (converted_value < u_data_range.x) {
-                    discard;
-                }
-                
-                float colormap_coord = clamp((converted_value - u_data_range.x) / (u_data_range.y - u_data_range.x), 0.0, 1.0);
-                
-                vec4 color = texture2D(u_colormap_texture, vec2(colormap_coord, 0.5));
-                
-                if (color.a < 0.1) {
-                    discard;
-                }
-                
-                float final_alpha = color.a * u_opacity;
-
-                gl_FragColor = vec4(color.rgb * final_alpha, final_alpha);
-            }`;
-
-        const vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, vertexSource); gl.compileShader(vertexShader);
-        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fragmentSource); gl.compileShader(fragmentShader);
-        
-        this.program = gl.createProgram(); gl.attachShader(this.program, vertexShader); gl.attachShader(this.program, fragmentShader); gl.linkProgram(this.program);
-        
-        this.a_position = gl.getAttribLocation(this.program, "a_position");
-        this.a_texCoord = gl.getAttribLocation(this.program, "a_texCoord");
-        this.u_matrix = gl.getUniformLocation(this.program, "u_matrix");
-        this.u_data_texture = gl.getUniformLocation(this.program, "u_data_texture");
-        this.u_colormap_texture = gl.getUniformLocation(this.program, "u_colormap_texture");
-        this.u_opacity = gl.getUniformLocation(this.program, "u_opacity");
-        this.u_data_range = gl.getUniformLocation(this.program, "u_data_range");
-        this.u_scale = gl.getUniformLocation(this.program, "u_scale");
-        this.u_offset = gl.getUniformLocation(this.program, "u_offset");
-        this.u_missing_quantized = gl.getUniformLocation(this.program, "u_missing_quantized");
-        this.u_texture_size = gl.getUniformLocation(this.program, "u_texture_size");
-        this.u_conversion_type = gl.getUniformLocation(this.program, "u_conversion_type");
-        this.u_scale_type = gl.getUniformLocation(this.program, "u_scale_type");
-        this.u_no_smoothing = gl.getUniformLocation(this.program, "u_no_smoothing");
-        this.u_is_ptype = gl.getUniformLocation(this.program, "u_is_ptype");
-        this.u_is_mrms = gl.getUniformLocation(this.program, "u_is_mrms"); // NEW
-
-        this.vertexBuffer = gl.createBuffer();
-        this.indexBuffer = gl.createBuffer();
-        this.dataTexture = gl.createTexture();
-        this.colormapTexture = gl.createTexture();
-        
-        // Restore geometry if it exists from a previous initialization
-        if (this.cachedCorners && this.cachedGridDef) {
-            this.updateGeometry(this.cachedCorners, this.cachedGridDef);
-        }
-    }
-
-    /**
-     * Upload quantized grid bytes (Uint8, centered at 128) to the active 2D texture.
-     * WebGL2: R8 + RED + UNSIGNED_BYTE (LUMINANCE is invalid). WebGL1: LUMINANCE.
-     */
-    _uploadQuantizedGridTexture(tex, nx, ny, dataArray) {
-        const gl = this.gl;
-        gl.bindTexture(gl.TEXTURE_2D, tex);
-        gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
-        if (isWebGL2Context(gl)) {
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, nx, ny, 0, gl.RED, gl.UNSIGNED_BYTE, dataArray);
-        } else {
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, nx, ny, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, dataArray);
-        }
-    }
-
-    /**
-     * After updateDataTexture, register the same GPU texture under timeKey so the slider can
-     * switch back without re-fetching (avoids duplicating VRAM).
-     */
-    registerCurrentDataTextureAsPreloaded(timeKey) {
-        if (!this.gl || !this.dataTexture || this.encoding == null) {
-            return;
-        }
-        if (!this.preloadedTextures) this.preloadedTextures = new Map();
-        if (this.preloadedTextures.has(timeKey)) return;
-        this.preloadedTextures.set(timeKey, {
-            tex: this.dataTexture,
-            encoding: this.encoding,
-            nx: this.textureWidth,
-            ny: this.textureHeight
-        });
-    }
-
-    // Call this during preload to store a pre-uploaded GPU texture
-    storePreloadedTexture(timeKey, data, encoding, nx, ny) {
-        if (!this.gl) return;
-        const gl = this.gl;
-
-        const tex = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, tex);
-
-        let dataArray = data instanceof Uint8Array ? data
-            : data.buffer instanceof ArrayBuffer ? new Uint8Array(data.buffer, data.byteOffset, data.byteLength)
-            : new Uint8Array(data);
-
-        this._uploadQuantizedGridTexture(tex, nx, ny, dataArray);
-
-        const filter = this.noSmoothing ? gl.NEAREST : gl.LINEAR;
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-
-        if (!this.preloadedTextures) this.preloadedTextures = new Map();
-        if (this.preloadedTextures.has(timeKey)) {
-            const prev = this.preloadedTextures.get(timeKey);
-            if (prev.tex && prev.tex !== this.dataTexture) {
-                gl.deleteTexture(prev.tex);
-            }
-        }
-        this.preloadedTextures.set(timeKey, { tex, encoding, nx, ny });
-    }
-
-    // O(1) frame switch — just swaps which texture is active
-    switchToPreloadedTexture(timeKey) {
-        if (!this.preloadedTextures || !this.preloadedTextures.has(timeKey)) return false;
-        const { tex, encoding, nx, ny } = this.preloadedTextures.get(timeKey);
-        this.dataTexture = tex;
-        this.encoding = encoding;
-        this.scaleType = encoding.scale_type || 'linear';
-        this.textureWidth = nx;
-        this.textureHeight = ny;
-        return true;
-    }
-
-    updateGeometry(corners, gridDef) {
-
-        // Cache the geometry
-        this.cachedCorners = corners;
-        this.cachedGridDef = gridDef;
-        if (!this.gl || !this.vertexBuffer) return;
-        const gl = this.gl;
-
-        const subdivisions = 120; 
-        
-        // Validate input corners
-        const coordValues = [corners.lon_tl, corners.lat_tl, corners.lon_tr, corners.lat_tr, 
-                             corners.lon_bl, corners.lat_bl, corners.lon_br, corners.lat_br];
-        
-        if (coordValues.some(coord => !isFinite(coord))) {
-                        return;
-        }
-        
-        const gridType = gridDef.type;
-        
-        if (gridType === 'latlon') {
-            const vertices = [];
-            const indices = [];
-            
-            // Check if this is a flipped grid
-            const isFlippedGrid = corners.lat_tl < corners.lat_bl;
-
-            const isIconEUType = gridDef.grid_params && 
-                            gridDef.grid_params.lon_first === 336.5 && 
-                            Math.abs(gridDef.grid_params.lat_first) === 29.5;
-
-            const isIconD2Type = gridDef.grid_params && 
-                            gridDef.grid_params.lon_first === 356.06 && 
-                            Math.abs(gridDef.grid_params.lat_first) === 43.18;
-            // Detect grid type
-            const isGFSType = gridDef.grid_params && 
-                            gridDef.grid_params.lon_first === 0.0 && 
-                            Math.abs(gridDef.grid_params.lat_first) === 90.0;
-            
-            const isECMWFType = gridDef.grid_params && 
-                            gridDef.grid_params.lon_first === 180.0 && 
-                            gridDef.grid_params.lat_first === 90.0;
-
-            const isGEMType = gridDef.grid_params && 
-                            gridDef.grid_params.lon_first === 180.0 && 
-                            gridDef.grid_params.lat_first === -90.0 &&
-                            gridDef.grid_params.lon_last === 179.85;
-
-            // Apply longitude shift for different models
-            let adjustedCorners = corners;
-            if (isGFSType) {
-                adjustedCorners = {
-                    lon_tl: corners.lon_tl - 180,
-                    lat_tl: corners.lat_tl,
-                    lon_tr: corners.lon_tr - 180,
-                    lat_tr: corners.lat_tr,
-                    lon_bl: corners.lon_bl - 180,
-                    lat_bl: corners.lat_bl,
-                    lon_br: corners.lon_br - 180,
-                    lat_br: corners.lat_br
-                };
-                
-                Object.keys(adjustedCorners).forEach(key => {
-                    if (key.startsWith('lon_') && adjustedCorners[key] < -180) {
-                        adjustedCorners[key] += 360;
-                    }
-                });
-            } else if (isECMWFType) {
-                adjustedCorners = {
-                    lon_tl: corners.lon_tl >= 180 ? corners.lon_tl - 360 : corners.lon_tl,
-                    lat_tl: corners.lat_tl,
-                    lon_tr: corners.lon_tr >= 180 ? corners.lon_tr - 360 : corners.lon_tr,
-                    lat_tr: corners.lat_tr,
-                    lon_bl: corners.lon_bl >= 180 ? corners.lon_bl - 360 : corners.lon_bl,
-                    lat_bl: corners.lat_bl,
-                    lon_br: corners.lon_br >= 180 ? corners.lon_br - 360 : corners.lon_br,
-                    lat_br: corners.lat_br
-                };
-            } else if (isGEMType) {
-                adjustedCorners = corners;
-            }
-        
-            const lonSpan = Math.abs(adjustedCorners.lon_tr - adjustedCorners.lon_tl);
-            const isGlobalGrid = lonSpan >= 359 || isGEMType; 
-
-            if (isGlobalGrid) {
-                const totalWidth = subdivisions * 3;
-                
-                for (let row = 0; row <= subdivisions; row++) {
-                    for (let col = 0; col <= totalWidth; col++) {
-                        const tex_u = (col / subdivisions) - 1.0;
-                        
-                        let tex_v;
-                        if (isGEMType) {
-                            // FIX: Invert the V texture coordinate.
-                            // The GEM data starts at the South Pole, so the texture's V coordinate
-                            // needs to be flipped to match the geometry's top-to-bottom generation.
-                            tex_v = 1.0 - (row / subdivisions); 
-                        } else {
-                            tex_v = isFlippedGrid ? (1.0 - row / subdivisions) : (row / subdivisions);
-                        }
-                    
-                        
-                        // Map to world longitude coordinates
-                        let worldLonStart, worldLonEnd;
-                        
-                        if (isGEMType) {
-                            // NEW: For GEM, don't shift the longitude range - use it as-is
-                            // GEM goes from 180° to 179.85°, which should map to -180° to 179.85°
-                            worldLonStart = adjustedCorners.lon_tl - 360; // This will be -180
-                            worldLonEnd = adjustedCorners.lon_tr + 360;   // This will be ~539.85
-                        } else {
-                            worldLonStart = adjustedCorners.lon_tl - 360;
-                            worldLonEnd = adjustedCorners.lon_tr + 360;
-                        }
-                        
-                        const worldLonRange = worldLonEnd - worldLonStart;
-                        const worldLon = worldLonStart + (col / totalWidth) * worldLonRange;
-                        
-                        const t_lat = row / subdivisions;
-                        const worldLat = adjustedCorners.lat_tl + t_lat * (adjustedCorners.lat_bl - adjustedCorners.lat_tl);
-                                                
-                        if (!isFinite(worldLon) || !isFinite(worldLat)) {
-                            continue;
-                        }
-
-                        const mercator = this.getMercatorCoordinate(worldLon, worldLat);
-                        if (!isFinite(mercator.x) || !isFinite(mercator.y)) {
-                            continue;
-                        }
-                        
-                        vertices.push(mercator.x, mercator.y, tex_u, tex_v);
-                    }
-                }
-                
-                // Generate indices for the extended grid
-                const verticesPerRow = totalWidth + 1;
-                for (let row = 0; row < subdivisions; row++) {
-                    for (let col = 0; col < totalWidth; col++) {
-                        const topLeft = row * verticesPerRow + col;
-                        const topRight = topLeft + 1;
-                        const bottomLeft = (row + 1) * verticesPerRow + col;
-                        const bottomRight = bottomLeft + 1;
-                        
-                        // Make sure all vertices exist
-                        if (bottomRight < vertices.length / 4) {
-                            indices.push(topLeft, bottomLeft, topRight);
-                            indices.push(topRight, bottomLeft, bottomRight);
-                        }
-                    }
-                }
-                
-            } else {
-                // Regional grid handling
-                const adjustedCoordValues = [adjustedCorners.lon_tl, adjustedCorners.lat_tl, 
-                                        adjustedCorners.lon_tr, adjustedCorners.lat_tr, 
-                                        adjustedCorners.lon_bl, adjustedCorners.lat_bl, 
-                                        adjustedCorners.lon_br, adjustedCorners.lat_br];
-                
-                if (adjustedCoordValues.some(coord => !isFinite(coord))) {
-                                        return;
-                }
-                
-                // Additional validation: check if latitudes are in valid range
-                const latValues = [adjustedCorners.lat_tl, adjustedCorners.lat_tr, adjustedCorners.lat_bl, adjustedCorners.lat_br];
-                if (latValues.some(lat => lat < -90 || lat > 90)) {
-                                                                                return;
-                }
-                
-                // Calculate longitude span to handle wrapping
-                const lonSpan = Math.abs(adjustedCorners.lon_tr - adjustedCorners.lon_tl);
-                const crossesDateline = lonSpan > 180;
-                
-                // NEW: Track texture coordinate ranges
-                let minTexU = Infinity, maxTexU = -Infinity;
-                let minTexV = Infinity, maxTexV = -Infinity;
-                
-                for (let row = 0; row <= subdivisions; row++) {
-                    for (let col = 0; col <= subdivisions; col++) {
-                        const t_x = col / subdivisions;
-                        const t_y = row / subdivisions;
-                        
-                        // UPDATED: Texture coordinate calculation with ICON model fix
-                        let tex_u = t_x;
-                        let tex_v;
-
-                        if (isFlippedGrid && !isIconD2Type && !isIconEUType) {
-                            tex_v = (1.0 - t_y);
-                        } else {
-                            tex_v = t_y;
-                        }
-                        
-                        // NEW: Track ranges
-                        minTexU = Math.min(minTexU, tex_u);
-                        maxTexU = Math.max(maxTexU, tex_u);
-                        minTexV = Math.min(minTexV, tex_v);
-                        maxTexV = Math.max(maxTexV, tex_v);
-                        
-                        // Calculate interpolated coordinates
-                        let lon, lat;
-                        
-                        if (crossesDateline) {
-                            // Handle dateline crossing with proper interpolation
-                            let lon_tl = adjustedCorners.lon_tl;
-                            let lon_tr = adjustedCorners.lon_tr;
-                            let lon_bl = adjustedCorners.lon_bl;
-                            let lon_br = adjustedCorners.lon_br;
-                            
-                            // Adjust for dateline crossing
-                            if (lon_tr < lon_tl) lon_tr += 360;
-                            if (lon_br < lon_bl) lon_br += 360;
-                            
-                            // Bilinear interpolation
-                            lon = (1 - t_y) * ((1 - t_x) * lon_tl + t_x * lon_tr) +
-                                t_y * ((1 - t_x) * lon_bl + t_x * lon_br);
-                                
-                            // Normalize back to [-180, 180]
-                            while (lon > 180) lon -= 360;
-                            while (lon < -180) lon += 360;
-                        } else {
-                            // Standard bilinear interpolation
-                            lon = (1 - t_y) * ((1 - t_x) * adjustedCorners.lon_tl + t_x * adjustedCorners.lon_tr) +
-                                t_y * ((1 - t_x) * adjustedCorners.lon_bl + t_x * adjustedCorners.lon_br);
-                        }
-                        
-                        lat = (1 - t_y) * ((1 - t_x) * adjustedCorners.lat_tl + t_x * adjustedCorners.lat_tr) +
-                            t_y * ((1 - t_x) * adjustedCorners.lat_bl + t_x * adjustedCorners.lat_br);
-
-                        lat = Math.max(-MERCATOR_SAFE_LIMIT, Math.min(MERCATOR_SAFE_LIMIT, lat));
-
-                        // Validate coordinates
-                        if (!isFinite(lon) || !isFinite(lat)) {
-                                                                                    continue;
-                        }
-
-                        // Normalize longitude to [-180, 180] range
-                        let normalizedLon = lon;
-                        while (normalizedLon > 180) normalizedLon -= 360;
-                        while (normalizedLon < -180) normalizedLon += 360;
-
-                        const mercator = this.getMercatorCoordinate(normalizedLon, lat);
-                        
-                        if (!isFinite(mercator.x) || !isFinite(mercator.y)) {
-                                                        continue;
-                        }
-                        
-                        vertices.push(mercator.x, mercator.y, tex_u, tex_v);
-                    }
-                }
-                
-                // Generate indices (unchanged)
-                for (let row = 0; row < subdivisions; row++) {
-                    for (let col = 0; col < subdivisions; col++) {
-                        const topLeft = row * (subdivisions + 1) + col;
-                        const topRight = topLeft + 1;
-                        const bottomLeft = (row + 1) * (subdivisions + 1) + col;
-                        const bottomRight = bottomLeft + 1;
-                        
-                        indices.push(topLeft, bottomLeft, topRight);
-                        indices.push(topRight, bottomLeft, bottomRight);
-                    }
-                }
-            }
-
-            const vertexData = new Float32Array(vertices);
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-            gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
-            
-            if (!this.indexBuffer) {
-                this.indexBuffer = gl.createBuffer();
-            }
-            
-            const indexData = new Uint16Array(indices);
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
-            
-            this.indexCount = indices.length;
-            this.vertexCount = vertices.length / 4;
-        } else if (gridType === 'rotated_latlon') {
-            const projParams = gridDef.proj_params;
-            const vertices = [];
-            const indices = [];
-            
-            // Get grid bounds in rotated coordinates
-            const { lon_first, lat_first, dx_degrees, dy_degrees, nx, ny } = gridDef.grid_params;
-            const rot_lon_min = lon_first;
-            const rot_lat_max = lat_first;
-            const rot_lon_max = lon_first + (nx - 1) * dx_degrees;
-            const rot_lat_min = lat_first + (ny - 1) * dy_degrees;
-
-            
-            // Test corner transformations to verify positioning
-            const corners = [
-                [rot_lon_min, rot_lat_max], // Top-left
-                [rot_lon_max, rot_lat_max], // Top-right  
-                [rot_lon_min, rot_lat_min], // Bottom-left
-                [rot_lon_max, rot_lat_min]  // Bottom-right
-            ];
-            
-            // Use manual oblique transformation for HRDPS
-            for (let row = 0; row <= subdivisions; row++) {
-                for (let col = 0; col <= subdivisions; col++) {
-                    const t_x = col / subdivisions;
-                    const t_y = row / subdivisions;
-                    
-                    // Interpolate in rotated coordinate space
-                    const rot_lon = rot_lon_min + t_x * (rot_lon_max - rot_lon_min);
-                    const rot_lat = rot_lat_max + t_y * (rot_lat_min - rot_lat_max);
-                    
-                    try {
-                        // Use manual oblique transformation
-                        const [lon, lat] = hrdpsObliqueTransform(rot_lon, rot_lat);
-                        
-                        if (!isFinite(lon) || !isFinite(lat)) {
-                                                        continue;
-                        }
-                        
-                        const clampedLat = Math.max(-MERCATOR_SAFE_LIMIT, Math.min(MERCATOR_SAFE_LIMIT, lat));
-                        
-                        const mercator = this.getMercatorCoordinate(lon, clampedLat);
-                        
-                        if (!isFinite(mercator.x) || !isFinite(mercator.y)) {
-                                                        continue;
-                        }
-                        
-                        // Texture coordinates - corrected for HRDPS orientation
-                        const tex_u = t_x;
-                        const tex_v = 1.0 - t_y;  // Flipped for correct orientation
-                        
-                        vertices.push(mercator.x, mercator.y, tex_u, tex_v);
-                        
-                    } catch (error) {
-                                                continue;
-                    }
-                }
-            }
-            
-            // Generate indices (same for both HRDPS and other rotated models)
-            for (let row = 0; row < subdivisions; row++) {
-                for (let col = 0; col < subdivisions; col++) {
-                    const topLeft = row * (subdivisions + 1) + col;
-                    const topRight = topLeft + 1;
-                    const bottomLeft = (row + 1) * (subdivisions + 1) + col;
-                    const bottomRight = bottomLeft + 1;
-                    
-                    // Only add triangles if we have enough vertices
-                    if (bottomRight < vertices.length / 4) {
-                        indices.push(topLeft, bottomLeft, topRight);
-                        indices.push(topRight, bottomLeft, bottomRight);
-                    }
-                }
-            }
-            
-            const vertexData = new Float32Array(vertices);
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-            gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
-            
-            if (!this.indexBuffer) {
-                this.indexBuffer = gl.createBuffer();
-            }
-            
-            const indexData = new Uint16Array(indices);
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
-            
-            this.indexCount = indices.length;
-            this.vertexCount = vertices.length / 4;
-
-        } else if (gridType === 'polar_stereographic') {
-            const projParams = gridDef.proj_params;
-            let projectionString = `+proj=${projParams.proj}`;
-            Object.keys(projParams).forEach(key => {
-                if (key !== 'proj') {
-                    projectionString += ` +${key}=${projParams[key]}`;
-                }
-            });
-            projectionString += ' +lat_0=90 +no_defs';
-            
-            const wgs84 = 'EPSG:4326';
-            
-            const { nx, ny, dx, dy, x_origin, y_origin } = gridDef.grid_params;
-            
-            const x_min = x_origin;
-            const x_max = x_origin + (nx - 1) * dx;
-            const y_max = y_origin;
-            const y_min = y_origin + (ny - 1) * dy;
-
-            const vertices = [];
-            const indices = [];
-            const vertexGrid = [];
-            
-            let validVertexCount = 0;
-
-            // *** FIX: Declare lastLon outside the loops for continuous unwrapping ***
-            let lastLon = NaN; 
-            
-            // First pass: generate valid vertices
-            for (let row = 0; row <= subdivisions; row++) {
-                vertexGrid[row] = [];
-                // The line "let lastLon = NaN;" has been removed from here.
-
-                for (let col = 0; col <= subdivisions; col++) {
-                    const t_x = col / subdivisions;
-                    const t_y = row / subdivisions;
-                    
-                    const proj_x = x_min + t_x * (x_max - x_min);
-                    const proj_y = y_max + t_y * (y_min - y_max);
-                    
-                    try {
-                        const [lon_raw, lat] = proj4(projectionString, wgs84, [proj_x, proj_y]);
-                        
-                        if (!isFinite(lon_raw) || !isFinite(lat)) {
-                            vertexGrid[row][col] = null;
-                            // Do not reset lastLon; just skip this point
-                            continue;
-                        }
-
-                        if (lon_raw > 0) {
-                                                        vertexGrid[row][col] = null;
-                            continue;
-                        }
-                        
-                        let lon = lon_raw;
-
-                        // Unwrap longitude to create a continuous mesh.
-                        // This logic now works correctly across rows.
-                        if (!isNaN(lastLon)) {
-                            while (lon - lastLon > 180) { lon -= 360; }
-                            while (lastLon - lon > 180) { lon += 360; }
-                        }
-                        lastLon = lon; // Update lastLon for the next vertex
-                        
-                        const clampedLat = Math.max(-MERCATOR_SAFE_LIMIT, Math.min(MERCATOR_SAFE_LIMIT, lat));
-                        
-                        const mercator = this.getMercatorCoordinate(lon, clampedLat);
-                        
-                        if (!isFinite(mercator.x) || !isFinite(mercator.y)) {
-                            vertexGrid[row][col] = null;
-                            continue;
-                        }
-                        
-                        const tex_u = t_x;
-                        const tex_v = t_y;
-                        
-                        vertexGrid[row][col] = {
-                            mercator_x: mercator.x,
-                            mercator_y: mercator.y,
-                            tex_u: tex_u,
-                            tex_v: tex_v,
-                            vertexIndex: validVertexCount
-                        };
-                        
-                        vertices.push(mercator.x, mercator.y, tex_u, tex_v);
-                        validVertexCount++;
-                        
-                    } catch (error) {
-                        vertexGrid[row][col] = null;
-                        continue;
-                    }
-                }
-            }
-
-            if (vertices.length === 0) {
-                                return;
-            }
-            
-            // Second pass: generate indices (this logic remains the same)
-            for (let row = 0; row < subdivisions; row++) {
-                for (let col = 0; col < subdivisions; col++) {
-                    const topLeft = vertexGrid[row][col];
-                    const topRight = vertexGrid[row][col + 1];
-                    const bottomLeft = vertexGrid[row + 1][col];
-                    const bottomRight = vertexGrid[row + 1][col + 1];
-                    
-                    if (topLeft && topRight && bottomLeft && bottomRight) {
-                        indices.push(
-                            topLeft.vertexIndex, 
-                            bottomLeft.vertexIndex, 
-                            topRight.vertexIndex
-                        );
-                        indices.push(
-                            topRight.vertexIndex, 
-                            bottomLeft.vertexIndex, 
-                            bottomRight.vertexIndex
-                        );
-                    }
-                }
-            }
-            
-            // (Final buffer data setup remains the same)
-            const vertexData = new Float32Array(vertices);
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-            gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
-            
-            if (!this.indexBuffer) {
-                this.indexBuffer = gl.createBuffer();
-            }
-            
-            const indexData = new Uint16Array(indices);
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
-            
-            this.indexCount = indices.length;
-            this.vertexCount = vertices.length / 4;
-
-        } else if (gridType === 'lambert_conformal_conic') {
-            const projParams = gridDef.proj_params;
-            let projectionString = `+proj=${projParams.proj}`;
-            Object.keys(projParams).forEach(key => {
-                if (key !== 'proj') {
-                    projectionString += ` +${key}=${projParams[key]}`;
-                }
-            });
-            projectionString += ' +no_defs';
-            
-            const wgs84 = 'EPSG:4326';
-            
-            const { nx, ny, dx, dy, x_origin, y_origin } = gridDef.grid_params;
-            
-            // Calculate grid bounds in projected coordinates
-            const x_min = x_origin;
-            const y_max = y_origin;
-            const x_max = x_origin + (nx - 1) * dx;
-            const y_min = y_origin + (ny - 1) * dy;
-
-            const vertices = [];
-            const indices = [];
-            
-            // Track valid bounds
-            let validMinLon = Infinity, validMaxLon = -Infinity;
-            let validMinLat = Infinity, validMaxLat = -Infinity;
-            let validVertexCount = 0;
-            
-            // Create a sparse vertex array to handle gaps in valid projections
-            const vertexGrid = [];
-            const subdivisionsPlusOne = subdivisions + 1;
-            
-            // Initialize vertex grid
-            for (let row = 0; row <= subdivisions; row++) {
-                vertexGrid[row] = [];
-            }
-            
-            // First pass: generate valid vertices and store their grid positions
-            for (let row = 0; row <= subdivisions; row++) {
-                for (let col = 0; col <= subdivisions; col++) {
-                    const t_x = col / subdivisions;
-                    const t_y = row / subdivisions;
-                    
-                    const proj_x = x_min + t_x * (x_max - x_min);
-                    const proj_y = y_max + t_y * (y_min - y_max);
-                    
-                    try {
-                        const [lon, lat] = proj4(projectionString, wgs84, [proj_x, proj_y]);
-
-                        if (lon > 0) {
-                                                        vertexGrid[row][col] = null;
-                            continue;
-                        }
-                        
-                        // Track valid bounds
-                        validMinLon = Math.min(validMinLon, lon);
-                        validMaxLon = Math.max(validMaxLon, lon);
-                        validMinLat = Math.min(validMinLat, lat);
-                        validMaxLat = Math.max(validMaxLat, lat);
-                        
-                        const mercator = this.getMercatorCoordinate(lon, lat);
-                        
-                        if (!isFinite(mercator.x) || !isFinite(mercator.y)) {
-                            vertexGrid[row][col] = null;
-                            continue;
-                        }
-                        
-                        const tex_u = t_x;
-                        const tex_v = t_y;
-                        
-                        // Store vertex info in grid
-                        vertexGrid[row][col] = {
-                            mercator_x: mercator.x,
-                            mercator_y: mercator.y,
-                            tex_u: tex_u,
-                            tex_v: tex_v,
-                            vertexIndex: validVertexCount
-                        };
-                        
-                        vertices.push(mercator.x, mercator.y, tex_u, tex_v);
-                        validVertexCount++;
-                        
-                    } catch (error) {
-                                                vertexGrid[row][col] = null;
-                        continue;
-                    }
-                }
-            }
-
-            if (vertices.length === 0) {
-                                return;
-            }
-            
-            // Second pass: generate indices only for quads where all 4 vertices are valid
-            for (let row = 0; row < subdivisions; row++) {
-                for (let col = 0; col < subdivisions; col++) {
-                    const topLeft = vertexGrid[row][col];
-                    const topRight = vertexGrid[row][col + 1];
-                    const bottomLeft = vertexGrid[row + 1][col];
-                    const bottomRight = vertexGrid[row + 1][col + 1];
-                    
-                    // Only create triangles if all 4 vertices are valid
-                    if (topLeft && topRight && bottomLeft && bottomRight) {
-                        // Create two triangles for the quad
-                        indices.push(
-                            topLeft.vertexIndex, 
-                            bottomLeft.vertexIndex, 
-                            topRight.vertexIndex
-                        );
-                        indices.push(
-                            topRight.vertexIndex, 
-                            bottomLeft.vertexIndex, 
-                            bottomRight.vertexIndex
-                        );
-                    }
-                }
-            }
-            
-            // Check for potential dateline issues and log them
-            if (validMaxLon - validMinLon > 180) {
-                            }
-            
-            const vertexData = new Float32Array(vertices);
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-            gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
-            
-            if (!this.indexBuffer) {
-                this.indexBuffer = gl.createBuffer();
-            }
-            
-            const indexData = new Uint16Array(indices);
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
-            
-            this.indexCount = indices.length;
-            this.vertexCount = vertices.length / 4;
-
-        } else {
-                        return;
-        }
-    }
-
-    updateDataTexture(data, encoding, nx, ny) {
-        if (!this.gl || !data) {
-            return;
-        }
-        
-        const gl = this.gl;
-        
-        // Store encoding and dimensions
-        this.encoding = encoding;
-        this.scaleType = encoding.scale_type || 'linear';
-        this.textureWidth = nx;
-        this.textureHeight = ny;
-        
-        // DELETE any existing texture before creating a new one
-        if (this.dataTexture) {
-            gl.deleteTexture(this.dataTexture);
-            this.dataTexture = null;
-        }
-        
-        // Check if data length is 0 or insufficient
-        const expectedSize = nx * ny;
-
-        if (data.length === 0 || data.length < expectedSize) {
-            return;
-        }
-
-        // Ensure we have a proper Uint8Array
-        let dataArray;
-        if (data instanceof Uint8Array) {
-            dataArray = data;
-        } else if (data.buffer instanceof ArrayBuffer) {
-            dataArray = new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
-        } else {
-            dataArray = new Uint8Array(data);
-        }
-
-        // Create fresh texture with actual data
-        this.dataTexture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, this.dataTexture);
-
-        this._uploadQuantizedGridTexture(this.dataTexture, nx, ny, dataArray);
-        
-        // Set texture parameters
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-    }
-    
-    updateColormapTexture(colormap) {
-        if (!this.gl) return;
-        const gl = this.gl;
-        const width = 256; const data = new Uint8Array(width * 4);
-        const stops = colormap.reduce((acc, _, i) => (i % 2 === 0 ? [...acc, { value: colormap[i], color: colormap[i + 1] }] : acc), []);
-        if (stops.length === 0) return;
-        const minVal = stops[0].value; const maxVal = stops[stops.length - 1].value;
-        const hexToRgb = hex => [parseInt(hex.slice(1, 3), 16), parseInt(hex.slice(3, 5), 16), parseInt(hex.slice(5, 7), 16)];
-        for (let i = 0; i < width; i++) {
-            const val = minVal + (i / (width - 1)) * (maxVal - minVal);
-            let lower = stops[0], upper = stops[stops.length-1];
-            for (let j=0; j<stops.length - 1; j++) { if (val >= stops[j].value && val <= stops[j+1].value) { lower=stops[j]; upper=stops[j+1]; break; } }
-            const t = (val - lower.value) / (upper.value - lower.value || 1);
-            const rgb = hexToRgb(lower.color).map((c, idx) => c * (1 - t) + hexToRgb(upper.color)[idx] * t);
-            data.set(rgb, i * 4); data[i * 4 + 3] = 255;
-        }
-
-        // Delete and recreate to avoid stale texture state
-        if (this.colormapTexture) {
-            gl.deleteTexture(this.colormapTexture);
-        }
-        this.colormapTexture = gl.createTexture();
-
-        gl.activeTexture(gl.TEXTURE1); // <-- explicitly use TEXTURE1
-        gl.bindTexture(gl.TEXTURE_2D, this.colormapTexture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        gl.activeTexture(gl.TEXTURE0); // reset active unit
-    }
-
-    updateStyle({ opacity, dataRange }) {
-        if (opacity !== undefined) this.opacity = opacity;
-        if (dataRange !== undefined) this.dataRange = dataRange;
-    }
-    
-    setUnitConversion(fromUnit, targetSystem) {
-        let conversionType = 0; // Default: no conversion
-        
-        // Clean the unit string by removing brackets and extra content
-        const cleanUnit = (fromUnit || '')
-            .toLowerCase()
-            .replace(/\[.*?\]/g, '') // Remove anything in brackets like [QPF]
-            .trim();
-        
-        // Check if it's a temperature unit (contains 'c' or 'f' as standalone or with degree symbol)
-        const isTempUnit = /\b[cf]\b|°[cf]|celsius|fahrenheit/.test(cleanUnit);
-        
-        if (isTempUnit) {
-            if (targetSystem === 'metric') conversionType = 1; // to C (no-op)
-            else if (targetSystem === 'imperial') conversionType = 2; // to F
-        }
-        
-        this.currentConversion.type = conversionType;
-        if (this.map) this.map.triggerRepaint();
-    }
-
-    render(gl, matrix) {
-        if (!this.dataTexture || !this.encoding) {
-            return;
-        }
-        if (!this.colormapTexture) {
-            return;
-        }
-        if (!this.program || !this.vertexBuffer || !this.indexBuffer) {
-            return;
-        }
-        gl.useProgram(this.program);
-
-        if (this.u_is_ptype) {
-            const isPtype = this.currentVariable === 'ptypeRefl' || this.currentVariable === 'ptypeRate';
-            gl.uniform1i(this.u_is_ptype, isPtype ? 1 : 0);
-        }
-        
-        if (this.u_is_mrms) {
-            gl.uniform1i(this.u_is_mrms, this.isMRMS ? 1 : 0); // NEW
-        }
-
-        gl.uniformMatrix4fv(this.u_matrix, false, matrix);
-        gl.uniform1f(this.u_opacity, this.opacity);
-        gl.uniform2f(this.u_data_range, this.dataRange[0], this.dataRange[1]);
-        gl.uniform1f(this.u_scale, this.encoding.scale);
-        gl.uniform1f(this.u_offset, this.encoding.offset);
-        gl.uniform1f(this.u_missing_quantized, this.encoding.missing_quantized || 127);
-        gl.uniform2f(this.u_texture_size, this.textureWidth, this.textureHeight); 
-        gl.uniform1i(this.u_scale_type, this.scaleType === 'sqrt' ? 1 : 0);
-        gl.uniform1i(this.u_conversion_type, this.currentConversion.type);
-        gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, this.dataTexture); gl.uniform1i(this.u_data_texture, 0);
-        gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, this.colormapTexture); gl.uniform1i(this.u_colormap_texture, 1);
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-        gl.enableVertexAttribArray(this.a_position); gl.vertexAttribPointer(this.a_position, 2, gl.FLOAT, false, 16, 0);
-        gl.enableVertexAttribArray(this.a_texCoord); gl.vertexAttribPointer(this.a_texCoord, 2, gl.FLOAT, false, 16, 8);
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-        gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-        gl.uniform1i(this.u_no_smoothing, this.noSmoothing);
-        gl.drawElements(gl.TRIANGLES, this.indexCount, gl.UNSIGNED_SHORT, 0);
-    }
-    
-    onRemove() {
-        if (!this.gl) return;
-        const gl = this.gl;
-
-        if (this.program) {
-            gl.deleteProgram(this.program);
-            this.program = null;
-        }
-        if (this.vertexBuffer) {
-            gl.deleteBuffer(this.vertexBuffer);
-            this.vertexBuffer = null;
-        }
-        if (this.indexBuffer) {
-            gl.deleteBuffer(this.indexBuffer);
-            this.indexBuffer = null;
-        }
-
-        const gridTextures = new Set();
-        if (this.dataTexture) gridTextures.add(this.dataTexture);
-        if (this.preloadedTextures) {
-            for (const { tex } of this.preloadedTextures.values()) {
-                if (tex) gridTextures.add(tex);
-            }
-            this.preloadedTextures.clear();
-        }
-        for (const tex of gridTextures) {
-            gl.deleteTexture(tex);
-        }
-        this.dataTexture = null;
-
-        if (this.colormapTexture) {
-            gl.deleteTexture(this.colormapTexture);
-            this.colormapTexture = null;
-        }
-
-        this.map = null;
-        this.gl = null;
-    }
+import proj4 from 'proj4';
+
+const MERCATOR_SAFE_LIMIT = 89;
+
+/** Mapbox GL 3+ uses a WebGL2 context; LUMINANCE is not a valid sized internal format in WebGL2. */
+function isWebGL2Context(gl) {
+    return typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext;
+}
+
+function hrdpsObliqueTransform(rotated_lon, rotated_lat) {
+    const o_lat_p = 53.91148;
+    const o_lon_p = 245.305142;
+    const DEG_TO_RAD = Math.PI / 180.0;
+    const RAD_TO_DEG = 180.0 / Math.PI;
+    const o_lat_p_rad = o_lat_p * DEG_TO_RAD;
+    const rot_lon_rad = rotated_lon * DEG_TO_RAD;
+    const rot_lat_rad = rotated_lat * DEG_TO_RAD;
+    const sin_rot_lat = Math.sin(rot_lat_rad);
+    const cos_rot_lat = Math.cos(rot_lat_rad);
+    const sin_rot_lon = Math.sin(rot_lon_rad);
+    const cos_rot_lon = Math.cos(rot_lon_rad);
+    const sin_o_lat_p = Math.sin(o_lat_p_rad);
+    const cos_o_lat_p = Math.cos(o_lat_p_rad);
+    const sin_lat = cos_o_lat_p * sin_rot_lat + sin_o_lat_p * cos_rot_lat * cos_rot_lon;
+    let lat = Math.asin(sin_lat) * RAD_TO_DEG;
+    const sin_lon_num = cos_rot_lat * sin_rot_lon;
+    const sin_lon_den = -sin_o_lat_p * sin_rot_lat + cos_o_lat_p * cos_rot_lat * cos_rot_lon;
+    let lon = Math.atan2(sin_lon_num, sin_lon_den) * RAD_TO_DEG + o_lon_p;
+    if (lon > 180) lon -= 360;
+    else if (lon < -180) lon += 360;
+    return [lon, lat];
+}
+
+export class GridRenderLayer {
+    /**
+     * @param {string | { layerId?: string, id?: string }} idOrOpts - Mapbox custom layer id, or `{ layerId }` / `{ id }` (RN / prop passthrough parity).
+     */
+    constructor(idOrOpts) {
+        let id;
+        if (typeof idOrOpts === 'string') {
+            id = idOrOpts;
+        } else if (idOrOpts != null && typeof idOrOpts === 'object') {
+            id = idOrOpts.layerId ?? idOrOpts.id;
+        } else {
+            id = idOrOpts;
+        }
+        this.id = id;
+        this.type = 'custom';
+        this.renderingMode = '2d';
+        this.map = null;
+        this.gl = null;
+        this.program = null;
+        this.opacity = 1;
+        this.dataRange = [0, 1];
+        this.vertexBuffer = null;
+        this.indexBuffer = null;
+        this.indexCount = 0;
+        this.dataTexture = null;
+        this.colormapTexture = null;
+        this.encoding = null;
+        this.textureWidth = 0;
+        this.textureHeight = 0;
+        this.cachedCorners = null;
+        this.cachedGridDef = null;
+        this.scaleType = 'linear'; 
+        this.currentConversion = {
+            type: 0 
+        };
+        this.dataTextureArray = null; // NEW: Will hold all timesteps
+        this.currentTimestep = 0; // NEW: Which layer to display
+        this.timestepCount = 0;
+        this.noSmoothing = false;
+        this.currentVariable = '';
+        this.u_is_ptype = null;
+        this.isMRMS = false;
+    }
+
+    setIsMRMS(isMRMS) {
+        this.isMRMS = isMRMS;
+    }
+
+    setVariable(variable) {
+        this.currentVariable = variable;
+    }
+
+    setSmoothing(noSmoothing) {
+        this.noSmoothing = noSmoothing;
+
+        // Exit if the WebGL context or the data texture aren't available yet.
+        if (!this.gl || !this.dataTexture) {
+            return;
+        }
+
+        const gl = this.gl;
+        // Determine the correct filtering mode based on the smoothing flag.
+        const filter = noSmoothing ? gl.NEAREST : gl.LINEAR;
+
+        // Bind the specific texture we want to modify.
+        gl.bindTexture(gl.TEXTURE_2D, this.dataTexture);
+
+        // Update the filtering parameters for how the texture is rendered when scaled down or up.
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+
+        // Unbind the texture as a good practice to avoid accidental changes.
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        
+        // The u_no_smoothing uniform is still passed to the shader to control
+        // the alpha feathering logic at the edges of the data grid.
+
+        // Trigger a map repaint to apply the visual change immediately.
+        if (this.map) {
+            this.map.triggerRepaint();
+        }
+    }
+
+    /**
+     * Safely get MercatorCoordinate from lng/lat with proper fallbacks
+     * @param {number} lon - Longitude
+     * @param {number} lat - Latitude
+     * @returns {object} Mercator coordinate with x, y properties
+     */
+    getMercatorCoordinate(lon, lat) {
+        // Try to use the map's transform MercatorCoordinate first
+        if (this.map && this.map.transform && this.map.transform.MercatorCoordinate) {
+            try {
+                return this.map.transform.MercatorCoordinate.fromLngLat({ lon, lat });
+            } catch (e) {
+                // fall through to manual projection
+            }
+        }
+
+        // Fallback to imported mapboxgl MercatorCoordinate
+        if (mapboxgl && mapboxgl.MercatorCoordinate) {
+            try {
+                return mapboxgl.MercatorCoordinate.fromLngLat([lon, lat]);
+            } catch (e) {
+                // fall through to manual projection
+            }
+        }
+        
+        // Final fallback: manual calculation
+        // This is the Web Mercator projection formula
+        const x = (lon + 180) / 360;
+        const latRad = lat * Math.PI / 180;
+        const y = (1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2;
+        
+        return { x, y };
+    }
+
+    onAdd(map, gl) {
+        this.map = map;
+        this.gl = gl;
+
+        const vertexSource = `
+            attribute vec2 a_position;
+            attribute vec2 a_texCoord;
+            uniform mat4 u_matrix;
+            varying vec2 v_texCoord;
+            void main() {
+                gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);
+                v_texCoord = a_texCoord;
+            }`;
+
+        const fragmentSource = `
+            precision highp float;
+            varying vec2 v_texCoord;
+
+            uniform sampler2D u_data_texture;
+            uniform sampler2D u_colormap_texture;
+
+            uniform vec2 u_texture_size;
+            uniform bool u_no_smoothing;
+
+            uniform float u_scale;
+            uniform float u_offset;
+            uniform float u_missing_quantized;
+            uniform int u_scale_type;
+
+            uniform float u_opacity;
+            uniform vec2 u_data_range;
+            uniform int u_conversion_type;
+
+            uniform bool u_is_ptype;
+            uniform bool u_is_mrms;
+
+            // --- HELPER FUNCTIONS ---
+            float dequantize_val(float q_val) {
+                if (abs(q_val - u_missing_quantized) < 0.5) {
+                    return -9999.0;
+                }
+                float intermediate = q_val * u_scale + u_offset;
+                if (u_scale_type == 1) {
+                    return intermediate * abs(intermediate);
+                }
+                return intermediate;
+            }
+
+            float get_ptype_from_physical(float val) {
+                if (val < 0.0) return -1.0;
+
+                if (val < 100.0) return 0.0;
+                if (val < 200.0) return 1.0;
+                if (val < 300.0) return 2.0;
+                if (val < 400.0) return 3.0;
+                return -1.0;
+            }
+
+            float get_value(vec2 coord) {
+                float value_0_to_255 = texture2D(u_data_texture, coord).r * 255.0;
+                float val = value_0_to_255 - 128.0;
+                if (abs(val - u_missing_quantized) < 0.5) {
+                    return 99999.0;
+                }
+                return val;
+            }
+
+            float convert_units(float raw_value) {
+                if (u_conversion_type == 1) return raw_value;
+                if (u_conversion_type == 2) return raw_value * 1.8 + 32.0;
+                return raw_value;
+            }
+
+            void main() {
+                float raw_value;
+
+                if (u_no_smoothing) {
+                    float quantized_value = get_value(v_texCoord);
+                    if (quantized_value >= 99999.0) discard;
+                    raw_value = dequantize_val(quantized_value);
+                } else {
+                    vec2 texel_size = 1.0 / u_texture_size;
+                    vec2 tex_coord_in_texels = v_texCoord * u_texture_size;
+                    vec2 bl_texel_index = floor(tex_coord_in_texels - 0.5);
+                    vec2 f = fract(tex_coord_in_texels - 0.5);
+                    vec2 v00_coord = (bl_texel_index + vec2(0.5, 0.5)) * texel_size;
+                    vec2 v10_coord = (bl_texel_index + vec2(1.5, 0.5)) * texel_size;
+                    vec2 v01_coord = (bl_texel_index + vec2(0.5, 1.5)) * texel_size;
+                    vec2 v11_coord = (bl_texel_index + vec2(1.5, 1.5)) * texel_size;
+
+                    if (u_is_ptype) {
+                        float v00 = dequantize_val(get_value(v00_coord));
+                        float v10 = dequantize_val(get_value(v10_coord));
+                        float v01 = dequantize_val(get_value(v01_coord));
+                        float v11 = dequantize_val(get_value(v11_coord));
+
+                        float p00 = get_ptype_from_physical(v00);
+                        float p10 = get_ptype_from_physical(v10);
+                        float p01 = get_ptype_from_physical(v01);
+                        float p11 = get_ptype_from_physical(v11);
+                        
+                        // Count unique valid precipitation types - no array initialization in GLSL ES 1.0
+                        bool has_type_0 = false;
+                        bool has_type_1 = false;
+                        bool has_type_2 = false;
+                        bool has_type_3 = false;
+                        int valid_count = 0;
+                        
+                        if (p00 >= 0.0) { 
+                            int type = int(p00);
+                            if (type == 0) has_type_0 = true;
+                            else if (type == 1) has_type_1 = true;
+                            else if (type == 2) has_type_2 = true;
+                            else if (type == 3) has_type_3 = true;
+                            valid_count++; 
+                        }
+                        if (p10 >= 0.0) { 
+                            int type = int(p10);
+                            if (type == 0) has_type_0 = true;
+                            else if (type == 1) has_type_1 = true;
+                            else if (type == 2) has_type_2 = true;
+                            else if (type == 3) has_type_3 = true;
+                            valid_count++; 
+                        }
+                        if (p01 >= 0.0) { 
+                            int type = int(p01);
+                            if (type == 0) has_type_0 = true;
+                            else if (type == 1) has_type_1 = true;
+                            else if (type == 2) has_type_2 = true;
+                            else if (type == 3) has_type_3 = true;
+                            valid_count++; 
+                        }
+                        if (p11 >= 0.0) { 
+                            int type = int(p11);
+                            if (type == 0) has_type_0 = true;
+                            else if (type == 1) has_type_1 = true;
+                            else if (type == 2) has_type_2 = true;
+                            else if (type == 3) has_type_3 = true;
+                            valid_count++; 
+                        }
+                        
+                        if (valid_count == 0) discard;
+                        
+                        // Count unique types
+                        int unique_types = 0;
+                        if (has_type_0) unique_types++;
+                        if (has_type_1) unique_types++;
+                        if (has_type_2) unique_types++;
+                        if (has_type_3) unique_types++;
+                        
+                        if (unique_types == 1) {
+                            // ALL SAME TYPE - smooth interpolation
+                            float total_value = 0.0;
+                            float total_weight = 0.0;
+                            
+                            if (p00 >= 0.0) {
+                                float weight = (1.0 - f.x) * (1.0 - f.y);
+                                total_value += v00 * weight;
+                                total_weight += weight;
+                            }
+                            if (p10 >= 0.0) {
+                                float weight = f.x * (1.0 - f.y);
+                                total_value += v10 * weight;
+                                total_weight += weight;
+                            }
+                            if (p01 >= 0.0) {
+                                float weight = (1.0 - f.x) * f.y;
+                                total_value += v01 * weight;
+                                total_weight += weight;
+                            }
+                            if (p11 >= 0.0) {
+                                float weight = f.x * f.y;
+                                total_value += v11 * weight;
+                                total_weight += weight;
+                            }
+                            
+                            if (total_weight <= 0.0) discard;
+                            raw_value = total_value / total_weight;
+                            
+                        } else {
+                            // MULTIPLE TYPES - weighted voting
+                            float type_weight_0 = 0.0;
+                            float type_weight_1 = 0.0;
+                            float type_weight_2 = 0.0;
+                            float type_weight_3 = 0.0;
+                            
+                            if (p00 >= 0.0) {
+                                float w = (1.0 - f.x) * (1.0 - f.y);
+                                int type = int(p00);
+                                if (type == 0) type_weight_0 += w;
+                                else if (type == 1) type_weight_1 += w;
+                                else if (type == 2) type_weight_2 += w;
+                                else if (type == 3) type_weight_3 += w;
+                            }
+                            if (p10 >= 0.0) {
+                                float w = f.x * (1.0 - f.y);
+                                int type = int(p10);
+                                if (type == 0) type_weight_0 += w;
+                                else if (type == 1) type_weight_1 += w;
+                                else if (type == 2) type_weight_2 += w;
+                                else if (type == 3) type_weight_3 += w;
+                            }
+                            if (p01 >= 0.0) {
+                                float w = (1.0 - f.x) * f.y;
+                                int type = int(p01);
+                                if (type == 0) type_weight_0 += w;
+                                else if (type == 1) type_weight_1 += w;
+                                else if (type == 2) type_weight_2 += w;
+                                else if (type == 3) type_weight_3 += w;
+                            }
+                            if (p11 >= 0.0) {
+                                float w = f.x * f.y;
+                                int type = int(p11);
+                                if (type == 0) type_weight_0 += w;
+                                else if (type == 1) type_weight_1 += w;
+                                else if (type == 2) type_weight_2 += w;
+                                else if (type == 3) type_weight_3 += w;
+                            }
+                            
+                            // Find winning type
+                            float max_type_weight = 0.0;
+                            float winning_type = -1.0;
+                            if (type_weight_0 > max_type_weight) { max_type_weight = type_weight_0; winning_type = 0.0; }
+                            if (type_weight_1 > max_type_weight) { max_type_weight = type_weight_1; winning_type = 1.0; }
+                            if (type_weight_2 > max_type_weight) { max_type_weight = type_weight_2; winning_type = 2.0; }
+                            if (type_weight_3 > max_type_weight) { max_type_weight = type_weight_3; winning_type = 3.0; }
+                            
+                            if (winning_type == -1.0) discard;
+                            
+                            // Interpolate only winning type
+                            float total_value = 0.0;
+                            float total_weight = 0.0;
+                            
+                            if (p00 == winning_type) {
+                                float weight = (1.0 - f.x) * (1.0 - f.y);
+                                total_value += v00 * weight;
+                                total_weight += weight;
+                            }
+                            if (p10 == winning_type) {
+                                float weight = f.x * (1.0 - f.y);
+                                total_value += v10 * weight;
+                                total_weight += weight;
+                            }
+                            if (p01 == winning_type) {
+                                float weight = (1.0 - f.x) * f.y;
+                                total_value += v01 * weight;
+                                total_weight += weight;
+                            }
+                            if (p11 == winning_type) {
+                                float weight = f.x * f.y;
+                                total_value += v11 * weight;
+                                total_weight += weight;
+                            }
+                            
+                            if (total_weight <= 0.0) discard;
+                            raw_value = total_value / total_weight;
+                        }
+                    } else {
+                        float v00 = get_value(v00_coord);
+                        float v10 = get_value(v10_coord);
+                        float v01 = get_value(v01_coord);
+                        float v11 = get_value(v11_coord);
+                        float total_value = 0.0;
+                        float total_weight = 0.0;
+                        if (v00 < 99999.0) { float w = (1.0-f.x)*(1.0-f.y); total_value+=v00*w; total_weight+=w; }
+                        if (v10 < 99999.0) { float w = f.x*(1.0-f.y); total_value+=v10*w; total_weight+=w; }
+                        if (v01 < 99999.0) { float w = (1.0-f.x)*f.y; total_value+=v01*w; total_weight+=w; }
+                        if (v11 < 99999.0) { float w = f.x*f.y; total_value+=v11*w; total_weight+=w; }
+                        if (total_weight <= 0.0) discard;
+                        raw_value = dequantize_val(total_value / total_weight);
+                    }
+                }
+
+                float converted_value = convert_units(raw_value);
+
+                // Compare against u_data_range in the same unit space as the colormap (after unit conversion).
+                if (converted_value < u_data_range.x) {
+                    discard;
+                }
+                
+                float colormap_coord = clamp((converted_value - u_data_range.x) / (u_data_range.y - u_data_range.x), 0.0, 1.0);
+                
+                vec4 color = texture2D(u_colormap_texture, vec2(colormap_coord, 0.5));
+                
+                if (color.a < 0.1) {
+                    discard;
+                }
+                
+                float final_alpha = color.a * u_opacity;
+
+                gl_FragColor = vec4(color.rgb * final_alpha, final_alpha);
+            }`;
+
+        const vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, vertexSource); gl.compileShader(vertexShader);
+        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fragmentSource); gl.compileShader(fragmentShader);
+        
+        this.program = gl.createProgram(); gl.attachShader(this.program, vertexShader); gl.attachShader(this.program, fragmentShader); gl.linkProgram(this.program);
+        
+        this.a_position = gl.getAttribLocation(this.program, "a_position");
+        this.a_texCoord = gl.getAttribLocation(this.program, "a_texCoord");
+        this.u_matrix = gl.getUniformLocation(this.program, "u_matrix");
+        this.u_data_texture = gl.getUniformLocation(this.program, "u_data_texture");
+        this.u_colormap_texture = gl.getUniformLocation(this.program, "u_colormap_texture");
+        this.u_opacity = gl.getUniformLocation(this.program, "u_opacity");
+        this.u_data_range = gl.getUniformLocation(this.program, "u_data_range");
+        this.u_scale = gl.getUniformLocation(this.program, "u_scale");
+        this.u_offset = gl.getUniformLocation(this.program, "u_offset");
+        this.u_missing_quantized = gl.getUniformLocation(this.program, "u_missing_quantized");
+        this.u_texture_size = gl.getUniformLocation(this.program, "u_texture_size");
+        this.u_conversion_type = gl.getUniformLocation(this.program, "u_conversion_type");
+        this.u_scale_type = gl.getUniformLocation(this.program, "u_scale_type");
+        this.u_no_smoothing = gl.getUniformLocation(this.program, "u_no_smoothing");
+        this.u_is_ptype = gl.getUniformLocation(this.program, "u_is_ptype");
+        this.u_is_mrms = gl.getUniformLocation(this.program, "u_is_mrms"); // NEW
+
+        this.vertexBuffer = gl.createBuffer();
+        this.indexBuffer = gl.createBuffer();
+        this.dataTexture = gl.createTexture();
+        this.colormapTexture = gl.createTexture();
+        
+        // Restore geometry if it exists from a previous initialization
+        if (this.cachedCorners && this.cachedGridDef) {
+            this.updateGeometry(this.cachedCorners, this.cachedGridDef);
+        }
+    }
+
+    /**
+     * Upload quantized grid bytes (Uint8, centered at 128) to the active 2D texture.
+     * WebGL2: R8 + RED + UNSIGNED_BYTE (LUMINANCE is invalid). WebGL1: LUMINANCE.
+     */
+    _uploadQuantizedGridTexture(tex, nx, ny, dataArray) {
+        const gl = this.gl;
+        gl.bindTexture(gl.TEXTURE_2D, tex);
+        gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+        if (isWebGL2Context(gl)) {
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, nx, ny, 0, gl.RED, gl.UNSIGNED_BYTE, dataArray);
+        } else {
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, nx, ny, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, dataArray);
+        }
+    }
+
+    /**
+     * After updateDataTexture, register the same GPU texture under timeKey so the slider can
+     * switch back without re-fetching (avoids duplicating VRAM).
+     */
+    registerCurrentDataTextureAsPreloaded(timeKey) {
+        if (!this.gl || !this.dataTexture || this.encoding == null) {
+            return;
+        }
+        if (!this.preloadedTextures) this.preloadedTextures = new Map();
+        if (this.preloadedTextures.has(timeKey)) return;
+        this.preloadedTextures.set(timeKey, {
+            tex: this.dataTexture,
+            encoding: this.encoding,
+            nx: this.textureWidth,
+            ny: this.textureHeight
+        });
+    }
+
+    // Call this during preload to store a pre-uploaded GPU texture
+    storePreloadedTexture(timeKey, data, encoding, nx, ny) {
+        if (!this.gl) return;
+        const gl = this.gl;
+
+        const tex = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, tex);
+
+        let dataArray = data instanceof Uint8Array ? data
+            : data.buffer instanceof ArrayBuffer ? new Uint8Array(data.buffer, data.byteOffset, data.byteLength)
+            : new Uint8Array(data);
+
+        this._uploadQuantizedGridTexture(tex, nx, ny, dataArray);
+
+        const filter = this.noSmoothing ? gl.NEAREST : gl.LINEAR;
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+
+        if (!this.preloadedTextures) this.preloadedTextures = new Map();
+        if (this.preloadedTextures.has(timeKey)) {
+            const prev = this.preloadedTextures.get(timeKey);
+            if (prev.tex && prev.tex !== this.dataTexture) {
+                gl.deleteTexture(prev.tex);
+            }
+        }
+        this.preloadedTextures.set(timeKey, { tex, encoding, nx, ny });
+    }
+
+    // O(1) frame switch — just swaps which texture is active
+    switchToPreloadedTexture(timeKey) {
+        if (!this.preloadedTextures || !this.preloadedTextures.has(timeKey)) return false;
+        const { tex, encoding, nx, ny } = this.preloadedTextures.get(timeKey);
+        this.dataTexture = tex;
+        this.encoding = encoding;
+        this.scaleType = encoding.scale_type || 'linear';
+        this.textureWidth = nx;
+        this.textureHeight = ny;
+        return true;
+    }
+
+    updateGeometry(corners, gridDef) {
+
+        // Cache the geometry
+        this.cachedCorners = corners;
+        this.cachedGridDef = gridDef;
+        if (!this.gl || !this.vertexBuffer) return;
+        const gl = this.gl;
+
+        const subdivisions = 120; 
+        
+        // Validate input corners
+        const coordValues = [corners.lon_tl, corners.lat_tl, corners.lon_tr, corners.lat_tr, 
+                             corners.lon_bl, corners.lat_bl, corners.lon_br, corners.lat_br];
+        
+        if (coordValues.some(coord => !isFinite(coord))) {
+                        return;
+        }
+        
+        const gridType = gridDef.type;
+        
+        if (gridType === 'latlon') {
+            const vertices = [];
+            const indices = [];
+            
+            // Check if this is a flipped grid
+            const isFlippedGrid = corners.lat_tl < corners.lat_bl;
+
+            const isIconEUType = gridDef.grid_params && 
+                            gridDef.grid_params.lon_first === 336.5 && 
+                            Math.abs(gridDef.grid_params.lat_first) === 29.5;
+
+            const isIconD2Type = gridDef.grid_params && 
+                            gridDef.grid_params.lon_first === 356.06 && 
+                            Math.abs(gridDef.grid_params.lat_first) === 43.18;
+            // Detect grid type
+            const isGFSType = gridDef.grid_params && 
+                            gridDef.grid_params.lon_first === 0.0 && 
+                            Math.abs(gridDef.grid_params.lat_first) === 90.0;
+            
+            const isECMWFType = gridDef.grid_params && 
+                            gridDef.grid_params.lon_first === 180.0 && 
+                            gridDef.grid_params.lat_first === 90.0;
+
+            const isGEMType = gridDef.grid_params && 
+                            gridDef.grid_params.lon_first === 180.0 && 
+                            gridDef.grid_params.lat_first === -90.0 &&
+                            gridDef.grid_params.lon_last === 179.85;
+
+            // Apply longitude shift for different models
+            let adjustedCorners = corners;
+            if (isGFSType) {
+                adjustedCorners = {
+                    lon_tl: corners.lon_tl - 180,
+                    lat_tl: corners.lat_tl,
+                    lon_tr: corners.lon_tr - 180,
+                    lat_tr: corners.lat_tr,
+                    lon_bl: corners.lon_bl - 180,
+                    lat_bl: corners.lat_bl,
+                    lon_br: corners.lon_br - 180,
+                    lat_br: corners.lat_br
+                };
+                
+                Object.keys(adjustedCorners).forEach(key => {
+                    if (key.startsWith('lon_') && adjustedCorners[key] < -180) {
+                        adjustedCorners[key] += 360;
+                    }
+                });
+            } else if (isECMWFType) {
+                adjustedCorners = {
+                    lon_tl: corners.lon_tl >= 180 ? corners.lon_tl - 360 : corners.lon_tl,
+                    lat_tl: corners.lat_tl,
+                    lon_tr: corners.lon_tr >= 180 ? corners.lon_tr - 360 : corners.lon_tr,
+                    lat_tr: corners.lat_tr,
+                    lon_bl: corners.lon_bl >= 180 ? corners.lon_bl - 360 : corners.lon_bl,
+                    lat_bl: corners.lat_bl,
+                    lon_br: corners.lon_br >= 180 ? corners.lon_br - 360 : corners.lon_br,
+                    lat_br: corners.lat_br
+                };
+            } else if (isGEMType) {
+                adjustedCorners = corners;
+            }
+        
+            const lonSpan = Math.abs(adjustedCorners.lon_tr - adjustedCorners.lon_tl);
+            const isGlobalGrid = lonSpan >= 359 || isGEMType; 
+
+            if (isGlobalGrid) {
+                const totalWidth = subdivisions * 3;
+                
+                for (let row = 0; row <= subdivisions; row++) {
+                    for (let col = 0; col <= totalWidth; col++) {
+                        const tex_u = (col / subdivisions) - 1.0;
+                        
+                        let tex_v;
+                        if (isGEMType) {
+                            // FIX: Invert the V texture coordinate.
+                            // The GEM data starts at the South Pole, so the texture's V coordinate
+                            // needs to be flipped to match the geometry's top-to-bottom generation.
+                            tex_v = 1.0 - (row / subdivisions); 
+                        } else {
+                            tex_v = isFlippedGrid ? (1.0 - row / subdivisions) : (row / subdivisions);
+                        }
+                    
+                        
+                        // Map to world longitude coordinates
+                        let worldLonStart, worldLonEnd;
+                        
+                        if (isGEMType) {
+                            // NEW: For GEM, don't shift the longitude range - use it as-is
+                            // GEM goes from 180° to 179.85°, which should map to -180° to 179.85°
+                            worldLonStart = adjustedCorners.lon_tl - 360; // This will be -180
+                            worldLonEnd = adjustedCorners.lon_tr + 360;   // This will be ~539.85
+                        } else {
+                            worldLonStart = adjustedCorners.lon_tl - 360;
+                            worldLonEnd = adjustedCorners.lon_tr + 360;
+                        }
+                        
+                        const worldLonRange = worldLonEnd - worldLonStart;
+                        const worldLon = worldLonStart + (col / totalWidth) * worldLonRange;
+                        
+                        const t_lat = row / subdivisions;
+                        const worldLat = adjustedCorners.lat_tl + t_lat * (adjustedCorners.lat_bl - adjustedCorners.lat_tl);
+                                                
+                        if (!isFinite(worldLon) || !isFinite(worldLat)) {
+                            continue;
+                        }
+
+                        const mercator = this.getMercatorCoordinate(worldLon, worldLat);
+                        if (!isFinite(mercator.x) || !isFinite(mercator.y)) {
+                            continue;
+                        }
+                        
+                        vertices.push(mercator.x, mercator.y, tex_u, tex_v);
+                    }
+                }
+                
+                // Generate indices for the extended grid
+                const verticesPerRow = totalWidth + 1;
+                for (let row = 0; row < subdivisions; row++) {
+                    for (let col = 0; col < totalWidth; col++) {
+                        const topLeft = row * verticesPerRow + col;
+                        const topRight = topLeft + 1;
+                        const bottomLeft = (row + 1) * verticesPerRow + col;
+                        const bottomRight = bottomLeft + 1;
+                        
+                        // Make sure all vertices exist
+                        if (bottomRight < vertices.length / 4) {
+                            indices.push(topLeft, bottomLeft, topRight);
+                            indices.push(topRight, bottomLeft, bottomRight);
+                        }
+                    }
+                }
+                
+            } else {
+                // Regional grid handling
+                const adjustedCoordValues = [adjustedCorners.lon_tl, adjustedCorners.lat_tl, 
+                                        adjustedCorners.lon_tr, adjustedCorners.lat_tr, 
+                                        adjustedCorners.lon_bl, adjustedCorners.lat_bl, 
+                                        adjustedCorners.lon_br, adjustedCorners.lat_br];
+                
+                if (adjustedCoordValues.some(coord => !isFinite(coord))) {
+                                        return;
+                }
+                
+                // Additional validation: check if latitudes are in valid range
+                const latValues = [adjustedCorners.lat_tl, adjustedCorners.lat_tr, adjustedCorners.lat_bl, adjustedCorners.lat_br];
+                if (latValues.some(lat => lat < -90 || lat > 90)) {
+                                                                                return;
+                }
+                
+                // Calculate longitude span to handle wrapping
+                const lonSpan = Math.abs(adjustedCorners.lon_tr - adjustedCorners.lon_tl);
+                const crossesDateline = lonSpan > 180;
+                
+                // NEW: Track texture coordinate ranges
+                let minTexU = Infinity, maxTexU = -Infinity;
+                let minTexV = Infinity, maxTexV = -Infinity;
+                
+                for (let row = 0; row <= subdivisions; row++) {
+                    for (let col = 0; col <= subdivisions; col++) {
+                        const t_x = col / subdivisions;
+                        const t_y = row / subdivisions;
+                        
+                        // UPDATED: Texture coordinate calculation with ICON model fix
+                        let tex_u = t_x;
+                        let tex_v;
+
+                        if (isFlippedGrid && !isIconD2Type && !isIconEUType) {
+                            tex_v = (1.0 - t_y);
+                        } else {
+                            tex_v = t_y;
+                        }
+                        
+                        // NEW: Track ranges
+                        minTexU = Math.min(minTexU, tex_u);
+                        maxTexU = Math.max(maxTexU, tex_u);
+                        minTexV = Math.min(minTexV, tex_v);
+                        maxTexV = Math.max(maxTexV, tex_v);
+                        
+                        // Calculate interpolated coordinates
+                        let lon, lat;
+                        
+                        if (crossesDateline) {
+                            // Handle dateline crossing with proper interpolation
+                            let lon_tl = adjustedCorners.lon_tl;
+                            let lon_tr = adjustedCorners.lon_tr;
+                            let lon_bl = adjustedCorners.lon_bl;
+                            let lon_br = adjustedCorners.lon_br;
+                            
+                            // Adjust for dateline crossing
+                            if (lon_tr < lon_tl) lon_tr += 360;
+                            if (lon_br < lon_bl) lon_br += 360;
+                            
+                            // Bilinear interpolation
+                            lon = (1 - t_y) * ((1 - t_x) * lon_tl + t_x * lon_tr) +
+                                t_y * ((1 - t_x) * lon_bl + t_x * lon_br);
+                                
+                            // Normalize back to [-180, 180]
+                            while (lon > 180) lon -= 360;
+                            while (lon < -180) lon += 360;
+                        } else {
+                            // Standard bilinear interpolation
+                            lon = (1 - t_y) * ((1 - t_x) * adjustedCorners.lon_tl + t_x * adjustedCorners.lon_tr) +
+                                t_y * ((1 - t_x) * adjustedCorners.lon_bl + t_x * adjustedCorners.lon_br);
+                        }
+                        
+                        lat = (1 - t_y) * ((1 - t_x) * adjustedCorners.lat_tl + t_x * adjustedCorners.lat_tr) +
+                            t_y * ((1 - t_x) * adjustedCorners.lat_bl + t_x * adjustedCorners.lat_br);
+
+                        lat = Math.max(-MERCATOR_SAFE_LIMIT, Math.min(MERCATOR_SAFE_LIMIT, lat));
+
+                        // Validate coordinates
+                        if (!isFinite(lon) || !isFinite(lat)) {
+                                                                                    continue;
+                        }
+
+                        // Normalize longitude to [-180, 180] range
+                        let normalizedLon = lon;
+                        while (normalizedLon > 180) normalizedLon -= 360;
+                        while (normalizedLon < -180) normalizedLon += 360;
+
+                        const mercator = this.getMercatorCoordinate(normalizedLon, lat);
+                        
+                        if (!isFinite(mercator.x) || !isFinite(mercator.y)) {
+                                                        continue;
+                        }
+                        
+                        vertices.push(mercator.x, mercator.y, tex_u, tex_v);
+                    }
+                }
+                
+                // Generate indices (unchanged)
+                for (let row = 0; row < subdivisions; row++) {
+                    for (let col = 0; col < subdivisions; col++) {
+                        const topLeft = row * (subdivisions + 1) + col;
+                        const topRight = topLeft + 1;
+                        const bottomLeft = (row + 1) * (subdivisions + 1) + col;
+                        const bottomRight = bottomLeft + 1;
+                        
+                        indices.push(topLeft, bottomLeft, topRight);
+                        indices.push(topRight, bottomLeft, bottomRight);
+                    }
+                }
+            }
+
+            const vertexData = new Float32Array(vertices);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
+            
+            if (!this.indexBuffer) {
+                this.indexBuffer = gl.createBuffer();
+            }
+            
+            const indexData = new Uint16Array(indices);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
+            
+            this.indexCount = indices.length;
+            this.vertexCount = vertices.length / 4;
+        } else if (gridType === 'rotated_latlon') {
+            const projParams = gridDef.proj_params;
+            const vertices = [];
+            const indices = [];
+            
+            // Get grid bounds in rotated coordinates
+            const { lon_first, lat_first, dx_degrees, dy_degrees, nx, ny } = gridDef.grid_params;
+            const rot_lon_min = lon_first;
+            const rot_lat_max = lat_first;
+            const rot_lon_max = lon_first + (nx - 1) * dx_degrees;
+            const rot_lat_min = lat_first + (ny - 1) * dy_degrees;
+
+            
+            // Test corner transformations to verify positioning
+            const corners = [
+                [rot_lon_min, rot_lat_max], // Top-left
+                [rot_lon_max, rot_lat_max], // Top-right  
+                [rot_lon_min, rot_lat_min], // Bottom-left
+                [rot_lon_max, rot_lat_min]  // Bottom-right
+            ];
+            
+            // Use manual oblique transformation for HRDPS
+            for (let row = 0; row <= subdivisions; row++) {
+                for (let col = 0; col <= subdivisions; col++) {
+                    const t_x = col / subdivisions;
+                    const t_y = row / subdivisions;
+                    
+                    // Interpolate in rotated coordinate space
+                    const rot_lon = rot_lon_min + t_x * (rot_lon_max - rot_lon_min);
+                    const rot_lat = rot_lat_max + t_y * (rot_lat_min - rot_lat_max);
+                    
+                    try {
+                        // Use manual oblique transformation
+                        const [lon, lat] = hrdpsObliqueTransform(rot_lon, rot_lat);
+                        
+                        if (!isFinite(lon) || !isFinite(lat)) {
+                                                        continue;
+                        }
+                        
+                        const clampedLat = Math.max(-MERCATOR_SAFE_LIMIT, Math.min(MERCATOR_SAFE_LIMIT, lat));
+                        
+                        const mercator = this.getMercatorCoordinate(lon, clampedLat);
+                        
+                        if (!isFinite(mercator.x) || !isFinite(mercator.y)) {
+                                                        continue;
+                        }
+                        
+                        // Texture coordinates - corrected for HRDPS orientation
+                        const tex_u = t_x;
+                        const tex_v = 1.0 - t_y;  // Flipped for correct orientation
+                        
+                        vertices.push(mercator.x, mercator.y, tex_u, tex_v);
+                        
+                    } catch (error) {
+                                                continue;
+                    }
+                }
+            }
+            
+            // Generate indices (same for both HRDPS and other rotated models)
+            for (let row = 0; row < subdivisions; row++) {
+                for (let col = 0; col < subdivisions; col++) {
+                    const topLeft = row * (subdivisions + 1) + col;
+                    const topRight = topLeft + 1;
+                    const bottomLeft = (row + 1) * (subdivisions + 1) + col;
+                    const bottomRight = bottomLeft + 1;
+                    
+                    // Only add triangles if we have enough vertices
+                    if (bottomRight < vertices.length / 4) {
+                        indices.push(topLeft, bottomLeft, topRight);
+                        indices.push(topRight, bottomLeft, bottomRight);
+                    }
+                }
+            }
+            
+            const vertexData = new Float32Array(vertices);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
+            
+            if (!this.indexBuffer) {
+                this.indexBuffer = gl.createBuffer();
+            }
+            
+            const indexData = new Uint16Array(indices);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
+            
+            this.indexCount = indices.length;
+            this.vertexCount = vertices.length / 4;
+
+        } else if (gridType === 'polar_stereographic') {
+            const projParams = gridDef.proj_params;
+            let projectionString = `+proj=${projParams.proj}`;
+            Object.keys(projParams).forEach(key => {
+                if (key !== 'proj') {
+                    projectionString += ` +${key}=${projParams[key]}`;
+                }
+            });
+            projectionString += ' +lat_0=90 +no_defs';
+            
+            const wgs84 = 'EPSG:4326';
+            
+            const { nx, ny, dx, dy, x_origin, y_origin } = gridDef.grid_params;
+            
+            const x_min = x_origin;
+            const x_max = x_origin + (nx - 1) * dx;
+            const y_max = y_origin;
+            const y_min = y_origin + (ny - 1) * dy;
+
+            const vertices = [];
+            const indices = [];
+            const vertexGrid = [];
+            
+            let validVertexCount = 0;
+
+            // *** FIX: Declare lastLon outside the loops for continuous unwrapping ***
+            let lastLon = NaN; 
+            
+            // First pass: generate valid vertices
+            for (let row = 0; row <= subdivisions; row++) {
+                vertexGrid[row] = [];
+                // The line "let lastLon = NaN;" has been removed from here.
+
+                for (let col = 0; col <= subdivisions; col++) {
+                    const t_x = col / subdivisions;
+                    const t_y = row / subdivisions;
+                    
+                    const proj_x = x_min + t_x * (x_max - x_min);
+                    const proj_y = y_max + t_y * (y_min - y_max);
+                    
+                    try {
+                        const [lon_raw, lat] = proj4(projectionString, wgs84, [proj_x, proj_y]);
+                        
+                        if (!isFinite(lon_raw) || !isFinite(lat)) {
+                            vertexGrid[row][col] = null;
+                            // Do not reset lastLon; just skip this point
+                            continue;
+                        }
+
+                        if (lon_raw > 0) {
+                                                        vertexGrid[row][col] = null;
+                            continue;
+                        }
+                        
+                        let lon = lon_raw;
+
+                        // Unwrap longitude to create a continuous mesh.
+                        // This logic now works correctly across rows.
+                        if (!isNaN(lastLon)) {
+                            while (lon - lastLon > 180) { lon -= 360; }
+                            while (lastLon - lon > 180) { lon += 360; }
+                        }
+                        lastLon = lon; // Update lastLon for the next vertex
+                        
+                        const clampedLat = Math.max(-MERCATOR_SAFE_LIMIT, Math.min(MERCATOR_SAFE_LIMIT, lat));
+                        
+                        const mercator = this.getMercatorCoordinate(lon, clampedLat);
+                        
+                        if (!isFinite(mercator.x) || !isFinite(mercator.y)) {
+                            vertexGrid[row][col] = null;
+                            continue;
+                        }
+                        
+                        const tex_u = t_x;
+                        const tex_v = t_y;
+                        
+                        vertexGrid[row][col] = {
+                            mercator_x: mercator.x,
+                            mercator_y: mercator.y,
+                            tex_u: tex_u,
+                            tex_v: tex_v,
+                            vertexIndex: validVertexCount
+                        };
+                        
+                        vertices.push(mercator.x, mercator.y, tex_u, tex_v);
+                        validVertexCount++;
+                        
+                    } catch (error) {
+                        vertexGrid[row][col] = null;
+                        continue;
+                    }
+                }
+            }
+
+            if (vertices.length === 0) {
+                                return;
+            }
+            
+            // Second pass: generate indices (this logic remains the same)
+            for (let row = 0; row < subdivisions; row++) {
+                for (let col = 0; col < subdivisions; col++) {
+                    const topLeft = vertexGrid[row][col];
+                    const topRight = vertexGrid[row][col + 1];
+                    const bottomLeft = vertexGrid[row + 1][col];
+                    const bottomRight = vertexGrid[row + 1][col + 1];
+                    
+                    if (topLeft && topRight && bottomLeft && bottomRight) {
+                        indices.push(
+                            topLeft.vertexIndex, 
+                            bottomLeft.vertexIndex, 
+                            topRight.vertexIndex
+                        );
+                        indices.push(
+                            topRight.vertexIndex, 
+                            bottomLeft.vertexIndex, 
+                            bottomRight.vertexIndex
+                        );
+                    }
+                }
+            }
+            
+            // (Final buffer data setup remains the same)
+            const vertexData = new Float32Array(vertices);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
+            
+            if (!this.indexBuffer) {
+                this.indexBuffer = gl.createBuffer();
+            }
+            
+            const indexData = new Uint16Array(indices);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
+            
+            this.indexCount = indices.length;
+            this.vertexCount = vertices.length / 4;
+
+        } else if (gridType === 'lambert_conformal_conic') {
+            const projParams = gridDef.proj_params;
+            let projectionString = `+proj=${projParams.proj}`;
+            Object.keys(projParams).forEach(key => {
+                if (key !== 'proj') {
+                    projectionString += ` +${key}=${projParams[key]}`;
+                }
+            });
+            projectionString += ' +no_defs';
+            
+            const wgs84 = 'EPSG:4326';
+            
+            const { nx, ny, dx, dy, x_origin, y_origin } = gridDef.grid_params;
+            
+            // Calculate grid bounds in projected coordinates
+            const x_min = x_origin;
+            const y_max = y_origin;
+            const x_max = x_origin + (nx - 1) * dx;
+            const y_min = y_origin + (ny - 1) * dy;
+
+            const vertices = [];
+            const indices = [];
+            
+            // Track valid bounds
+            let validMinLon = Infinity, validMaxLon = -Infinity;
+            let validMinLat = Infinity, validMaxLat = -Infinity;
+            let validVertexCount = 0;
+            
+            // Create a sparse vertex array to handle gaps in valid projections
+            const vertexGrid = [];
+            const subdivisionsPlusOne = subdivisions + 1;
+            
+            // Initialize vertex grid
+            for (let row = 0; row <= subdivisions; row++) {
+                vertexGrid[row] = [];
+            }
+            
+            // First pass: generate valid vertices and store their grid positions
+            for (let row = 0; row <= subdivisions; row++) {
+                for (let col = 0; col <= subdivisions; col++) {
+                    const t_x = col / subdivisions;
+                    const t_y = row / subdivisions;
+                    
+                    const proj_x = x_min + t_x * (x_max - x_min);
+                    const proj_y = y_max + t_y * (y_min - y_max);
+                    
+                    try {
+                        const [lon, lat] = proj4(projectionString, wgs84, [proj_x, proj_y]);
+
+                        if (lon > 0) {
+                                                        vertexGrid[row][col] = null;
+                            continue;
+                        }
+                        
+                        // Track valid bounds
+                        validMinLon = Math.min(validMinLon, lon);
+                        validMaxLon = Math.max(validMaxLon, lon);
+                        validMinLat = Math.min(validMinLat, lat);
+                        validMaxLat = Math.max(validMaxLat, lat);
+                        
+                        const mercator = this.getMercatorCoordinate(lon, lat);
+                        
+                        if (!isFinite(mercator.x) || !isFinite(mercator.y)) {
+                            vertexGrid[row][col] = null;
+                            continue;
+                        }
+                        
+                        const tex_u = t_x;
+                        const tex_v = t_y;
+                        
+                        // Store vertex info in grid
+                        vertexGrid[row][col] = {
+                            mercator_x: mercator.x,
+                            mercator_y: mercator.y,
+                            tex_u: tex_u,
+                            tex_v: tex_v,
+                            vertexIndex: validVertexCount
+                        };
+                        
+                        vertices.push(mercator.x, mercator.y, tex_u, tex_v);
+                        validVertexCount++;
+                        
+                    } catch (error) {
+                                                vertexGrid[row][col] = null;
+                        continue;
+                    }
+                }
+            }
+
+            if (vertices.length === 0) {
+                                return;
+            }
+            
+            // Second pass: generate indices only for quads where all 4 vertices are valid
+            for (let row = 0; row < subdivisions; row++) {
+                for (let col = 0; col < subdivisions; col++) {
+                    const topLeft = vertexGrid[row][col];
+                    const topRight = vertexGrid[row][col + 1];
+                    const bottomLeft = vertexGrid[row + 1][col];
+                    const bottomRight = vertexGrid[row + 1][col + 1];
+                    
+                    // Only create triangles if all 4 vertices are valid
+                    if (topLeft && topRight && bottomLeft && bottomRight) {
+                        // Create two triangles for the quad
+                        indices.push(
+                            topLeft.vertexIndex, 
+                            bottomLeft.vertexIndex, 
+                            topRight.vertexIndex
+                        );
+                        indices.push(
+                            topRight.vertexIndex, 
+                            bottomLeft.vertexIndex, 
+                            bottomRight.vertexIndex
+                        );
+                    }
+                }
+            }
+            
+            // Check for potential dateline issues and log them
+            if (validMaxLon - validMinLon > 180) {
+                            }
+            
+            const vertexData = new Float32Array(vertices);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
+            
+            if (!this.indexBuffer) {
+                this.indexBuffer = gl.createBuffer();
+            }
+            
+            const indexData = new Uint16Array(indices);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
+            
+            this.indexCount = indices.length;
+            this.vertexCount = vertices.length / 4;
+
+        } else {
+                        return;
+        }
+    }
+
+    updateDataTexture(data, encoding, nx, ny) {
+        if (!this.gl || !data) {
+            return;
+        }
+        
+        const gl = this.gl;
+        
+        // Store encoding and dimensions
+        this.encoding = encoding;
+        this.scaleType = encoding.scale_type || 'linear';
+        this.textureWidth = nx;
+        this.textureHeight = ny;
+        
+        // DELETE any existing texture before creating a new one
+        if (this.dataTexture) {
+            gl.deleteTexture(this.dataTexture);
+            this.dataTexture = null;
+        }
+        
+        // Check if data length is 0 or insufficient
+        const expectedSize = nx * ny;
+
+        if (data.length === 0 || data.length < expectedSize) {
+            return;
+        }
+
+        // Ensure we have a proper Uint8Array
+        let dataArray;
+        if (data instanceof Uint8Array) {
+            dataArray = data;
+        } else if (data.buffer instanceof ArrayBuffer) {
+            dataArray = new Uint8Array(data.buffer, data.byteOffset, data.byteLength);
+        } else {
+            dataArray = new Uint8Array(data);
+        }
+
+        // Create fresh texture with actual data
+        this.dataTexture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, this.dataTexture);
+
+        this._uploadQuantizedGridTexture(this.dataTexture, nx, ny, dataArray);
+        
+        // Set texture parameters
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    }
+    
+    updateColormapTexture(colormap) {
+        if (!this.gl) return;
+        const gl = this.gl;
+        const width = 256; const data = new Uint8Array(width * 4);
+        const stops = colormap.reduce((acc, _, i) => (i % 2 === 0 ? [...acc, { value: colormap[i], color: colormap[i + 1] }] : acc), []);
+        if (stops.length === 0) return;
+        const minVal = stops[0].value; const maxVal = stops[stops.length - 1].value;
+        const hexToRgb = hex => [parseInt(hex.slice(1, 3), 16), parseInt(hex.slice(3, 5), 16), parseInt(hex.slice(5, 7), 16)];
+        for (let i = 0; i < width; i++) {
+            const val = minVal + (i / (width - 1)) * (maxVal - minVal);
+            let lower = stops[0], upper = stops[stops.length-1];
+            for (let j=0; j<stops.length - 1; j++) { if (val >= stops[j].value && val <= stops[j+1].value) { lower=stops[j]; upper=stops[j+1]; break; } }
+            const t = (val - lower.value) / (upper.value - lower.value || 1);
+            const rgb = hexToRgb(lower.color).map((c, idx) => c * (1 - t) + hexToRgb(upper.color)[idx] * t);
+            data.set(rgb, i * 4); data[i * 4 + 3] = 255;
+        }
+
+        // Delete and recreate to avoid stale texture state
+        if (this.colormapTexture) {
+            gl.deleteTexture(this.colormapTexture);
+        }
+        this.colormapTexture = gl.createTexture();
+
+        gl.activeTexture(gl.TEXTURE1); // <-- explicitly use TEXTURE1
+        gl.bindTexture(gl.TEXTURE_2D, this.colormapTexture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.activeTexture(gl.TEXTURE0); // reset active unit
+    }
+
+    updateStyle({ opacity, dataRange }) {
+        if (opacity !== undefined) this.opacity = opacity;
+        if (dataRange !== undefined) this.dataRange = dataRange;
+    }
+    
+    setUnitConversion(fromUnit, targetSystem) {
+        let conversionType = 0; // Default: no conversion
+        
+        // Clean the unit string by removing brackets and extra content
+        const cleanUnit = (fromUnit || '')
+            .toLowerCase()
+            .replace(/\[.*?\]/g, '') // Remove anything in brackets like [QPF]
+            .trim();
+        
+        // Check if it's a temperature unit (contains 'c' or 'f' as standalone or with degree symbol)
+        const isTempUnit = /\b[cf]\b|°[cf]|celsius|fahrenheit/.test(cleanUnit);
+        
+        if (isTempUnit) {
+            if (targetSystem === 'metric') conversionType = 1; // to C (no-op)
+            else if (targetSystem === 'imperial') conversionType = 2; // to F
+        }
+        
+        this.currentConversion.type = conversionType;
+        if (this.map) this.map.triggerRepaint();
+    }
+
+    render(gl, matrix) {
+        if (!this.dataTexture || !this.encoding) {
+            return;
+        }
+        if (!this.colormapTexture) {
+            return;
+        }
+        if (!this.program || !this.vertexBuffer || !this.indexBuffer) {
+            return;
+        }
+        gl.useProgram(this.program);
+
+        if (this.u_is_ptype) {
+            const isPtype = this.currentVariable === 'ptypeRefl' || this.currentVariable === 'ptypeRate';
+            gl.uniform1i(this.u_is_ptype, isPtype ? 1 : 0);
+        }
+        
+        if (this.u_is_mrms) {
+            gl.uniform1i(this.u_is_mrms, this.isMRMS ? 1 : 0); // NEW
+        }
+
+        gl.uniformMatrix4fv(this.u_matrix, false, matrix);
+        gl.uniform1f(this.u_opacity, this.opacity);
+        gl.uniform2f(this.u_data_range, this.dataRange[0], this.dataRange[1]);
+        gl.uniform1f(this.u_scale, this.encoding.scale);
+        gl.uniform1f(this.u_offset, this.encoding.offset);
+        gl.uniform1f(this.u_missing_quantized, this.encoding.missing_quantized || 127);
+        gl.uniform2f(this.u_texture_size, this.textureWidth, this.textureHeight); 
+        gl.uniform1i(this.u_scale_type, this.scaleType === 'sqrt' ? 1 : 0);
+        gl.uniform1i(this.u_conversion_type, this.currentConversion.type);
+        gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, this.dataTexture); gl.uniform1i(this.u_data_texture, 0);
+        gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, this.colormapTexture); gl.uniform1i(this.u_colormap_texture, 1);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+        gl.enableVertexAttribArray(this.a_position); gl.vertexAttribPointer(this.a_position, 2, gl.FLOAT, false, 16, 0);
+        gl.enableVertexAttribArray(this.a_texCoord); gl.vertexAttribPointer(this.a_texCoord, 2, gl.FLOAT, false, 16, 8);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+        gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.uniform1i(this.u_no_smoothing, this.noSmoothing);
+        gl.drawElements(gl.TRIANGLES, this.indexCount, gl.UNSIGNED_SHORT, 0);
+    }
+    
+    onRemove() {
+        if (!this.gl) return;
+        const gl = this.gl;
+
+        if (this.program) {
+            gl.deleteProgram(this.program);
+            this.program = null;
+        }
+        if (this.vertexBuffer) {
+            gl.deleteBuffer(this.vertexBuffer);
+            this.vertexBuffer = null;
+        }
+        if (this.indexBuffer) {
+            gl.deleteBuffer(this.indexBuffer);
+            this.indexBuffer = null;
+        }
+
+        const gridTextures = new Set();
+        if (this.dataTexture) gridTextures.add(this.dataTexture);
+        if (this.preloadedTextures) {
+            for (const { tex } of this.preloadedTextures.values()) {
+                if (tex) gridTextures.add(tex);
+            }
+            this.preloadedTextures.clear();
+        }
+        for (const tex of gridTextures) {
+            gl.deleteTexture(tex);
+        }
+        this.dataTexture = null;
+
+        if (this.colormapTexture) {
+            gl.deleteTexture(this.colormapTexture);
+            this.colormapTexture = null;
+        }
+
+        this.map = null;
+        this.gl = null;
+    }
 }