@longline/aqua-ui 1.0.339 → 1.0.340

package/map/layers/IdwLayer/IdwLayer.js

@@ -38,224 +38,280 @@ import { RgbColor } from '../../../helper/RgbColor';
 import { PresetGradients } from '../../../controls/Gradient';
 import { CopyVertexShader } from './CopyVertexShader';
 import { CopyFragmentShader } from './CopyFragmentShader';
+// Default prop values, referenced both by the IdwLayerBase fallbacks and the
+// IdwLayer wrapper below.
+var DEFAULT_MIN_ZOOM = 0;
+var DEFAULT_MAX_ZOOM = 99;
+var DEFAULT_MAX_DISTANCE = 0.0002;
+var DEFAULT_FADE_FRACTION = 0.15;
+var DEFAULT_RESOLUTION = 256;
+//
+// Convert a hex color (e.g. #ff0022) to an [r,g,b,a] array,
+// where r,g,b,a are in the 0.0-1.0 range.
+//
+var colorToRGBA = function (color) {
+    var rgb = RgbColor.FromString(color);
+    return [rgb.red / 255.0, rgb.green / 255.0, rgb.blue / 255.0, rgb.alpha];
+};
+//
+// Clamp the fade fraction to its documented 0..1 range. Guards against
+// empty/negative/NaN/out-of-range values reaching the shader.
+//
+var clampFadeFraction = function (value) {
+    var n = Number(value);
+    if (!Number.isFinite(n))
+        return DEFAULT_FADE_FRACTION;
+    return Math.max(0, Math.min(1, n));
+};
+var floatToRGBABytesLE = function (value) {
+    var buf = new ArrayBuffer(4);
+    var dv = new DataView(buf);
+    dv.setFloat32(0, value, true); // little-endian
+    return [dv.getUint8(0), dv.getUint8(1), dv.getUint8(2), dv.getUint8(3)];
+};
 var IdwLayerBase = function (props) {
     var map = useMap();
-    var idwProgram = React.useRef(null);
-    var vertexBuffer = React.useRef(null);
-    var dataTexture = React.useRef(null);
-    var dataTextureWidth = React.useRef(null);
-    var dataTextureHeight = React.useRef(null);
-    var offscreenTexture = React.useRef(null);
-    var fbo = React.useRef(null);
-    var copyProgram = React.useRef(null);
-    var copyBuffer = React.useRef(null);
-    var _a = React.useState(0), time = _a[0], setTime = _a[1];
-    var data = props.data.slice(0, 50);
-    // When properties change, make sure that layer is redrawn.
-    // Do this by varying its `key` with the current time.
-    React.useEffect(function () {
-        setTime(Date.now());
-    }, [props.data, props.gradientStops]);
-    //
-    // Convert a hex color (e.g. #ff0022) to an [r,g,b,a] array,
-    // where r,g,b,a are in the 0.0-1.0 range.
-    //
-    var colorToRGBA = function (color) {
-        var rgb = RgbColor.FromString(color);
-        return [rgb.red / 255.0, rgb.green / 255.0, rgb.blue / 255.0, rgb.alpha];
-    };
-    var floatToRGBABytesLE = function (value) {
-        var buf = new ArrayBuffer(4);
-        var dv = new DataView(buf);
-        dv.setFloat32(0, value, true); // little-endian
-        return [
-            dv.getUint8(0),
-            dv.getUint8(1),
-            dv.getUint8(2),
-            dv.getUint8(3),
-        ];
-    };
-    var makeTexture = function (gl) {
-        var minVal = Math.min.apply(Math, data.map(function (p) { return p.value; }));
-        var maxVal = Math.max.apply(Math, data.map(function (p) { return p.value; }));
-        var normalized = data.map(function (m) {
-            var coord = MercatorCoordinate.fromLngLat({ lng: m.longitude, lat: m.latitude });
-            return { x: coord.x, y: coord.y, value: (m.value - minVal) / (maxVal - minVal) };
-        });
-        var texSize = 1024;
-        dataTextureWidth.current = texSize;
-        dataTextureHeight.current = texSize;
-        var pixels = new Uint8Array(texSize * texSize * 4);
-        normalized.forEach(function (p, i) {
-            var values = [p.x, p.y, p.value];
-            for (var j = 0; j < 3; j++) {
-                var _a = floatToRGBABytesLE(values[j]), r = _a[0], g = _a[1], b = _a[2], a = _a[3];
-                var pixelIndex = i * 3 + j;
-                var offset = pixelIndex * 4;
-                if (offset + 3 < pixels.length) {
-                    pixels[offset + 0] = r;
-                    pixels[offset + 1] = g;
-                    pixels[offset + 2] = b;
-                    pixels[offset + 3] = a;
+    // The custom-layer callbacks are captured by Mapbox at add-time, so render
+    // reads live prop values through this ref rather than a stale closure.
+    var propsRef = React.useRef(props);
+    propsRef.current = props;
+    // Build a fresh custom layer — with its own private WebGL resource holder —
+    // whenever an input that requires re-initialising GL state changes (data,
+    // resolution). Each generation owns its resources and frees only those in its
+    // own onRemove, so the overlapping add/remove during a react-map-gl remount
+    // never clobbers the live generation.
+    var layer = React.useMemo(function () {
+        // Unique id per generation so the old and new layers coexist cleanly during
+        // the remount (old removeLayer + new addLayer both run).
+        var id = 'idw-' + Math.random().toString(36).slice(2);
+        // Private per-generation GL resources.
+        var idwProgram = null;
+        var vertexBuffer = null;
+        var dataTexture = null;
+        var dataTextureWidth = 0;
+        var dataTextureHeight = 0;
+        var offscreenTexture = null;
+        var fbo = null;
+        var copyProgram = null;
+        var copyBuffer = null;
+        var removed = false;
+        // The fragment shader loops over at most 1024 stations, so cap input here to
+        // match that hard ceiling rather than silently dropping data at an arbitrary
+        // lower limit.
+        var data = props.data.slice(0, 1024);
+        var makeTexture = function (gl) {
+            var minVal = Math.min.apply(Math, data.map(function (p) { return p.value; }));
+            var maxVal = Math.max.apply(Math, data.map(function (p) { return p.value; }));
+            // Avoid a 0/0 = NaN normalization when all values are equal (or there is
+            // only a single data point), which would otherwise poison the data texture.
+            var range = (maxVal - minVal) || 1;
+            var normalized = data.map(function (m) {
+                var coord = MercatorCoordinate.fromLngLat({ lng: m.longitude, lat: m.latitude });
+                return { x: coord.x, y: coord.y, value: (m.value - minVal) / range };
+            });
+            var texSize = 1024;
+            dataTextureWidth = texSize;
+            dataTextureHeight = texSize;
+            var pixels = new Uint8Array(texSize * texSize * 4);
+            normalized.forEach(function (p, i) {
+                var values = [p.x, p.y, p.value];
+                for (var j = 0; j < 3; j++) {
+                    var _a = floatToRGBABytesLE(values[j]), r = _a[0], g = _a[1], b = _a[2], a = _a[3];
+                    var pixelIndex = i * 3 + j;
+                    var offset = pixelIndex * 4;
+                    if (offset + 3 < pixels.length) {
+                        pixels[offset + 0] = r;
+                        pixels[offset + 1] = g;
+                        pixels[offset + 2] = b;
+                        pixels[offset + 3] = a;
+                    }
                 }
+            });
+            // Create / bind / upload texture
+            dataTexture = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, dataTexture);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, texSize, texSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+            // Use nearest sampling — we want exact pixel values
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+            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);
+        };
+        var onAdd = function (mbMap, gl) {
+            // IDW PROGRAM
+            var _a;
+            var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+            gl.shaderSource(vertexShader, IdwVertexShader);
+            gl.compileShader(vertexShader);
+            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+            gl.shaderSource(fragmentShader, IdwFragmentShader);
+            gl.compileShader(fragmentShader);
+            idwProgram = gl.createProgram();
+            gl.attachShader(idwProgram, vertexShader);
+            gl.attachShader(idwProgram, fragmentShader);
+            gl.linkProgram(idwProgram);
+            // Shaders are linked into the program now; flag them for deletion.
+            gl.deleteShader(vertexShader);
+            gl.deleteShader(fragmentShader);
+            // Create vertex buffer from vertices:
+            vertexBuffer = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]), gl.STATIC_DRAW);
+            // Make an OpenGL texture that contains station data (x,y,value). The
+            // texture dimensions are saved and will be passed into a shader uniform.
+            // Note that lat/lng is converted to Mercator x,y, in the [0..1] range.
+            makeTexture(gl);
+            // create texture to render into
+            var resolution = (_a = propsRef.current.resolution) !== null && _a !== void 0 ? _a : DEFAULT_RESOLUTION;
+            offscreenTexture = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, offscreenTexture);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, resolution, resolution, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); // linear for smoother upsampling
+            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);
+            // create framebuffer and attach texture
+            fbo = gl.createFramebuffer();
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, offscreenTexture, 0);
+            // check completeness (best-effort)
+            var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+            if (status !== gl.FRAMEBUFFER_COMPLETE) {
+                console.warn('Framebuffer not complete: ', status);
             }
-        });
-        // Create / bind / upload texture
-        dataTexture.current = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, dataTexture.current);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, texSize, texSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
-        // Use nearest sampling — we want exact pixel values
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-        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);
-    };
-    var onAddLayer = function (map, gl) {
-        // IDW PROGRAM
-        // create a vertex shader
-        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
-        gl.shaderSource(vertexShader, IdwVertexShader);
-        gl.compileShader(vertexShader);
-        // create a fragment shader
-        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-        gl.shaderSource(fragmentShader, IdwFragmentShader);
-        gl.compileShader(fragmentShader);
-        // link the two shaders into a WebGL program
-        idwProgram.current = gl.createProgram();
-        gl.attachShader(idwProgram.current, vertexShader);
-        gl.attachShader(idwProgram.current, fragmentShader);
-        gl.linkProgram(idwProgram.current);
-        // Create vertex buffer from vertices:
-        vertexBuffer.current = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer.current);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-            0.0, 0.0,
-            1.0, 0.0,
-            0.0, 1.0,
-            1.0, 1.0
-        ]), gl.STATIC_DRAW);
-        // Make an OpenGL texture that contains station data (x,y,value).
-        // The texture dimensions are saved and will be passed into a shader 
-        // uniform. Note that lat/lng is converted to Mercator x,y, which has 
-        // a range of [0..1].
-        makeTexture(gl);
-        // create texture to render into
-        offscreenTexture.current = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, offscreenTexture.current);
-        // allocate empty texture
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, props.resolution, props.resolution, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); // linear for smoother upsampling; you can use NEAREST if you want blocky
-        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);
-        // create framebuffer and attach texture
-        fbo.current = gl.createFramebuffer();
-        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.current);
-        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, offscreenTexture.current, 0);
-        // check completeness (best-effort)
-        var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
-        if (status !== gl.FRAMEBUFFER_COMPLETE) {
-            // Not fatal here — log to console
-            // eslint-disable-next-line no-console
-            console.warn('Framebuffer not complete: ', status);
-        }
-        // unbind
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        // COPY PROGRAM
-        // create a vertex shader
-        var copyVertexShader = gl.createShader(gl.VERTEX_SHADER);
-        gl.shaderSource(copyVertexShader, CopyVertexShader);
-        gl.compileShader(copyVertexShader);
-        // create a fragment shader
-        var copyFragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-        gl.shaderSource(copyFragmentShader, CopyFragmentShader);
-        gl.compileShader(copyFragmentShader);
-        // link the two shaders into a WebGL program
-        copyProgram.current = gl.createProgram();
-        gl.attachShader(copyProgram.current, copyVertexShader);
-        gl.attachShader(copyProgram.current, copyFragmentShader);
-        gl.linkProgram(copyProgram.current);
-        // Create vertex buffer from vertices:
-        copyBuffer.current = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, copyBuffer.current);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-            0.0, 0.0,
-            1.0, 0.0,
-            0.0, 1.0,
-            1.0, 1.0
-        ]), gl.STATIC_DRAW);
-    };
-    var onRender = function (gl, matrix, zoom, width, height) {
-        // Render is called many times while the map is panned/zoomed.
-        // You cannot have access to the map though.
-        if (zoom < props.minZoom)
-            return;
-        if (zoom > props.maxZoom)
-            return;
-        //
-        // FIRST PASS
-        //
-        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.current);
-        var vp = gl.getParameter(gl.VIEWPORT);
-        gl.viewport(0, 0, props.resolution, props.resolution);
-        gl.clearColor(0, 0, 0, 0);
-        gl.clear(gl.COLOR_BUFFER_BIT);
-        // Render is called many times while the map is panned/zoomed.
-        // You cannot have access to the map though.
-        gl.useProgram(idwProgram.current);
-        // Pass a matrix uniform in: 
-        gl.uniformMatrix4fv(gl.getUniformLocation(idwProgram.current, 'u_matrix'), false, matrix);
-        // Pass in number of stations:
-        gl.uniform1i(gl.getUniformLocation(idwProgram.current, "u_numStations"), data.length);
-        // put the data texture on texture unit 0
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, dataTexture.current);
-        // Pass data texture in (use texture unit 0):
-        gl.uniform1i(gl.getUniformLocation(idwProgram.current, "u_dataTexture"), 0);
-        // Pass texture size in:
-        // Tell the shader the size of the position texture
-        gl.uniform2f(gl.getUniformLocation(idwProgram.current, "u_dataTextureSize"), dataTextureWidth.current, dataTextureHeight.current);
-        // Stops - fill up to 12 stops by using values > 1 for filler stops.
-        // e.g. [0.0, 0.5, 1.0, 2.0....] means that only the first 3 stops are used.
-        var stops = __spreadArray([], props.gradientStops.map(function (s) { return s.pos; }), true);
-        while (stops.length < 12)
-            stops.push(2.0);
-        gl.uniform1fv(gl.getUniformLocation(idwProgram.current, 'u_gradientStops'), new Float32Array(stops));
-        var colors = props.gradientStops.map(function (s) { return colorToRGBA(s.color); }).flat();
-        gl.uniform4fv(gl.getUniformLocation(idwProgram.current, 'u_gradientColors'), new Float32Array(colors));
-        // Max distance from all stations at which a pixel is drawn:
-        gl.uniform1f(gl.getUniformLocation(idwProgram.current, "u_maxDistance"), props.maxDistance);
-        // Fraction of this max distance where fading begins:
-        gl.uniform1f(gl.getUniformLocation(idwProgram.current, "u_fadeFraction"), props.fadeFraction);
-        var aPos = gl.getAttribLocation(idwProgram.current, 'a_pos');
-        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer.current);
-        gl.enableVertexAttribArray(aPos);
-        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-        //
-        // SECOND PASS
-        // 
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        // Restore mapbox viewport:
-        gl.viewport(vp[0], vp[1], vp[2], vp[3]);
-        gl.useProgram(copyProgram.current);
-        // Pass a matrix uniform in: 
-        gl.uniformMatrix4fv(gl.getUniformLocation(copyProgram.current, 'u_matrix'), false, matrix);
-        // bind offscreen texture into unit 0 for copy pass
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, offscreenTexture.current);
-        gl.uniform1i(gl.getUniformLocation(copyProgram.current, 'u_src'), 0);
-        var aPos2 = gl.getAttribLocation(copyProgram.current, 'a_pos');
-        gl.bindBuffer(gl.ARRAY_BUFFER, copyBuffer.current);
-        gl.enableVertexAttribArray(aPos2);
-        gl.vertexAttribPointer(aPos2, 2, gl.FLOAT, false, 0, 0);
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-    };
-    return (React.createElement(Layer, { id: null, type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getZoom(), map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
+            // unbind
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            // COPY PROGRAM
+            var copyVertexShader = gl.createShader(gl.VERTEX_SHADER);
+            gl.shaderSource(copyVertexShader, CopyVertexShader);
+            gl.compileShader(copyVertexShader);
+            var copyFragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+            gl.shaderSource(copyFragmentShader, CopyFragmentShader);
+            gl.compileShader(copyFragmentShader);
+            copyProgram = gl.createProgram();
+            gl.attachShader(copyProgram, copyVertexShader);
+            gl.attachShader(copyProgram, copyFragmentShader);
+            gl.linkProgram(copyProgram);
+            // Shaders are linked into the program now; flag them for deletion.
+            gl.deleteShader(copyVertexShader);
+            gl.deleteShader(copyFragmentShader);
+            // Create vertex buffer from vertices:
+            copyBuffer = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, copyBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]), gl.STATIC_DRAW);
+            // The map is idle after a prop-driven remount, so force a repaint to draw
+            // the freshly-added layer (there is no animation loop to do it otherwise).
+            mbMap.triggerRepaint();
+        };
+        var render = function (gl, matrix) {
+            var _a, _b, _c, _d, _e, _f;
+            // Render is called many times while the map is panned/zoomed.
+            if (removed)
+                return; // Resources freed; ignore any trailing frame.
+            var m = map.current;
+            if (!m)
+                return;
+            var p = propsRef.current;
+            var zoom = m.getZoom();
+            if (zoom < ((_a = p.minZoom) !== null && _a !== void 0 ? _a : DEFAULT_MIN_ZOOM))
+                return;
+            if (zoom > ((_b = p.maxZoom) !== null && _b !== void 0 ? _b : DEFAULT_MAX_ZOOM))
+                return;
+            //
+            // FIRST PASS
+            //
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+            var vp = gl.getParameter(gl.VIEWPORT);
+            var resolution = (_c = p.resolution) !== null && _c !== void 0 ? _c : DEFAULT_RESOLUTION;
+            gl.viewport(0, 0, resolution, resolution);
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.useProgram(idwProgram);
+            // Pass a matrix uniform in:
+            gl.uniformMatrix4fv(gl.getUniformLocation(idwProgram, 'u_matrix'), false, matrix);
+            // Pass in number of stations:
+            gl.uniform1i(gl.getUniformLocation(idwProgram, 'u_numStations'), data.length);
+            // put the data texture on texture unit 0
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, dataTexture);
+            // Pass data texture in (use texture unit 0):
+            gl.uniform1i(gl.getUniformLocation(idwProgram, 'u_dataTexture'), 0);
+            // Tell the shader the size of the position texture:
+            gl.uniform2f(gl.getUniformLocation(idwProgram, 'u_dataTextureSize'), dataTextureWidth, dataTextureHeight);
+            // Stops - fill up to 12 stops by using values > 1 for filler stops.
+            // e.g. [0.0, 0.5, 1.0, 2.0....] means that only the first 3 stops are used.
+            var stops = __spreadArray([], ((_d = p.gradientStops) !== null && _d !== void 0 ? _d : []).map(function (s) { return s.pos; }), true);
+            while (stops.length < 12)
+                stops.push(2.0);
+            gl.uniform1fv(gl.getUniformLocation(idwProgram, 'u_gradientStops'), new Float32Array(stops));
+            var colors = ((_e = p.gradientStops) !== null && _e !== void 0 ? _e : []).map(function (s) { return colorToRGBA(s.color); }).flat();
+            gl.uniform4fv(gl.getUniformLocation(idwProgram, 'u_gradientColors'), new Float32Array(colors));
+            // Max distance from all stations at which a pixel is drawn:
+            gl.uniform1f(gl.getUniformLocation(idwProgram, 'u_maxDistance'), (_f = p.maxDistance) !== null && _f !== void 0 ? _f : DEFAULT_MAX_DISTANCE);
+            // Fraction of this max distance where fading begins:
+            gl.uniform1f(gl.getUniformLocation(idwProgram, 'u_fadeFraction'), clampFadeFraction(p.fadeFraction));
+            var aPos = gl.getAttribLocation(idwProgram, 'a_pos');
+            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+            gl.enableVertexAttribArray(aPos);
+            gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+            gl.enable(gl.BLEND);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+            // Attribute-array enable state is global in WebGL1; disable what we
+            // enabled so a later draw can't reference a stale (freed) buffer left
+            // bound to a still-enabled index.
+            gl.disableVertexAttribArray(aPos);
+            //
+            // SECOND PASS
+            //
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            // Restore mapbox viewport:
+            gl.viewport(vp[0], vp[1], vp[2], vp[3]);
+            gl.useProgram(copyProgram);
+            // Pass a matrix uniform in:
+            gl.uniformMatrix4fv(gl.getUniformLocation(copyProgram, 'u_matrix'), false, matrix);
+            // bind offscreen texture into unit 0 for copy pass
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, offscreenTexture);
+            gl.uniform1i(gl.getUniformLocation(copyProgram, 'u_src'), 0);
+            var aPos2 = gl.getAttribLocation(copyProgram, 'a_pos');
+            gl.bindBuffer(gl.ARRAY_BUFFER, copyBuffer);
+            gl.enableVertexAttribArray(aPos2);
+            gl.vertexAttribPointer(aPos2, 2, gl.FLOAT, false, 0, 0);
+            gl.enable(gl.BLEND);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+            gl.disableVertexAttribArray(aPos2);
+        };
+        // Free all WebGL resources when this generation's layer is removed (Mapbox
+        // calls this on removeLayer). gl.deleteX(null) is a safe no-op.
+        var onRemove = function (_mbMap, gl) {
+            removed = true;
+            gl.deleteProgram(idwProgram);
+            gl.deleteProgram(copyProgram);
+            gl.deleteBuffer(vertexBuffer);
+            gl.deleteBuffer(copyBuffer);
+            gl.deleteTexture(dataTexture);
+            gl.deleteTexture(offscreenTexture);
+            gl.deleteFramebuffer(fbo);
+            idwProgram = null;
+            copyProgram = null;
+            vertexBuffer = null;
+            copyBuffer = null;
+            dataTexture = null;
+            offscreenTexture = null;
+            fbo = null;
+        };
+        return { id: id, onAdd: onAdd, render: render, onRemove: onRemove };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.data, props.resolution]);
+    // Render-only prop changes don't rebuild GL state (render reads them live via
+    // propsRef), but the idle map needs a nudge to repaint with the new values.
+    React.useEffect(function () {
+        var _a;
+        (_a = map.current) === null || _a === void 0 ? void 0 : _a.triggerRepaint();
+    }, [map, props.gradientStops, props.minZoom, props.maxZoom, props.maxDistance, props.fadeFraction]);
+    return (React.createElement(Layer, { id: layer.id, key: layer.id, type: "custom", beforeId: "overlay", onAdd: layer.onAdd, onRemove: layer.onRemove, render: layer.render }));
 };
 /**
  * An `IdwLayer` takes a data array of points of the form
@@ -278,7 +334,7 @@ var IdwLayerBase = function (props) {
  * as long as it is a power of 2 (32, 64, 128, 256...).
  */
 var IdwLayer = function (_a) {
-    var _b = _a.gradientStops, gradientStops = _b === void 0 ? PresetGradients.Blue : _b, _c = _a.minZoom, minZoom = _c === void 0 ? 0 : _c, _d = _a.maxZoom, maxZoom = _d === void 0 ? 99 : _d, _e = _a.maxDistance, maxDistance = _e === void 0 ? 0.0002 : _e, _f = _a.fadeFraction, fadeFraction = _f === void 0 ? 0.15 : _f, _g = _a.resolution, resolution = _g === void 0 ? 256 : _g, props = __rest(_a, ["gradientStops", "minZoom", "maxZoom", "maxDistance", "fadeFraction", "resolution"]);
+    var _b = _a.gradientStops, gradientStops = _b === void 0 ? PresetGradients.Blue : _b, _c = _a.minZoom, minZoom = _c === void 0 ? DEFAULT_MIN_ZOOM : _c, _d = _a.maxZoom, maxZoom = _d === void 0 ? DEFAULT_MAX_ZOOM : _d, _e = _a.maxDistance, maxDistance = _e === void 0 ? DEFAULT_MAX_DISTANCE : _e, _f = _a.fadeFraction, fadeFraction = _f === void 0 ? DEFAULT_FADE_FRACTION : _f, _g = _a.resolution, resolution = _g === void 0 ? DEFAULT_RESOLUTION : _g, props = __rest(_a, ["gradientStops", "minZoom", "maxZoom", "maxDistance", "fadeFraction", "resolution"]);
     return React.createElement(IdwLayerBase, __assign({ gradientStops: gradientStops, minZoom: minZoom, maxZoom: maxZoom, maxDistance: maxDistance, fadeFraction: fadeFraction, resolution: resolution }, props));
 };
 IdwLayer.displayName = 'IdwLayer';

package/map/layers/InterpolationLayer/ContoursFragmentShader.d.ts

@@ -1,2 +1,2 @@
-declare const ContoursFragmentShader = " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  // Screen resolution is needed to convert gl_FragCoord to texture coordinate.\n  uniform vec2 u_resolution;\n  uniform sampler2D dataTexture;\n  uniform int levels;\n  uniform vec4 u_contourColor;\n  uniform float u_contourThickness;\n  uniform float u_gradientStops[12];\n  uniform vec4 u_gradientColors[12];\n\n  //\n  // Given a value, find its corresponding color in the gradient stops.\n  //\n  vec4 getGradientColor(float position) {\n    // Find left and right stop:\n    float left = -1.0;\n    float right = 99.0;\n    vec4 leftColor;\n    vec4 rightColor;\n\n    for(int i = 0; i < 12; i++) {\n      if (u_gradientStops[i] <= position) {\n        left = u_gradientStops[i]; \n        leftColor = u_gradientColors[i];\n      } else break;\n    }\n\n    for(int i = 12 - 1; i >= 0; i--) {\n      if (u_gradientStops[i] >= position) {\n        right = u_gradientStops[i]; \n        rightColor = u_gradientColors[i];\n      } else break;\n    }\n\n    // Distance between stops:\n    float width = right - left;\n    // Distance from left stop:\n    float dist = position - left;\n    // Right stop weight:\n    float weight;\n    if(dist == 0.0) {\n      weight = dist;\n    } else {\n      weight = dist / width;\n    }\n\n    float r = leftColor.x + (rightColor.x - leftColor.x) * weight;\n    float g = leftColor.y + (rightColor.y - leftColor.y) * weight;\n    float b = leftColor.z + (rightColor.z - leftColor.z) * weight;\n    float a = leftColor.w + (rightColor.w - leftColor.w) * weight;\n    return vec4(r, g, b, a);    \n  } \n\n  //\n  // Returns texture color at pixelCoord.\n  //\n  vec4 texelFetch(sampler2D tex, vec2 pixelCoord) {\n    return texture2D(tex, pixelCoord / u_resolution);\n  }\n\n  //\n  // Returns texture pixel shade, in a number of levels:\n  int getShade(sampler2D tex, vec2 pixelCoord, float levels) {\n    vec4 color = texelFetch(tex, pixelCoord);\n    // If the color is transparent, return -1, so that there's always a contour line.\n    if(color.w == 0.0) return -1;\n    // Return greyscale shade in levels:\n    return int(color.x * levels);\n  }\n\n  bool hasDifferentShade() {\n    float numLevels = float(levels);\n    float offset = max(1.0, u_contourThickness);\n\n    // Get shades of input color and surrounding pixels:\n    int shade = getShade(dataTexture, gl_FragCoord.xy, numLevels);\n    int up    = getShade(dataTexture, vec2(gl_FragCoord.x, gl_FragCoord.y - offset), numLevels);\n    int down  = getShade(dataTexture, vec2(gl_FragCoord.x, gl_FragCoord.y + offset), numLevels);\n    int left  = getShade(dataTexture, vec2(gl_FragCoord.x - offset, gl_FragCoord.y), numLevels);\n    int right = getShade(dataTexture, vec2(gl_FragCoord.x + offset, gl_FragCoord.y), numLevels);\n    return (up != shade || down != shade || left != shade || right != shade);\n  }\n\n  void main() {\n    // Get input color:\n    vec4 color = texelFetch(dataTexture, gl_FragCoord.xy);\n\n    // If input is transparent, draw nothing.\n    if(color.w == 0.0) return;\n\n    // If the shade of the current pixel is different from any of its surrounding\n    // pixels by at least a shade, then draw contour line color.\n    if(levels != 0 && hasDifferentShade()) {\n      gl_FragColor = u_contourColor;\n    } \n    // Otherwise draw the input color.\n    else {\n      gl_FragColor = getGradientColor(color.x);\n    }\n  }\n";
+declare const ContoursFragmentShader = " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  // Screen resolution is needed to convert gl_FragCoord to texture coordinate.\n  uniform vec2 u_resolution;\n  uniform sampler2D dataTexture;\n  uniform int levels;\n  uniform vec4 u_contourColor;\n  uniform float u_contourThickness;\n  uniform float u_gradientStops[12];\n  uniform vec4 u_gradientColors[12];\n\n  //\n  // Given a value, find its corresponding color in the gradient stops.\n  //\n  vec4 getGradientColor(float position) {\n    // Find left and right stop:\n    float left = -1.0;\n    float right = 99.0;\n    vec4 leftColor;\n    vec4 rightColor;\n\n    for(int i = 0; i < 12; i++) {\n      if (u_gradientStops[i] <= position) {\n        left = u_gradientStops[i]; \n        leftColor = u_gradientColors[i];\n      } else break;\n    }\n\n    for(int i = 12 - 1; i >= 0; i--) {\n      if (u_gradientStops[i] >= position) {\n        right = u_gradientStops[i]; \n        rightColor = u_gradientColors[i];\n      } else break;\n    }\n\n    // Distance between stops:\n    float width = right - left;\n    // Distance from left stop:\n    float dist = position - left;\n    // Right stop weight:\n    float weight;\n    if(dist == 0.0) {\n      weight = dist;\n    } else {\n      weight = dist / width;\n    }\n\n    float r = leftColor.x + (rightColor.x - leftColor.x) * weight;\n    float g = leftColor.y + (rightColor.y - leftColor.y) * weight;\n    float b = leftColor.z + (rightColor.z - leftColor.z) * weight;\n    float a = leftColor.w + (rightColor.w - leftColor.w) * weight;\n    return vec4(r, g, b, a);    \n  } \n\n  //\n  // Returns texture color at pixelCoord.\n  //\n  vec4 texelFetch(sampler2D tex, vec2 pixelCoord) {\n    return texture2D(tex, pixelCoord / u_resolution);\n  }\n\n  //\n  // Returns texture pixel shade, in a number of levels:\n  int getShade(sampler2D tex, vec2 pixelCoord, float levels) {\n    vec4 color = texelFetch(tex, pixelCoord);\n    // If the color is transparent, return -1, so that there's always a contour line.\n    if(color.w == 0.0) return -1;\n    // Return greyscale shade in levels:\n    return int(color.x * levels);\n  }\n\n  bool hasDifferentShade() {\n    float numLevels = float(levels);\n    float offset = max(1.0, u_contourThickness);\n\n    // Get shades of input color and surrounding pixels:\n    int shade = getShade(dataTexture, gl_FragCoord.xy, numLevels);\n    int up    = getShade(dataTexture, vec2(gl_FragCoord.x, gl_FragCoord.y - offset), numLevels);\n    int down  = getShade(dataTexture, vec2(gl_FragCoord.x, gl_FragCoord.y + offset), numLevels);\n    int left  = getShade(dataTexture, vec2(gl_FragCoord.x - offset, gl_FragCoord.y), numLevels);\n    int right = getShade(dataTexture, vec2(gl_FragCoord.x + offset, gl_FragCoord.y), numLevels);\n    return (up != shade || down != shade || left != shade || right != shade);\n  }\n\n  void main() {\n    // Get input color:\n    vec4 color = texelFetch(dataTexture, gl_FragCoord.xy);\n\n    // If input is transparent, draw nothing.\n    if(color.w == 0.0) return;\n\n    // If the shade of the current pixel is different from any of its surrounding\n    // pixels by at least a shade, then draw contour line color. A thickness of\n    // 0 disables contour lines entirely.\n    if(levels != 0 && u_contourThickness > 0.0 && hasDifferentShade()) {\n      gl_FragColor = u_contourColor;\n    }\n    // Otherwise draw the input color.\n    else {\n      gl_FragColor = getGradientColor(color.x);\n    }\n  }\n";
 export { ContoursFragmentShader };

package/map/layers/InterpolationLayer/ContoursFragmentShader.js

@@ -1,2 +1,2 @@
-var ContoursFragmentShader = /*glsl*/ " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  // Screen resolution is needed to convert gl_FragCoord to texture coordinate.\n  uniform vec2 u_resolution;\n  uniform sampler2D dataTexture;\n  uniform int levels;\n  uniform vec4 u_contourColor;\n  uniform float u_contourThickness;\n  uniform float u_gradientStops[12];\n  uniform vec4 u_gradientColors[12];\n\n  //\n  // Given a value, find its corresponding color in the gradient stops.\n  //\n  vec4 getGradientColor(float position) {\n    // Find left and right stop:\n    float left = -1.0;\n    float right = 99.0;\n    vec4 leftColor;\n    vec4 rightColor;\n\n    for(int i = 0; i < 12; i++) {\n      if (u_gradientStops[i] <= position) {\n        left = u_gradientStops[i]; \n        leftColor = u_gradientColors[i];\n      } else break;\n    }\n\n    for(int i = 12 - 1; i >= 0; i--) {\n      if (u_gradientStops[i] >= position) {\n        right = u_gradientStops[i]; \n        rightColor = u_gradientColors[i];\n      } else break;\n    }\n\n    // Distance between stops:\n    float width = right - left;\n    // Distance from left stop:\n    float dist = position - left;\n    // Right stop weight:\n    float weight;\n    if(dist == 0.0) {\n      weight = dist;\n    } else {\n      weight = dist / width;\n    }\n\n    float r = leftColor.x + (rightColor.x - leftColor.x) * weight;\n    float g = leftColor.y + (rightColor.y - leftColor.y) * weight;\n    float b = leftColor.z + (rightColor.z - leftColor.z) * weight;\n    float a = leftColor.w + (rightColor.w - leftColor.w) * weight;\n    return vec4(r, g, b, a);    \n  } \n\n  //\n  // Returns texture color at pixelCoord.\n  //\n  vec4 texelFetch(sampler2D tex, vec2 pixelCoord) {\n    return texture2D(tex, pixelCoord / u_resolution);\n  }\n\n  //\n  // Returns texture pixel shade, in a number of levels:\n  int getShade(sampler2D tex, vec2 pixelCoord, float levels) {\n    vec4 color = texelFetch(tex, pixelCoord);\n    // If the color is transparent, return -1, so that there's always a contour line.\n    if(color.w == 0.0) return -1;\n    // Return greyscale shade in levels:\n    return int(color.x * levels);\n  }\n\n  bool hasDifferentShade() {\n    float numLevels = float(levels);\n    float offset = max(1.0, u_contourThickness);\n\n    // Get shades of input color and surrounding pixels:\n    int shade = getShade(dataTexture, gl_FragCoord.xy, numLevels);\n    int up    = getShade(dataTexture, vec2(gl_FragCoord.x, gl_FragCoord.y - offset), numLevels);\n    int down  = getShade(dataTexture, vec2(gl_FragCoord.x, gl_FragCoord.y + offset), numLevels);\n    int left  = getShade(dataTexture, vec2(gl_FragCoord.x - offset, gl_FragCoord.y), numLevels);\n    int right = getShade(dataTexture, vec2(gl_FragCoord.x + offset, gl_FragCoord.y), numLevels);\n    return (up != shade || down != shade || left != shade || right != shade);\n  }\n\n  void main() {\n    // Get input color:\n    vec4 color = texelFetch(dataTexture, gl_FragCoord.xy);\n\n    // If input is transparent, draw nothing.\n    if(color.w == 0.0) return;\n\n    // If the shade of the current pixel is different from any of its surrounding\n    // pixels by at least a shade, then draw contour line color.\n    if(levels != 0 && hasDifferentShade()) {\n      gl_FragColor = u_contourColor;\n    } \n    // Otherwise draw the input color.\n    else {\n      gl_FragColor = getGradientColor(color.x);\n    }\n  }\n";
+var ContoursFragmentShader = /*glsl*/ " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  // Screen resolution is needed to convert gl_FragCoord to texture coordinate.\n  uniform vec2 u_resolution;\n  uniform sampler2D dataTexture;\n  uniform int levels;\n  uniform vec4 u_contourColor;\n  uniform float u_contourThickness;\n  uniform float u_gradientStops[12];\n  uniform vec4 u_gradientColors[12];\n\n  //\n  // Given a value, find its corresponding color in the gradient stops.\n  //\n  vec4 getGradientColor(float position) {\n    // Find left and right stop:\n    float left = -1.0;\n    float right = 99.0;\n    vec4 leftColor;\n    vec4 rightColor;\n\n    for(int i = 0; i < 12; i++) {\n      if (u_gradientStops[i] <= position) {\n        left = u_gradientStops[i]; \n        leftColor = u_gradientColors[i];\n      } else break;\n    }\n\n    for(int i = 12 - 1; i >= 0; i--) {\n      if (u_gradientStops[i] >= position) {\n        right = u_gradientStops[i]; \n        rightColor = u_gradientColors[i];\n      } else break;\n    }\n\n    // Distance between stops:\n    float width = right - left;\n    // Distance from left stop:\n    float dist = position - left;\n    // Right stop weight:\n    float weight;\n    if(dist == 0.0) {\n      weight = dist;\n    } else {\n      weight = dist / width;\n    }\n\n    float r = leftColor.x + (rightColor.x - leftColor.x) * weight;\n    float g = leftColor.y + (rightColor.y - leftColor.y) * weight;\n    float b = leftColor.z + (rightColor.z - leftColor.z) * weight;\n    float a = leftColor.w + (rightColor.w - leftColor.w) * weight;\n    return vec4(r, g, b, a);    \n  } \n\n  //\n  // Returns texture color at pixelCoord.\n  //\n  vec4 texelFetch(sampler2D tex, vec2 pixelCoord) {\n    return texture2D(tex, pixelCoord / u_resolution);\n  }\n\n  //\n  // Returns texture pixel shade, in a number of levels:\n  int getShade(sampler2D tex, vec2 pixelCoord, float levels) {\n    vec4 color = texelFetch(tex, pixelCoord);\n    // If the color is transparent, return -1, so that there's always a contour line.\n    if(color.w == 0.0) return -1;\n    // Return greyscale shade in levels:\n    return int(color.x * levels);\n  }\n\n  bool hasDifferentShade() {\n    float numLevels = float(levels);\n    float offset = max(1.0, u_contourThickness);\n\n    // Get shades of input color and surrounding pixels:\n    int shade = getShade(dataTexture, gl_FragCoord.xy, numLevels);\n    int up    = getShade(dataTexture, vec2(gl_FragCoord.x, gl_FragCoord.y - offset), numLevels);\n    int down  = getShade(dataTexture, vec2(gl_FragCoord.x, gl_FragCoord.y + offset), numLevels);\n    int left  = getShade(dataTexture, vec2(gl_FragCoord.x - offset, gl_FragCoord.y), numLevels);\n    int right = getShade(dataTexture, vec2(gl_FragCoord.x + offset, gl_FragCoord.y), numLevels);\n    return (up != shade || down != shade || left != shade || right != shade);\n  }\n\n  void main() {\n    // Get input color:\n    vec4 color = texelFetch(dataTexture, gl_FragCoord.xy);\n\n    // If input is transparent, draw nothing.\n    if(color.w == 0.0) return;\n\n    // If the shade of the current pixel is different from any of its surrounding\n    // pixels by at least a shade, then draw contour line color. A thickness of\n    // 0 disables contour lines entirely.\n    if(levels != 0 && u_contourThickness > 0.0 && hasDifferentShade()) {\n      gl_FragColor = u_contourColor;\n    }\n    // Otherwise draw the input color.\n    else {\n      gl_FragColor = getGradientColor(color.x);\n    }\n  }\n";
 export { ContoursFragmentShader };

package/map/layers/InterpolationLayer/InterpolationLayer.d.ts

@@ -15,8 +15,8 @@ interface IInterpolationLayerProps {
      */
     gradientStops?: IGradientStop[];
     /**
-     * Number of contour lines. This is a power of 2, between 2 and 256.
-     * If 0, then no contour lines are drawn.
+     * Number of contour lines, clamped to the integer range 0..99 (higher
+     * counts slow rendering). If 0, then no contour lines are drawn.
      * @default 0
      */
     levels?: number;
@@ -26,7 +26,8 @@ interface IInterpolationLayerProps {
      */
     contourColor?: string;
     /**
-     * Thickness of contour lines in pixels.
+     * Thickness of contour lines in pixels, clamped to the range 0..9.
+     * A thickness of 0 draws no contour lines.
      * @default 1
      */
     contourThickness?: number;