@longline/aqua-ui 1.0.339 → 1.0.340

package/map/layers/ParticlesLayer/ParticlesLayer.js

@@ -43,415 +43,544 @@ import { PositionComputeFragmentShader } from './PositionComputeFragmentShader';
 import { RgbColor } from '../../../helper/RgbColor';
 var TEXTURE_WIDTH = 1024;
 var TEXTURE_HEIGHT = 1024;
+// Default prop values, referenced both by the ParticlesLayerBase fallbacks and
+// the ParticlesLayer wrapper below.
+var DEFAULT_PARTICLES = 80;
+var DEFAULT_DENSITY = 40;
+var DEFAULT_DELAY = 0;
+var DEFAULT_POINT_SIZE = 1.0;
+var DEFAULT_MIN_ZOOM = 0;
+var DEFAULT_MAX_ZOOM = 99;
+var DEFAULT_MIN_SPEED = 0.02;
+var DEFAULT_MAX_SPEED = 0.15;
+// Accepted ranges, shared by the component clamps and the story sliders.
+var MIN_PARTICLES = 1;
+var MAX_PARTICLES = 200;
+var MIN_DENSITY = 2; // >= 2 also avoids the density-1 divide-by-zero in the grid.
+var MAX_DENSITY = 100;
+var MAX_DELAY = 10;
+var MIN_POINT_SIZE = 1;
+var MAX_POINT_SIZE = 10;
+var MIN_SPEED = 0;
+var MAX_SPEED = 1;
+var DEFAULT_GRADIENT_STOPS = [
+    { pos: 0.0, color: '#ffffffff' },
+    { pos: 0.25, color: '#5c5cffff' },
+    { pos: 0.5, color: '#5c5cff00' },
+    { pos: 1.0, color: '#5c5cff00' }, // transparent blue
+];
+//
+// 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];
+};
+//
+// Coerce a control value (which may be "" while typing, undefined, or invalid)
+// to a number, or NaN when it is empty/invalid. Note Number("") is 0, so empty
+// strings are handled explicitly rather than silently becoming zero.
+//
+var toNumber = function (value) {
+    if (value === '' || value === null || value === undefined)
+        return NaN;
+    var n = Number(value);
+    return Number.isFinite(n) ? n : NaN;
+};
+//
+// Clamp to an integer in [min, max], falling back to `fallback` on empty/invalid
+// input. Guards buffer/texture sizing and the animation modulo against
+// NaN/degenerate values.
+//
+var clampInt = function (value, fallback, min, max) {
+    var n = toNumber(value);
+    if (Number.isNaN(n))
+        return fallback;
+    return Math.max(min, Math.min(max, Math.floor(n)));
+};
+//
+// Clamp to a (possibly fractional) number in [min, max], falling back to
+// `fallback` on empty/invalid input.
+//
+var clampFloat = function (value, fallback, min, max) {
+    var n = toNumber(value);
+    if (Number.isNaN(n))
+        return fallback;
+    return Math.max(min, Math.min(max, n));
+};
+//
+// Convert an IPoint array to triangles for one field (u or v). Each triangle
+// gets properties a,b,c with the field value at each vertex. Returns the value
+// range and a flat [x,y,value, ...] coordinate array.
+//
+var buildGeometry = function (data, field) {
+    var points = featureCollection((data !== null && data !== void 0 ? data : [])
+        .filter(function (dp) { return !isNaN(dp[field]); }) // Filter out any NaN values.
+        .map(function (dp) { return point([dp.longitude, dp.latitude], { 'v': dp[field] }); }));
+    var polys = tin(points, 'v');
+    // Find min and max values in GeoJSON:
+    var minValue = Infinity;
+    var maxValue = -Infinity;
+    var len = polys.features.length;
+    while (len--) {
+        var properties = polys.features[len].properties;
+        // Each triangle carries three vertex values (a, b, c). A data point may
+        // only ever appear as b or c, so scan all three to find the true range;
+        // otherwise out-of-range vertices normalize outside 0..1 and get clamped
+        // when written to the byte texture.
+        for (var _i = 0, _a = ['a', 'b', 'c']; _i < _a.length; _i++) {
+            var key = _a[_i];
+            var value = properties[key];
+            minValue = value < minValue ? value : minValue;
+            maxValue = value > maxValue ? value : maxValue;
+        }
+    }
+    // Convert dataset to triangle geometry.
+    // Result is a list of v1,v2,v3, v1,v2,v3, ...
+    // where each vector has (x,y,value).
+    var coords = [];
+    var LAT = 1;
+    var LON = 0;
+    // Avoid a 0/0 = NaN normalization when all values are equal.
+    var deltaValue = (maxValue - minValue) || 1;
+    polys.features.map(function (feature) {
+        var coord = MercatorCoordinate.fromLngLat({ lng: feature.geometry.coordinates[0][0][LON], lat: feature.geometry.coordinates[0][0][LAT] });
+        coords.push(coord.x, coord.y, (feature.properties['a'] - minValue) / deltaValue);
+        coord = MercatorCoordinate.fromLngLat({ lng: feature.geometry.coordinates[0][1][LON], lat: feature.geometry.coordinates[0][1][LAT] });
+        coords.push(coord.x, coord.y, (feature.properties['b'] - minValue) / deltaValue);
+        coord = MercatorCoordinate.fromLngLat({ lng: feature.geometry.coordinates[0][2][LON], lat: feature.geometry.coordinates[0][2][LAT] });
+        coords.push(coord.x, coord.y, (feature.properties['c'] - minValue) / deltaValue);
+    });
+    return [minValue, maxValue, coords];
+};
+//
+// Check if two matrices are equal.
+//
+var matricesEqual = function (a, b) {
+    if (!a || !b)
+        return false;
+    for (var i = 0; i < 16; i++) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+};
 var ParticlesLayerBase = function (props) {
     var map = useMap();
-    var uvProgram = React.useRef(null);
-    var particlesProgram = React.useRef(null);
-    var bufferU = React.useRef(null);
-    var bufferV = React.useRef(null);
-    var bufferScreen = React.useRef(null);
-    var numTrianglesU = React.useRef(null);
-    var numTrianglesV = React.useRef(null);
-    var minU = React.useRef(0);
-    var maxU = React.useRef(0);
-    var minV = React.useRef(0);
-    var maxV = React.useRef(0);
-    // Combined UV texture: U in R channel, V in G channel, alpha indicates valid data
-    var textureUV = React.useRef(null);
-    var fboUV = React.useRef(null);
-    // Position texture: stores pre-computed particle positions (X in RG, Y in BA)
-    var positionProgram = React.useRef(null);
-    var texturePosition = React.useRef(null);
-    var fboPosition = React.useRef(null);
-    var bufferQuad = React.useRef(null);
-    // Dynamic position texture dimensions (computed based on density * density * particles)
-    var posTexWidth = React.useRef(0);
-    var posTexHeight = React.useRef(0);
+    // 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;
+    // Animation state is a component-level (not per-generation) concern: it tracks
+    // time, and render reads the current frame each draw.
     var frame = React.useRef(0);
     var skip = React.useRef(0);
-    // requestAnimationFrame ID:
     var animation = React.useRef(null);
-    // Last matrix used to render UV textures (for caching):
-    var lastMatrix = React.useRef(null);
-    // Current time is used to force component rerender when props change:
-    var _a = React.useState(0), time = _a[0], setTime = _a[1];
-    // Force component rerender when props change:
+    // Animation loop: advance the particle frame (respecting delay) and repaint.
     React.useEffect(function () {
-        window.cancelAnimationFrame(animation.current);
-        setTime(Date.now());
-        frame.current = 0;
-        skip.current = 0;
-        lastMatrix.current = null; // Reset matrix cache so UV textures are re-rendered
-        animation.current = window.requestAnimationFrame(draw);
-    }, [props.data, props.gradientStops, props.particles, props.density, props.delay, props.pointSize, props.minSpeed, props.maxSpeed]);
-    var draw = function () {
-        skip.current++;
-        if (skip.current > props.delay) {
-            skip.current = 0;
-            frame.current = (frame.current + 1) % props.particles;
-            map.current.triggerRepaint();
-        }
+        var draw = function () {
+            var _a;
+            var p = propsRef.current;
+            var particles = clampInt(p.particles, DEFAULT_PARTICLES, MIN_PARTICLES, MAX_PARTICLES);
+            var delay = clampInt(p.delay, DEFAULT_DELAY, 0, MAX_DELAY);
+            if (!Number.isFinite(frame.current))
+                frame.current = 0; // Recover from any bad state.
+            skip.current++;
+            if (skip.current > delay) {
+                skip.current = 0;
+                frame.current = (frame.current + 1) % particles;
+                (_a = map.current) === null || _a === void 0 ? void 0 : _a.triggerRepaint();
+            }
+            animation.current = window.requestAnimationFrame(draw);
+        };
         animation.current = window.requestAnimationFrame(draw);
-    };
-    React.useEffect(function () {
         return function () {
-            window.cancelAnimationFrame(animation.current);
+            if (animation.current !== null)
+                window.cancelAnimationFrame(animation.current);
         };
-    }, []);
-    //
-    // 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];
-    };
-    //
-    // Convert IPoint array to triangles. Each triangle will have properties a,b,c 
-    // with a value that corresponds to the [field] key of the input data.
-    //
-    // Returns triangle coords, and also min and max value found.
-    //
-    var getGeometry = function (field) {
-        var _a;
-        // Each poly (triangle) gets a,b,c properties: one depth value for each point.
-        // Convert dataset points to Turf feature collection:
-        var points = featureCollection(((_a = props.data) !== null && _a !== void 0 ? _a : [])
-            .filter(function (dp) { return !isNaN(dp[field]); }) // Filter out any NaN values.
-            .map(function (dp) {
-            return point([dp.longitude, dp.latitude], { 'v': dp[field] });
-        }));
-        var polys = tin(points, 'v');
-        // Find min and max values in GeoJSON:
-        var minValue = Infinity;
-        var maxValue = -Infinity;
-        var len = polys.features.length;
-        while (len--) {
-            var value = polys.features[len].properties['a'];
-            minValue = value < minValue ? value : minValue;
-            maxValue = value > maxValue ? value : maxValue;
-        }
-        // Convert dataset to triangle geometry.
-        // Result is a list of v1,v2,v3, v1,v2,v3, ...
-        // where each vector has (x,y,value).
-        var coords = [];
-        var LAT = 1;
-        var LON = 0;
-        var deltaValue = maxValue - minValue;
-        polys.features.map(function (feature) {
-            var coord = MercatorCoordinate.fromLngLat({ lng: feature.geometry.coordinates[0][0][LON], lat: feature.geometry.coordinates[0][0][LAT] });
-            coords.push(coord.x, coord.y, (feature.properties['a'] - minValue) / deltaValue);
-            coord = MercatorCoordinate.fromLngLat({ lng: feature.geometry.coordinates[0][1][LON], lat: feature.geometry.coordinates[0][1][LAT] });
-            coords.push(coord.x, coord.y, (feature.properties['b'] - minValue) / deltaValue);
-            coord = MercatorCoordinate.fromLngLat({ lng: feature.geometry.coordinates[0][2][LON], lat: feature.geometry.coordinates[0][2][LAT] });
-            coords.push(coord.x, coord.y, (feature.properties['c'] - minValue) / deltaValue);
-        });
-        return [minValue, maxValue, coords];
-    };
-    // Geometries are only calculated when data changes:
-    var getGeometryU = React.useMemo(function () { return getGeometry("u"); }, [props.data]);
-    var getGeometryV = React.useMemo(function () { return getGeometry("v"); }, [props.data]);
-    var createUVProgram = function (gl) {
-        // create a vertex shader
-        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
-        gl.shaderSource(vertexShader, UVVertexShader);
-        gl.compileShader(vertexShader);
-        // create a fragment shader
-        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-        gl.shaderSource(fragmentShader, UVFragmentShader);
-        gl.compileShader(fragmentShader);
-        // link the two shaders into a WebGL program
-        uvProgram.current = gl.createProgram();
-        gl.attachShader(uvProgram.current, vertexShader);
-        gl.attachShader(uvProgram.current, fragmentShader);
-        gl.linkProgram(uvProgram.current);
-    };
-    var createParticlesProgram = function (gl) {
-        // create a vertex shader
-        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
-        gl.shaderSource(vertexShader, ParticlesVertexShader);
-        gl.compileShader(vertexShader);
-        // create a fragment shader
-        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-        gl.shaderSource(fragmentShader, ParticlesFragmentShader);
-        gl.compileShader(fragmentShader);
-        // link the two shaders into a WebGL program
-        particlesProgram.current = gl.createProgram();
-        gl.attachShader(particlesProgram.current, vertexShader);
-        gl.attachShader(particlesProgram.current, fragmentShader);
-        gl.linkProgram(particlesProgram.current);
-    };
-    var createPositionComputeProgram = function (gl) {
-        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
-        gl.shaderSource(vertexShader, PositionComputeVertexShader);
-        gl.compileShader(vertexShader);
-        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-        gl.shaderSource(fragmentShader, PositionComputeFragmentShader);
-        gl.compileShader(fragmentShader);
-        positionProgram.current = gl.createProgram();
-        gl.attachShader(positionProgram.current, vertexShader);
-        gl.attachShader(positionProgram.current, fragmentShader);
-        gl.linkProgram(positionProgram.current);
-    };
-    var createPositionTexture = function (gl) {
-        // Compute texture dimensions to fit all particles
-        // Total particles = density * density * particles
-        var totalParticles = props.density * props.density * props.particles;
-        // Find suitable texture dimensions (width should be power of 2 for compatibility)
-        // Use a width that balances the texture shape
-        var width = 256;
-        while (width * width < totalParticles) {
-            width *= 2;
-        }
-        var height = Math.ceil(totalParticles / width);
-        posTexWidth.current = width;
-        posTexHeight.current = height;
-        var texture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-        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);
-        return texture;
-    };
-    var createQuadBuffer = function (gl) {
-        // Full-screen quad (two triangles covering clip space)
-        bufferQuad.current = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, bufferQuad.current);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-            -1, -1,
-            1, -1,
-            -1, 1,
-            -1, 1,
-            1, -1,
-            1, 1
-        ]), gl.STATIC_DRAW);
-    };
-    var createBufferU = function (gl) {
-        var min = getGeometryU[0], max = getGeometryU[1], geometry = getGeometryU[2];
-        minU.current = min;
-        maxU.current = max;
-        numTrianglesU.current = geometry.length / 9;
-        // Create and initialize a WebGLBuffer to store vertex data.
-        // Each element will have 3 components (x,y,value).
-        bufferU.current = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, bufferU.current);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(geometry), gl.STATIC_DRAW);
-    };
-    var createBufferV = function (gl) {
-        var min = getGeometryV[0], max = getGeometryV[1], geometry = getGeometryV[2];
-        minV.current = min;
-        maxV.current = max;
-        numTrianglesV.current = geometry.length / 9;
-        // Create and initialize a WebGLBuffer to store vertex data.
-        // Each element will have 3 components (x,y,value).
-        bufferV.current = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, bufferV.current);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(geometry), gl.STATIC_DRAW);
-    };
-    var createBufferScreen = function (gl) {
-        bufferScreen.current = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, bufferScreen.current);
-        // Each point has a screen coordinate in range [-1..1]
-        var coords = [];
-        for (var y = 0; y < props.density; y++) {
-            for (var x = 0; x < props.density; x++) {
-                var offset = Math.floor(Math.random() * props.particles);
-                // Each point has a number of particles:
-                for (var i = 0; i < props.particles; i++) {
-                    coords.push(x * 1.98 / (props.density - 1) - 0.99);
-                    coords.push(y * 1.98 / (props.density - 1) - 0.99);
-                    // Each point has an instance index
-                    coords.push(i);
-                    // Each point has a frame offset.
-                    coords.push(offset);
+    }, [map]);
+    // Triangulation only depends on data; keep it memoized so tweaking density,
+    // particle count or speed does not re-run the (expensive) tin() pass.
+    var geometry = React.useMemo(function () { return ({
+        u: buildGeometry(props.data, 'u'),
+        v: buildGeometry(props.data, 'v'),
+    }); }, [props.data]);
+    // Build a fresh custom layer — with its own private WebGL resource holder —
+    // whenever an input that requires re-initialising GL state changes (geometry,
+    // density, particle count, or the speed remapping baked into the position
+    // texture). 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 = 'particles-' + Math.random().toString(36).slice(2);
+        // Private per-generation GL resources.
+        var uvProgram = null;
+        var particlesProgram = null;
+        var positionProgram = null;
+        var bufferU = null;
+        var bufferV = null;
+        var bufferScreen = null;
+        var bufferQuad = null;
+        var textureUV = null;
+        var fboUV = null;
+        var texturePosition = null;
+        var fboPosition = null;
+        var numTrianglesU = 0;
+        var numTrianglesV = 0;
+        var minU = 0;
+        var maxU = 0;
+        var minV = 0;
+        var maxV = 0;
+        var posTexWidth = 0;
+        var posTexHeight = 0;
+        var lastMatrix = null;
+        var removed = false;
+        // Grid parameters are baked into the buffers/textures below, so they are
+        // fixed for this generation (a change rebuilds a new generation). Clamped
+        // so a transient empty/invalid value never produces degenerate GL state.
+        var particles = clampInt(props.particles, DEFAULT_PARTICLES, MIN_PARTICLES, MAX_PARTICLES);
+        var density = clampInt(props.density, DEFAULT_DENSITY, MIN_DENSITY, MAX_DENSITY);
+        var createUVProgram = function (gl) {
+            var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+            gl.shaderSource(vertexShader, UVVertexShader);
+            gl.compileShader(vertexShader);
+            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+            gl.shaderSource(fragmentShader, UVFragmentShader);
+            gl.compileShader(fragmentShader);
+            uvProgram = gl.createProgram();
+            gl.attachShader(uvProgram, vertexShader);
+            gl.attachShader(uvProgram, fragmentShader);
+            gl.linkProgram(uvProgram);
+            // Shaders are linked into the program now; flag them for deletion.
+            gl.deleteShader(vertexShader);
+            gl.deleteShader(fragmentShader);
+        };
+        var createParticlesProgram = function (gl) {
+            var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+            gl.shaderSource(vertexShader, ParticlesVertexShader);
+            gl.compileShader(vertexShader);
+            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+            gl.shaderSource(fragmentShader, ParticlesFragmentShader);
+            gl.compileShader(fragmentShader);
+            particlesProgram = gl.createProgram();
+            gl.attachShader(particlesProgram, vertexShader);
+            gl.attachShader(particlesProgram, fragmentShader);
+            gl.linkProgram(particlesProgram);
+            // Shaders are linked into the program now; flag them for deletion.
+            gl.deleteShader(vertexShader);
+            gl.deleteShader(fragmentShader);
+        };
+        var createPositionComputeProgram = function (gl) {
+            var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+            gl.shaderSource(vertexShader, PositionComputeVertexShader);
+            gl.compileShader(vertexShader);
+            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+            gl.shaderSource(fragmentShader, PositionComputeFragmentShader);
+            gl.compileShader(fragmentShader);
+            positionProgram = gl.createProgram();
+            gl.attachShader(positionProgram, vertexShader);
+            gl.attachShader(positionProgram, fragmentShader);
+            gl.linkProgram(positionProgram);
+            // Shaders are linked into the program now; flag them for deletion.
+            gl.deleteShader(vertexShader);
+            gl.deleteShader(fragmentShader);
+        };
+        var createPositionTexture = function (gl) {
+            // Compute texture dimensions to fit all particles.
+            // Total particles = density * density * particles
+            var totalParticles = density * density * particles;
+            // Find suitable texture dimensions (width should be power of 2).
+            var width = 256;
+            while (width * width < totalParticles) {
+                width *= 2;
+            }
+            var height = Math.ceil(totalParticles / width);
+            posTexWidth = width;
+            posTexHeight = height;
+            var texture = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+            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);
+            return texture;
+        };
+        var createQuadBuffer = function (gl) {
+            // Full-screen quad (two triangles covering clip space)
+            bufferQuad = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, bufferQuad);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+                -1, -1,
+                1, -1,
+                -1, 1,
+                -1, 1,
+                1, -1,
+                1, 1
+            ]), gl.STATIC_DRAW);
+        };
+        var createBufferU = function (gl) {
+            var _a = geometry.u, min = _a[0], max = _a[1], geo = _a[2];
+            minU = min;
+            maxU = max;
+            numTrianglesU = geo.length / 9;
+            bufferU = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, bufferU);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(geo), gl.STATIC_DRAW);
+        };
+        var createBufferV = function (gl) {
+            var _a = geometry.v, min = _a[0], max = _a[1], geo = _a[2];
+            minV = min;
+            maxV = max;
+            numTrianglesV = geo.length / 9;
+            bufferV = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, bufferV);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(geo), gl.STATIC_DRAW);
+        };
+        var createBufferScreen = function (gl) {
+            bufferScreen = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, bufferScreen);
+            // Each point has a screen coordinate in range [-1..1]
+            var coords = [];
+            for (var y = 0; y < density; y++) {
+                for (var x = 0; x < density; x++) {
+                    var offset = Math.floor(Math.random() * particles);
+                    // Each point has a number of particles:
+                    for (var i = 0; i < particles; i++) {
+                        coords.push(x * 1.98 / (density - 1) - 0.99);
+                        coords.push(y * 1.98 / (density - 1) - 0.99);
+                        // Each point has an instance index
+                        coords.push(i);
+                        // Each point has a frame offset.
+                        coords.push(offset);
+                    }
                 }
             }
-        }
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(coords), gl.STATIC_DRAW);
-    };
-    var createTexture = function (gl) {
-        var texture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        // Define size and format of level 0:
-        var level = 0;
-        var internalFormat = gl.RGBA;
-        var border = 0;
-        var format = gl.RGBA;
-        var type = gl.UNSIGNED_BYTE;
-        gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, TEXTURE_WIDTH, TEXTURE_HEIGHT, border, format, type, null);
-        // Set filtering to NEAREST so there's no interpolation:
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-        return texture;
-    };
-    var createFrameBuffer = function (gl, texture) {
-        // Create and bind the framebuffer:
-        var fbo = gl.createFramebuffer();
-        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
-        // Attach the texture as the first color attachment:
-        var attachmentPoint = gl.COLOR_ATTACHMENT0;
-        gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, texture, 0);
-        return fbo;
-    };
-    var onAddLayer = function (map, gl) {
-        createBufferU(gl);
-        createBufferV(gl);
-        createBufferScreen(gl);
-        createQuadBuffer(gl);
-        createUVProgram(gl);
-        createParticlesProgram(gl);
-        createPositionComputeProgram(gl);
-        // Single combined texture for both U and V (U in R, V in G)
-        textureUV.current = createTexture(gl);
-        fboUV.current = createFrameBuffer(gl, textureUV.current);
-        // Position texture for pre-computed particle positions
-        texturePosition.current = createPositionTexture(gl);
-        fboPosition.current = createFrameBuffer(gl, texturePosition.current);
-    };
-    var renderSpeedBuffer = function (gl, matrix, buffer, numTriangles) {
-        gl.useProgram(uvProgram.current);
-        // Pass a matrix uniform in:
-        gl.uniformMatrix4fv(gl.getUniformLocation(uvProgram.current, 'u_matrix'), false, matrix);
-        // Vertices:
-        var aPos = gl.getAttribLocation(uvProgram.current, 'a_pos');
-        var aValue = gl.getAttribLocation(uvProgram.current, 'a_value');
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        gl.enableVertexAttribArray(aPos);
-        gl.enableVertexAttribArray(aValue);
-        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 12, 0);
-        gl.vertexAttribPointer(aValue, 1, gl.FLOAT, false, 12, 8);
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-        gl.drawArrays(gl.TRIANGLES, 0, numTriangles * 3);
-    };
-    //
-    // Render particle positions to the position texture.
-    // This moves the expensive trace loop from the particle vertex shader
-    // to a one-time-per-view-change fragment shader pass.
-    //
-    var renderPositionTexture = function (gl) {
-        gl.useProgram(positionProgram.current);
-        // Bind position framebuffer
-        gl.bindFramebuffer(gl.FRAMEBUFFER, fboPosition.current);
-        gl.viewport(0, 0, posTexWidth.current, posTexHeight.current);
-        gl.clearColor(0, 0, 0, 0);
-        gl.clear(gl.COLOR_BUFFER_BIT);
-        // Disable blending for position computation
-        gl.disable(gl.BLEND);
-        // UV texture (already rendered)
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, textureUV.current);
-        gl.uniform1i(gl.getUniformLocation(positionProgram.current, 'uvTexture'), 0);
-        // UV range uniforms
-        gl.uniform1f(gl.getUniformLocation(positionProgram.current, 'minU'), minU.current);
-        gl.uniform1f(gl.getUniformLocation(positionProgram.current, 'maxU'), maxU.current);
-        gl.uniform1f(gl.getUniformLocation(positionProgram.current, 'minV'), minV.current);
-        gl.uniform1f(gl.getUniformLocation(positionProgram.current, 'maxV'), maxV.current);
-        // Grid parameters
-        gl.uniform1f(gl.getUniformLocation(positionProgram.current, 'u_density'), props.density);
-        gl.uniform1f(gl.getUniformLocation(positionProgram.current, 'u_particles'), props.particles);
-        gl.uniform1f(gl.getUniformLocation(positionProgram.current, 'u_texWidth'), posTexWidth.current);
-        // Velocity magnitude remapping parameters
-        gl.uniform1f(gl.getUniformLocation(positionProgram.current, 'u_minVisMag'), props.minSpeed);
-        gl.uniform1f(gl.getUniformLocation(positionProgram.current, 'u_maxVisMag'), props.maxSpeed);
-        // Render full-screen quad
-        var aPos = gl.getAttribLocation(positionProgram.current, 'a_pos');
-        gl.bindBuffer(gl.ARRAY_BUFFER, bufferQuad.current);
-        gl.enableVertexAttribArray(aPos);
-        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
-        gl.drawArrays(gl.TRIANGLES, 0, 6);
-    };
-    var renderParticles = function (gl, matrix) {
-        gl.useProgram(particlesProgram.current);
-        // Matrix: 
-        gl.uniformMatrix4fv(gl.getUniformLocation(particlesProgram.current, 'u_matrix'), false, matrix);
-        // 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(particlesProgram.current, 'u_gradientStops'), new Float32Array(stops));
-        var colors = props.gradientStops.map(function (s) { return colorToRGBA(s.color); }).flat();
-        gl.uniform4fv(gl.getUniformLocation(particlesProgram.current, 'u_gradientColors'), new Float32Array(colors));
-        // Current animation frame:
-        gl.uniform1i(gl.getUniformLocation(particlesProgram.current, "u_frame"), Math.floor(frame.current));
-        // Number of point instances - this is the length of each curve:
-        gl.uniform1i(gl.getUniformLocation(particlesProgram.current, "u_num_instances"), props.particles);
-        // Size of points to be drawn (in pixels).
-        gl.uniform1f(gl.getUniformLocation(particlesProgram.current, "u_point_size"), props.pointSize);
-        // Position texture (pre-computed particle positions):
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, texturePosition.current);
-        gl.uniform1i(gl.getUniformLocation(particlesProgram.current, "positionTexture"), 0);
-        // Position texture dimensions and grid parameters for coordinate lookup:
-        gl.uniform1f(gl.getUniformLocation(particlesProgram.current, "u_posTexWidth"), posTexWidth.current);
-        gl.uniform1f(gl.getUniformLocation(particlesProgram.current, "u_posTexHeight"), posTexHeight.current);
-        gl.uniform1f(gl.getUniformLocation(particlesProgram.current, "u_density"), props.density);
-        // Vertices:
-        var aPos = gl.getAttribLocation(particlesProgram.current, 'a_pos'); // on-screen position [-1..1]
-        var aIdx = gl.getAttribLocation(particlesProgram.current, 'a_idx'); // particle index
-        var aOffset = gl.getAttribLocation(particlesProgram.current, 'a_offset'); // animation offset (into index)
-        gl.bindBuffer(gl.ARRAY_BUFFER, bufferScreen.current);
-        gl.enableVertexAttribArray(aPos);
-        gl.enableVertexAttribArray(aIdx);
-        gl.enableVertexAttribArray(aOffset);
-        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
-        gl.vertexAttribPointer(aIdx, 1, gl.FLOAT, false, 16, 8);
-        gl.vertexAttribPointer(aOffset, 1, gl.FLOAT, false, 16, 12);
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-        gl.drawArrays(gl.POINTS, 0, props.density * props.density * props.particles);
-    };
-    //
-    // Check if two matrices are equal.
-    //
-    var matricesEqual = function (a, b) {
-        if (!a || !b)
-            return false;
-        for (var i = 0; i < 16; i++) {
-            if (a[i] !== b[i])
-                return false;
-        }
-        return true;
-    };
-    var onRender = function (gl, matrix, zoom, width, height) {
-        if (zoom < props.minZoom)
-            return;
-        if (zoom > props.maxZoom)
-            return;
-        // Only re-render UV textures when the matrix changes (i.e., when the map
-        // view changes due to panning or zooming). This is a significant performance
-        // optimization since UV texture rendering involves expensive draw calls.
-        var matrixChanged = !matricesEqual(matrix, lastMatrix.current);
-        if (matrixChanged) {
-            lastMatrix.current = __spreadArray([], matrix, true);
-            gl.useProgram(uvProgram.current);
-            // Render to combined UV texture (U in R channel, V in G channel)
-            gl.bindFramebuffer(gl.FRAMEBUFFER, fboUV.current);
-            gl.viewport(0, 0, TEXTURE_WIDTH, TEXTURE_HEIGHT);
-            gl.clearColor(0, 0, 0, 0); // clear to transparent
-            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-            // Render U to R channel and A channel (alpha indicates valid data)
-            gl.colorMask(true, false, false, true);
-            renderSpeedBuffer(gl, matrix, bufferU.current, numTrianglesU.current);
-            // Render V to G channel only (preserve R and A from U pass)
-            gl.colorMask(false, true, false, false);
-            renderSpeedBuffer(gl, matrix, bufferV.current, numTrianglesV.current);
-            // Reset color mask to default
-            gl.colorMask(true, true, true, true);
-            // Compute particle positions (moves expensive loop from vertex shader)
-            renderPositionTexture(gl);
-        }
-        // Unbind framebuffer so we're rendering to the screen:
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        // Reset the viewport size to equal the map size:
-        gl.viewport(0, 0, width * window.devicePixelRatio, height * window.devicePixelRatio);
-        // Render particles:
-        renderParticles(gl, matrix);
-    };
-    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); } }));
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(coords), gl.STATIC_DRAW);
+        };
+        var createTexture = function (gl) {
+            var texture = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, TEXTURE_WIDTH, TEXTURE_HEIGHT, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+            // Set filtering to NEAREST so there's no interpolation:
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+            return texture;
+        };
+        var createFrameBuffer = function (gl, texture) {
+            var fbo = gl.createFramebuffer();
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+            return fbo;
+        };
+        var onAdd = function (mbMap, gl) {
+            createBufferU(gl);
+            createBufferV(gl);
+            createBufferScreen(gl);
+            createQuadBuffer(gl);
+            createUVProgram(gl);
+            createParticlesProgram(gl);
+            createPositionComputeProgram(gl);
+            // Single combined texture for both U and V (U in R, V in G)
+            textureUV = createTexture(gl);
+            fboUV = createFrameBuffer(gl, textureUV);
+            // Position texture for pre-computed particle positions
+            texturePosition = createPositionTexture(gl);
+            fboPosition = createFrameBuffer(gl, texturePosition);
+            // The map is idle after a prop-driven remount, so force a repaint to draw
+            // the freshly-added layer (the animation loop will keep it going).
+            mbMap.triggerRepaint();
+        };
+        var renderSpeedBuffer = function (gl, matrix, buffer, numTriangles) {
+            var program = uvProgram;
+            gl.useProgram(program);
+            // Pass a matrix uniform in:
+            gl.uniformMatrix4fv(gl.getUniformLocation(program, 'u_matrix'), false, matrix);
+            // Vertices:
+            var aPos = gl.getAttribLocation(program, 'a_pos');
+            var aValue = gl.getAttribLocation(program, 'a_value');
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(aPos);
+            gl.enableVertexAttribArray(aValue);
+            gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 12, 0);
+            gl.vertexAttribPointer(aValue, 1, gl.FLOAT, false, 12, 8);
+            gl.enable(gl.BLEND);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            gl.drawArrays(gl.TRIANGLES, 0, numTriangles * 3);
+            // Attribute-array enable state is global in WebGL1; disable what we
+            // enabled so a later draw with fewer attributes can't reference a
+            // stale (freed) buffer left bound to a still-enabled index.
+            gl.disableVertexAttribArray(aPos);
+            gl.disableVertexAttribArray(aValue);
+        };
+        //
+        // Render particle positions to the position texture.
+        // This moves the expensive trace loop from the particle vertex shader
+        // to a one-time-per-view-change fragment shader pass.
+        //
+        var renderPositionTexture = function (gl) {
+            var p = propsRef.current;
+            var program = positionProgram;
+            gl.useProgram(program);
+            // Bind position framebuffer
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fboPosition);
+            gl.viewport(0, 0, posTexWidth, posTexHeight);
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            // Disable blending for position computation
+            gl.disable(gl.BLEND);
+            // UV texture (already rendered)
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, textureUV);
+            gl.uniform1i(gl.getUniformLocation(program, 'uvTexture'), 0);
+            // UV range uniforms
+            gl.uniform1f(gl.getUniformLocation(program, 'minU'), minU);
+            gl.uniform1f(gl.getUniformLocation(program, 'maxU'), maxU);
+            gl.uniform1f(gl.getUniformLocation(program, 'minV'), minV);
+            gl.uniform1f(gl.getUniformLocation(program, 'maxV'), maxV);
+            // Grid parameters
+            gl.uniform1f(gl.getUniformLocation(program, 'u_density'), density);
+            gl.uniform1f(gl.getUniformLocation(program, 'u_particles'), particles);
+            gl.uniform1f(gl.getUniformLocation(program, 'u_texWidth'), posTexWidth);
+            // Velocity magnitude remapping parameters
+            gl.uniform1f(gl.getUniformLocation(program, 'u_minVisMag'), clampFloat(p.minSpeed, DEFAULT_MIN_SPEED, MIN_SPEED, MAX_SPEED));
+            gl.uniform1f(gl.getUniformLocation(program, 'u_maxVisMag'), clampFloat(p.maxSpeed, DEFAULT_MAX_SPEED, MIN_SPEED, MAX_SPEED));
+            // Render full-screen quad
+            var aPos = gl.getAttribLocation(program, 'a_pos');
+            gl.bindBuffer(gl.ARRAY_BUFFER, bufferQuad);
+            gl.enableVertexAttribArray(aPos);
+            gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+            gl.disableVertexAttribArray(aPos);
+        };
+        var renderParticles = function (gl, matrix) {
+            var _a;
+            var p = propsRef.current;
+            var program = particlesProgram;
+            gl.useProgram(program);
+            // Matrix:
+            gl.uniformMatrix4fv(gl.getUniformLocation(program, 'u_matrix'), false, matrix);
+            // 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 gradientStops = (_a = p.gradientStops) !== null && _a !== void 0 ? _a : DEFAULT_GRADIENT_STOPS;
+            var stops = __spreadArray([], gradientStops.map(function (s) { return s.pos; }), true);
+            while (stops.length < 12)
+                stops.push(2.0);
+            gl.uniform1fv(gl.getUniformLocation(program, 'u_gradientStops'), new Float32Array(stops));
+            var colors = gradientStops.map(function (s) { return colorToRGBA(s.color); }).flat();
+            gl.uniform4fv(gl.getUniformLocation(program, 'u_gradientColors'), new Float32Array(colors));
+            // Current animation frame:
+            gl.uniform1i(gl.getUniformLocation(program, 'u_frame'), Math.floor(frame.current));
+            // Number of point instances - this is the length of each curve:
+            gl.uniform1i(gl.getUniformLocation(program, 'u_num_instances'), particles);
+            // Size of points to be drawn (in pixels).
+            gl.uniform1f(gl.getUniformLocation(program, 'u_point_size'), clampFloat(p.pointSize, DEFAULT_POINT_SIZE, MIN_POINT_SIZE, MAX_POINT_SIZE));
+            // Position texture (pre-computed particle positions):
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, texturePosition);
+            gl.uniform1i(gl.getUniformLocation(program, 'positionTexture'), 0);
+            // Position texture dimensions and grid parameters for coordinate lookup:
+            gl.uniform1f(gl.getUniformLocation(program, 'u_posTexWidth'), posTexWidth);
+            gl.uniform1f(gl.getUniformLocation(program, 'u_posTexHeight'), posTexHeight);
+            gl.uniform1f(gl.getUniformLocation(program, 'u_density'), density);
+            // Vertices:
+            var aPos = gl.getAttribLocation(program, 'a_pos'); // on-screen position [-1..1]
+            var aIdx = gl.getAttribLocation(program, 'a_idx'); // particle index
+            var aOffset = gl.getAttribLocation(program, 'a_offset'); // animation offset (into index)
+            gl.bindBuffer(gl.ARRAY_BUFFER, bufferScreen);
+            gl.enableVertexAttribArray(aPos);
+            gl.enableVertexAttribArray(aIdx);
+            gl.enableVertexAttribArray(aOffset);
+            gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
+            gl.vertexAttribPointer(aIdx, 1, gl.FLOAT, false, 16, 8);
+            gl.vertexAttribPointer(aOffset, 1, gl.FLOAT, false, 16, 12);
+            gl.enable(gl.BLEND);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            gl.drawArrays(gl.POINTS, 0, density * density * particles);
+            gl.disableVertexAttribArray(aPos);
+            gl.disableVertexAttribArray(aIdx);
+            gl.disableVertexAttribArray(aOffset);
+        };
+        var render = function (gl, matrix) {
+            var _a, _b;
+            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;
+            var width = m.getContainer().clientWidth;
+            var height = m.getContainer().clientHeight;
+            // Only re-render UV textures when the matrix changes (i.e., when the map
+            // view changes due to panning or zooming). This is a significant
+            // performance optimization since UV texture rendering involves expensive
+            // draw calls.
+            var matrixChanged = !matricesEqual(matrix, lastMatrix);
+            if (matrixChanged) {
+                lastMatrix = __spreadArray([], matrix, true);
+                gl.useProgram(uvProgram);
+                // Render to combined UV texture (U in R channel, V in G channel)
+                gl.bindFramebuffer(gl.FRAMEBUFFER, fboUV);
+                gl.viewport(0, 0, TEXTURE_WIDTH, TEXTURE_HEIGHT);
+                gl.clearColor(0, 0, 0, 0); // clear to transparent
+                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+                // Render U to R channel and A channel (alpha indicates valid data)
+                gl.colorMask(true, false, false, true);
+                renderSpeedBuffer(gl, matrix, bufferU, numTrianglesU);
+                // Render V to G channel only (preserve R and A from U pass)
+                gl.colorMask(false, true, false, false);
+                renderSpeedBuffer(gl, matrix, bufferV, numTrianglesV);
+                // Reset color mask to default
+                gl.colorMask(true, true, true, true);
+                // Compute particle positions (moves expensive loop from vertex shader)
+                renderPositionTexture(gl);
+            }
+            // Unbind framebuffer so we're rendering to the screen:
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            // Reset the viewport size to equal the map size:
+            gl.viewport(0, 0, width * window.devicePixelRatio, height * window.devicePixelRatio);
+            // Render particles:
+            renderParticles(gl, matrix);
+        };
+        // 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(uvProgram);
+            gl.deleteProgram(particlesProgram);
+            gl.deleteProgram(positionProgram);
+            gl.deleteBuffer(bufferU);
+            gl.deleteBuffer(bufferV);
+            gl.deleteBuffer(bufferScreen);
+            gl.deleteBuffer(bufferQuad);
+            gl.deleteTexture(textureUV);
+            gl.deleteTexture(texturePosition);
+            gl.deleteFramebuffer(fboUV);
+            gl.deleteFramebuffer(fboPosition);
+            uvProgram = null;
+            particlesProgram = null;
+            positionProgram = null;
+            bufferU = null;
+            bufferV = null;
+            bufferScreen = null;
+            bufferQuad = null;
+            textureUV = null;
+            texturePosition = null;
+            fboUV = null;
+            fboPosition = null;
+        };
+        return { id: id, onAdd: onAdd, render: render, onRemove: onRemove };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [geometry, props.density, props.particles, props.minSpeed, props.maxSpeed]);
+    return (React.createElement(Layer, { id: layer.id, key: layer.id, type: "custom", beforeId: "overlay", onAdd: layer.onAdd, onRemove: layer.onRemove, render: layer.render }));
 };
 /**
  * A WebGL-based Mapbox GL custom layer that visualizes vector flow fields (such as
@@ -538,12 +667,7 @@ var ParticlesLayerBase = function (props) {
  * - Changing props triggers a full re-initialization of the WebGL resources
  */
 var ParticlesLayer = function (_a) {
-    var _b = _a.particles, particles = _b === void 0 ? 80 : _b, _c = _a.density, density = _c === void 0 ? 40 : _c, _d = _a.delay, delay = _d === void 0 ? 0 : _d, _e = _a.gradientStops, gradientStops = _e === void 0 ? [
-        { pos: 0.0, color: '#ffffffff' },
-        { pos: 0.25, color: '#5c5cffff' },
-        { pos: 0.5, color: '#5c5cff00' },
-        { pos: 1.0, color: '#5c5cff00' }, // transparent blue
-    ] : _e, _f = _a.minZoom, minZoom = _f === void 0 ? 0 : _f, _g = _a.maxZoom, maxZoom = _g === void 0 ? 99 : _g, _h = _a.minSpeed, minSpeed = _h === void 0 ? 0.02 : _h, _j = _a.maxSpeed, maxSpeed = _j === void 0 ? 0.15 : _j, props = __rest(_a, ["particles", "density", "delay", "gradientStops", "minZoom", "maxZoom", "minSpeed", "maxSpeed"]);
+    var _b = _a.particles, particles = _b === void 0 ? DEFAULT_PARTICLES : _b, _c = _a.density, density = _c === void 0 ? DEFAULT_DENSITY : _c, _d = _a.delay, delay = _d === void 0 ? DEFAULT_DELAY : _d, _e = _a.gradientStops, gradientStops = _e === void 0 ? DEFAULT_GRADIENT_STOPS : _e, _f = _a.minZoom, minZoom = _f === void 0 ? DEFAULT_MIN_ZOOM : _f, _g = _a.maxZoom, maxZoom = _g === void 0 ? DEFAULT_MAX_ZOOM : _g, _h = _a.minSpeed, minSpeed = _h === void 0 ? DEFAULT_MIN_SPEED : _h, _j = _a.maxSpeed, maxSpeed = _j === void 0 ? DEFAULT_MAX_SPEED : _j, props = __rest(_a, ["particles", "density", "delay", "gradientStops", "minZoom", "maxZoom", "minSpeed", "maxSpeed"]);
     return React.createElement(ParticlesLayerBase, __assign({ particles: particles, density: density, gradientStops: gradientStops, delay: delay, minZoom: minZoom, maxZoom: maxZoom, minSpeed: minSpeed, maxSpeed: maxSpeed }, props));
 };
 ParticlesLayer.displayName = 'ParticlesLayer';