@longline/aqua-ui 1.0.339 → 1.0.340

package/map/layers/InterpolationLayer/InterpolationLayer.js

@@ -43,283 +43,370 @@ import { DotsVertexShader } from './DotsVertexShader';
 import { DotsFragmentShader } from './DotsFragmentShader';
 var TEXTURE_WIDTH = 1024;
 var TEXTURE_HEIGHT = 1024;
+// Default prop values, referenced both by the InterpolationLayerBase fallbacks
+// and the InterpolationLayer wrapper below.
+var DEFAULT_LEVELS = 0;
+var MAX_LEVELS = 99;
+var DEFAULT_CONTOUR_COLOR = '#35ABE2';
+var DEFAULT_CONTOUR_THICKNESS = 1;
+var MAX_CONTOUR_THICKNESS = 9;
+var DEFAULT_MIN_ZOOM = 0;
+var DEFAULT_MAX_ZOOM = 99;
+//
+// Clamp the contour count to a safe non-negative integer (0..MAX_LEVELS). Guards
+// against empty/negative/fractional/runaway values reaching the shader.
+//
+var clampLevels = function (value) {
+    var n = Math.floor(Number(value));
+    if (!Number.isFinite(n))
+        return DEFAULT_LEVELS;
+    return Math.max(0, Math.min(MAX_LEVELS, n));
+};
+//
+// Clamp the contour line thickness (in pixels) to 0..MAX_CONTOUR_THICKNESS.
+// Fractional widths are allowed. Guards against empty/negative/NaN values.
+//
+var clampThickness = function (value) {
+    var n = Number(value);
+    if (!Number.isFinite(n))
+        return DEFAULT_CONTOUR_THICKNESS;
+    return Math.max(0, Math.min(MAX_CONTOUR_THICKNESS, n));
+};
+//
+// 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 InterpolationLayerBase = function (props) {
     var map = useMap();
-    var levelsProgram = React.useRef(null);
-    var contoursProgram = React.useRef(null);
-    var dotsProgram = React.useRef(null);
-    var levelsBuffer = React.useRef(null);
-    var contoursBuffer = React.useRef(null);
-    var fbo = React.useRef(null);
-    var numTriangles = React.useRef(0);
-    var texture = React.useRef(null);
-    var _a = React.useState(0), time = _a[0], setTime = _a[1];
-    // When properties change, make sure that layer is redrawn.
-    // Do this by varying its `key` with the current time.
+    // 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 the data changes (the only input that requires re-triangulating and
+    // re-uploading GL state). 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 = 'interp-' + Math.random().toString(36).slice(2);
+        // Private per-generation GL resources.
+        var levelsProgram = null;
+        var contoursProgram = null;
+        var dotsProgram = null;
+        var levelsBuffer = null;
+        var contoursBuffer = null;
+        var fbo = null;
+        var numTriangles = 0;
+        var texture = null;
+        var removed = false;
+        var data = props.data;
+        //
+        // Convert IPoint array to polygons.
+        //
+        var getGeometry = function () {
+            // Each poly (triangle) gets a,b,c properties: one depth value for each point.
+            // Convert dataset points to Turf feature collection:
+            var points = featureCollection((data !== null && data !== void 0 ? data : [])
+                .filter(function (dp) { return !isNaN(dp.value); }) // Filter out any NaN values.
+                .map(function (dp) {
+                return point([dp.longitude, dp.latitude], { 'v': dp.value });
+            }));
+            var polys = tin(points, 'v');
+            /* // Calculate average side length of triangles.
+            let total = 0;
+            polys.features.forEach(p => {
+              const a = p.geometry.coordinates[0][0];
+              const b = p.geometry.coordinates[0][1];
+              const c = p.geometry.coordinates[0][2];
+              const d1 = Math.sqrt((a[0] - b[0])*(a[0]-b[0]) + (a[1] - b[1]) * (a[1] - b[1]));
+              const d2 = Math.sqrt((b[0] - c[0])*(b[0]-c[0]) + (b[1] - c[1]) * (b[1] - c[1]));
+              const d3 = Math.sqrt((a[0] - c[0])*(a[0]-c[0]) + (a[1] - c[1]) * (a[1] - c[1]));
+              const avg = (d1 + d2 + d3) / 3;
+              total += avg;
+            });
+            const avg = total / polys.features.length;
+      
+            // Remove any triangles with a side of more than 2x avg
+            const factor = 4;
+            polys.features = polys.features.filter(p => {
+              const a = p.geometry.coordinates[0][0];
+              const b = p.geometry.coordinates[0][1];
+              const c = p.geometry.coordinates[0][2];
+              const d1 = Math.sqrt((a[0] - b[0])*(a[0]-b[0]) + (a[1] - b[1]) * (a[1] - b[1]));
+              const d2 = Math.sqrt((b[0] - c[0])*(b[0]-c[0]) + (b[1] - c[1]) * (b[1] - c[1]));
+              const d3 = Math.sqrt((a[0] - c[0])*(a[0]-c[0]) + (a[1] - c[1]) * (a[1] - c[1]));
+              if(d1 > factor * avg || d2 > factor * avg || d3 > factor * avg) return false;
+              return true;
+            });
+      
+            // Remove any triangles with a long side:
+            const sidefactor = 4;
+            polys.features = polys.features.filter(p => {
+              const a = p.geometry.coordinates[0][0];
+              const b = p.geometry.coordinates[0][1];
+              const c = p.geometry.coordinates[0][2];
+              const d1 = Math.sqrt((a[0] - b[0])*(a[0]-b[0]) + (a[1] - b[1]) * (a[1] - b[1]));
+              const d2 = Math.sqrt((b[0] - c[0])*(b[0]-c[0]) + (b[1] - c[1]) * (b[1] - c[1]));
+              const d3 = Math.sqrt((a[0] - c[0])*(a[0]-c[0]) + (a[1] - c[1]) * (a[1] - c[1]));
+              if(d1 > sidefactor * d2 || d1 > sidefactor * d3 || d2 > sidefactor * d3) return false;
+              return true;
+            });*/
+            return polys;
+        };
+        var createTexture = function (gl) {
+            texture = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            // Define size and format of level 0:
+            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);
+        };
+        var createFrameBuffer = function (gl) {
+            // Create and bind the framebuffer:
+            fbo = gl.createFramebuffer();
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+            // Attach the texture as the first color attachment:
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+        };
+        var createLevelsProgram = function (gl) {
+            var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+            gl.shaderSource(vertexShader, LevelsVertexShader);
+            gl.compileShader(vertexShader);
+            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+            gl.shaderSource(fragmentShader, LevelsFragmentShader);
+            gl.compileShader(fragmentShader);
+            levelsProgram = gl.createProgram();
+            gl.attachShader(levelsProgram, vertexShader);
+            gl.attachShader(levelsProgram, fragmentShader);
+            gl.linkProgram(levelsProgram);
+            // Shaders are linked into the program now; flag them for deletion.
+            gl.deleteShader(vertexShader);
+            gl.deleteShader(fragmentShader);
+        };
+        var createContoursProgram = function (gl) {
+            var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+            gl.shaderSource(vertexShader, ContoursVertexShader);
+            gl.compileShader(vertexShader);
+            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+            gl.shaderSource(fragmentShader, ContoursFragmentShader);
+            gl.compileShader(fragmentShader);
+            contoursProgram = gl.createProgram();
+            gl.attachShader(contoursProgram, vertexShader);
+            gl.attachShader(contoursProgram, fragmentShader);
+            gl.linkProgram(contoursProgram);
+            // Shaders are linked into the program now; flag them for deletion.
+            gl.deleteShader(vertexShader);
+            gl.deleteShader(fragmentShader);
+        };
+        var createDotsProgram = function (gl) {
+            var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+            gl.shaderSource(vertexShader, DotsVertexShader);
+            gl.compileShader(vertexShader);
+            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+            gl.shaderSource(fragmentShader, DotsFragmentShader);
+            gl.compileShader(fragmentShader);
+            dotsProgram = gl.createProgram();
+            gl.attachShader(dotsProgram, vertexShader);
+            gl.attachShader(dotsProgram, fragmentShader);
+            gl.linkProgram(dotsProgram);
+            // Shaders are linked into the program now; flag them for deletion.
+            gl.deleteShader(vertexShader);
+            gl.deleteShader(fragmentShader);
+        };
+        var onAdd = function (mbMap, gl) {
+            if (!gl)
+                return;
+            var geometry = getGeometry();
+            var minValue = Infinity;
+            var maxValue = -Infinity;
+            var len = geometry.features.length;
+            while (len--) {
+                var properties = geometry.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.
+                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;
+                }
+            }
+            createLevelsProgram(gl);
+            createContoursProgram(gl);
+            createDotsProgram(gl);
+            createTexture(gl);
+            createFrameBuffer(gl);
+            // Convert dataset to triangle geometry.
+            // Result is a list of v1,v2,v3, v1,v2,v3, ...
+            // where each vector has (x,y,value).
+            var points = [];
+            var LAT = 1;
+            var LON = 0;
+            numTriangles = geometry.features.length;
+            // Avoid a 0/0 = NaN normalization when all values are equal.
+            var deltaValue = (maxValue - minValue) || 1;
+            geometry.features.map(function (feature) {
+                var coord = MercatorCoordinate.fromLngLat({ lng: feature.geometry.coordinates[0][0][LON], lat: feature.geometry.coordinates[0][0][LAT] });
+                points.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] });
+                points.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] });
+                points.push(coord.x, coord.y, (feature.properties['c'] - minValue) / deltaValue);
+            });
+            // Create and initialize a WebGLBuffer to store vertex data.
+            // Each element will have 3 components (x,y,value).
+            levelsBuffer = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, levelsBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);
+            // Create a vertex buffer with only two triangles in it, which
+            // cover the viewport. TODO: the world, it seems
+            contoursBuffer = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, contoursBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+                0.0, 0.0, 1.0, 0.0, 1.0, 1.0,
+                0.0, 0.0, 1.0, 1.0, 0.0, 1.0
+            ]), 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 renderLevels = function (gl, matrix) {
+            gl.useProgram(levelsProgram);
+            // Pass a matrix uniform in:
+            gl.uniformMatrix4fv(gl.getUniformLocation(levelsProgram, 'u_matrix'), false, matrix);
+            var aPos = gl.getAttribLocation(levelsProgram, 'a_pos');
+            var aValue = gl.getAttribLocation(levelsProgram, 'a_value');
+            gl.bindBuffer(gl.ARRAY_BUFFER, levelsBuffer);
+            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);
+        };
+        var renderContours = function (gl, matrix, width, height) {
+            var _a, _b, _c;
+            var p = propsRef.current;
+            gl.useProgram(contoursProgram);
+            // Pass a matrix uniform in:
+            gl.uniformMatrix4fv(gl.getUniformLocation(contoursProgram, 'u_matrix'), false, matrix);
+            // Pass in levels for contours:
+            gl.uniform1i(gl.getUniformLocation(contoursProgram, 'levels'), clampLevels(p.levels));
+            // Pass in contour thickness:
+            gl.uniform1f(gl.getUniformLocation(contoursProgram, 'u_contourThickness'), clampThickness(p.contourThickness));
+            // Pass in contours color:
+            var clr = colorToRGBA((_a = p.contourColor) !== null && _a !== void 0 ? _a : DEFAULT_CONTOUR_COLOR);
+            gl.uniform4f(gl.getUniformLocation(contoursProgram, 'u_contourColor'), clr[0], clr[1], clr[2], clr[3]);
+            // 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([], ((_b = p.gradientStops) !== null && _b !== void 0 ? _b : []).map(function (s) { return s.pos; }), true);
+            while (stops.length < 12)
+                stops.push(2.0);
+            gl.uniform1fv(gl.getUniformLocation(contoursProgram, 'u_gradientStops'), new Float32Array(stops));
+            var colors = ((_c = p.gradientStops) !== null && _c !== void 0 ? _c : []).map(function (s) { return colorToRGBA(s.color); }).flat();
+            gl.uniform4fv(gl.getUniformLocation(contoursProgram, 'u_gradientColors'), new Float32Array(colors));
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            // Pass data texture in (use texture unit 0):
+            gl.uniform1i(gl.getUniformLocation(contoursProgram, 'dataTexture'), 0);
+            // Pass a screen resolution uniform in:
+            gl.uniform2f(gl.getUniformLocation(contoursProgram, 'u_resolution'), width * window.devicePixelRatio, height * window.devicePixelRatio);
+            var aPos = gl.getAttribLocation(contoursProgram, 'a_pos');
+            gl.bindBuffer(gl.ARRAY_BUFFER, contoursBuffer);
+            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.TRIANGLES, 0, 6);
+            gl.disableVertexAttribArray(aPos);
+        };
+        var renderDots = function (gl, matrix) {
+            gl.useProgram(dotsProgram);
+            // Pass a matrix uniform in:
+            gl.uniformMatrix4fv(gl.getUniformLocation(dotsProgram, 'u_matrix'), false, matrix);
+            var aPos = gl.getAttribLocation(dotsProgram, 'a_pos');
+            gl.bindBuffer(gl.ARRAY_BUFFER, levelsBuffer);
+            gl.enableVertexAttribArray(aPos);
+            gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 12, 0);
+            gl.enable(gl.BLEND);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            gl.drawArrays(gl.POINTS, 0, numTriangles * 3);
+            gl.disableVertexAttribArray(aPos);
+        };
+        var render = function (gl, matrix) {
+            var _a, _b;
+            // 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;
+            var width = m.getContainer().clientWidth;
+            var height = m.getContainer().clientHeight;
+            // Bind & clear framebuffer, then render levels into it:
+            // It is crucial to set the viewport size to match the resolution of the
+            // texture we're rendering into.
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+            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);
+            renderLevels(gl, matrix);
+            // 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);
+            renderContours(gl, matrix, width, height);
+            if (p.dots)
+                renderDots(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(levelsProgram);
+            gl.deleteProgram(contoursProgram);
+            gl.deleteProgram(dotsProgram);
+            gl.deleteBuffer(levelsBuffer);
+            gl.deleteBuffer(contoursBuffer);
+            gl.deleteFramebuffer(fbo);
+            gl.deleteTexture(texture);
+            levelsProgram = null;
+            contoursProgram = null;
+            dotsProgram = null;
+            levelsBuffer = null;
+            contoursBuffer = null;
+            fbo = null;
+            texture = null;
+        };
+        return { id: id, onAdd: onAdd, render: render, onRemove: onRemove };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.data]);
+    // 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 () {
-        setTime(Date.now());
-    }, [props.levels, props.data, props.contourColor, props.contourThickness, props.gradientStops]);
-    //
-    // Convert IPoint array to polygons.
-    //
-    var getGeometry = function () {
         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.value); }) // Filter out any NaN values.
-            .map(function (dp) {
-            return point([dp.longitude, dp.latitude], { 'v': dp.value });
-        }));
-        var polys = tin(points, 'v');
-        /* // Calculate average side length of triangles.
-        let total = 0;
-        polys.features.forEach(p => {
-          const a = p.geometry.coordinates[0][0];
-          const b = p.geometry.coordinates[0][1];
-          const c = p.geometry.coordinates[0][2];
-          const d1 = Math.sqrt((a[0] - b[0])*(a[0]-b[0]) + (a[1] - b[1]) * (a[1] - b[1]));
-          const d2 = Math.sqrt((b[0] - c[0])*(b[0]-c[0]) + (b[1] - c[1]) * (b[1] - c[1]));
-          const d3 = Math.sqrt((a[0] - c[0])*(a[0]-c[0]) + (a[1] - c[1]) * (a[1] - c[1]));
-          const avg = (d1 + d2 + d3) / 3;
-          total += avg;
-        });
-        const avg = total / polys.features.length;
-        
-        // Remove any triangles with a side of more than 2x avg
-        const factor = 4;
-        polys.features = polys.features.filter(p => {
-          const a = p.geometry.coordinates[0][0];
-          const b = p.geometry.coordinates[0][1];
-          const c = p.geometry.coordinates[0][2];
-          const d1 = Math.sqrt((a[0] - b[0])*(a[0]-b[0]) + (a[1] - b[1]) * (a[1] - b[1]));
-          const d2 = Math.sqrt((b[0] - c[0])*(b[0]-c[0]) + (b[1] - c[1]) * (b[1] - c[1]));
-          const d3 = Math.sqrt((a[0] - c[0])*(a[0]-c[0]) + (a[1] - c[1]) * (a[1] - c[1]));
-          if(d1 > factor * avg || d2 > factor * avg || d3 > factor * avg) return false;
-          return true;
-        });
-    
-        // Remove any triangles with a long side:
-        const sidefactor = 4;
-        polys.features = polys.features.filter(p => {
-          const a = p.geometry.coordinates[0][0];
-          const b = p.geometry.coordinates[0][1];
-          const c = p.geometry.coordinates[0][2];
-          const d1 = Math.sqrt((a[0] - b[0])*(a[0]-b[0]) + (a[1] - b[1]) * (a[1] - b[1]));
-          const d2 = Math.sqrt((b[0] - c[0])*(b[0]-c[0]) + (b[1] - c[1]) * (b[1] - c[1]));
-          const d3 = Math.sqrt((a[0] - c[0])*(a[0]-c[0]) + (a[1] - c[1]) * (a[1] - c[1]));
-          if(d1 > sidefactor * d2 || d1 > sidefactor * d3 || d2 > sidefactor * d3) return false;
-          return true;
-        });*/
-        return polys;
-    };
-    //
-    // 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 createTexture = function (gl) {
-        texture.current = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture.current);
-        // 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);
-    };
-    var createFrameBuffer = function (gl) {
-        // Create and bind the framebuffer:
-        fbo.current = gl.createFramebuffer();
-        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.current);
-        // Attach the texture as the first color attachment:
-        var attachmentPoint = gl.COLOR_ATTACHMENT0;
-        gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, texture.current, 0);
-    };
-    var createLevelsProgram = function (gl) {
-        // create a vertex shader
-        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
-        gl.shaderSource(vertexShader, LevelsVertexShader);
-        gl.compileShader(vertexShader);
-        // create a fragment shader
-        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-        gl.shaderSource(fragmentShader, LevelsFragmentShader);
-        gl.compileShader(fragmentShader);
-        // link the two shaders into a WebGL program
-        levelsProgram.current = gl.createProgram();
-        gl.attachShader(levelsProgram.current, vertexShader);
-        gl.attachShader(levelsProgram.current, fragmentShader);
-        gl.linkProgram(levelsProgram.current);
-    };
-    var createContoursProgram = function (gl) {
-        // create a vertex shader
-        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
-        gl.shaderSource(vertexShader, ContoursVertexShader);
-        gl.compileShader(vertexShader);
-        // create a fragment shader
-        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-        gl.shaderSource(fragmentShader, ContoursFragmentShader);
-        gl.compileShader(fragmentShader);
-        // link the two shaders into a WebGL program
-        contoursProgram.current = gl.createProgram();
-        gl.attachShader(contoursProgram.current, vertexShader);
-        gl.attachShader(contoursProgram.current, fragmentShader);
-        gl.linkProgram(contoursProgram.current);
-    };
-    var createDotsProgram = function (gl) {
-        // create a vertex shader
-        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
-        gl.shaderSource(vertexShader, DotsVertexShader);
-        gl.compileShader(vertexShader);
-        // create a fragment shader
-        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-        gl.shaderSource(fragmentShader, DotsFragmentShader);
-        gl.compileShader(fragmentShader);
-        // link the two shaders into a WebGL program
-        dotsProgram.current = gl.createProgram();
-        gl.attachShader(dotsProgram.current, vertexShader);
-        gl.attachShader(dotsProgram.current, fragmentShader);
-        gl.linkProgram(dotsProgram.current);
-    };
-    var onAddLayer = function (map, gl) {
-        // AddLayer is only called once.
-        if (!gl)
-            return;
-        var geometry = getGeometry();
-        var minValue = Infinity;
-        var maxValue = -Infinity;
-        var len = geometry.features.length;
-        while (len--) {
-            var value = geometry.features[len].properties['a'];
-            minValue = value < minValue ? value : minValue;
-            maxValue = value > maxValue ? value : maxValue;
-        }
-        createLevelsProgram(gl);
-        createContoursProgram(gl);
-        createDotsProgram(gl);
-        createTexture(gl);
-        createFrameBuffer(gl);
-        // Convert dataset to triangle geometry.
-        // Result is a list of v1,v2,v3, v1,v2,v3, ...
-        // where each vector has (x,y,value).
-        var points = [];
-        var LAT = 1;
-        var LON = 0;
-        numTriangles.current = geometry.features.length;
-        var deltaValue = maxValue - minValue;
-        geometry.features.map(function (feature) {
-            var coord = MercatorCoordinate.fromLngLat({ lng: feature.geometry.coordinates[0][0][LON], lat: feature.geometry.coordinates[0][0][LAT] });
-            points.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] });
-            points.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] });
-            points.push(coord.x, coord.y, (feature.properties['c'] - minValue) / deltaValue);
-        });
-        // Create and initialize a WebGLBuffer to store vertex data.
-        // Each element will have 3 components (x,y,value).
-        levelsBuffer.current = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, levelsBuffer.current);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points), gl.STATIC_DRAW);
-        // Create a vertex buffer with only two triangles in it, which
-        // cover the viewport. TODO: the world, it seems
-        contoursBuffer.current = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, contoursBuffer.current);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-            0.0, 0.0, 1.0, 0.0, 1.0, 1.0,
-            0.0, 0.0, 1.0, 1.0, 0.0, 1.0
-        ]), gl.STATIC_DRAW);
-    };
-    var renderLevels = function (gl, matrix) {
-        gl.useProgram(levelsProgram.current);
-        // Pass a matrix uniform in: 
-        gl.uniformMatrix4fv(gl.getUniformLocation(levelsProgram.current, 'u_matrix'), false, matrix);
-        var aPos = gl.getAttribLocation(levelsProgram.current, 'a_pos');
-        var aValue = gl.getAttribLocation(levelsProgram.current, 'a_value');
-        gl.bindBuffer(gl.ARRAY_BUFFER, levelsBuffer.current);
-        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.current * 3);
-    };
-    var renderContours = function (gl, matrix, width, height) {
-        gl.useProgram(contoursProgram.current);
-        // Pass a matrix uniform in: 
-        gl.uniformMatrix4fv(gl.getUniformLocation(contoursProgram.current, 'u_matrix'), false, matrix);
-        // Pass in levels for contours:
-        gl.uniform1i(gl.getUniformLocation(contoursProgram.current, 'levels'), props.levels);
-        // Pass in contour thickness:
-        gl.uniform1f(gl.getUniformLocation(contoursProgram.current, 'u_contourThickness'), props.contourThickness);
-        // Pass in contours color:
-        var clr = colorToRGBA(props.contourColor);
-        gl.uniform4f(gl.getUniformLocation(contoursProgram.current, 'u_contourColor'), clr[0], clr[1], clr[2], clr[3]);
-        // 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(contoursProgram.current, 'u_gradientStops'), new Float32Array(stops));
-        var colors = props.gradientStops.map(function (s) { return colorToRGBA(s.color); }).flat();
-        gl.uniform4fv(gl.getUniformLocation(contoursProgram.current, 'u_gradientColors'), new Float32Array(colors));
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, texture.current);
-        // Pass data texture in (use texture unit 0):
-        gl.uniform1i(gl.getUniformLocation(contoursProgram.current, "dataTexture"), 0);
-        // Pass a screen resolution uniform in:
-        gl.uniform2f(gl.getUniformLocation(contoursProgram.current, 'u_resolution'), width * window.devicePixelRatio, height * window.devicePixelRatio);
-        var aPos = gl.getAttribLocation(contoursProgram.current, 'a_pos');
-        gl.bindBuffer(gl.ARRAY_BUFFER, contoursBuffer.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.TRIANGLES, 0, 6);
-    };
-    var renderDots = function (gl, matrix) {
-        gl.useProgram(dotsProgram.current);
-        // Pass a matrix uniform in: 
-        gl.uniformMatrix4fv(gl.getUniformLocation(dotsProgram.current, 'u_matrix'), false, matrix);
-        var aPos = gl.getAttribLocation(dotsProgram.current, 'a_pos');
-        gl.bindBuffer(gl.ARRAY_BUFFER, levelsBuffer.current);
-        gl.enableVertexAttribArray(aPos);
-        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 12, 0);
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-        gl.drawArrays(gl.POINTS, 0, numTriangles.current * 3);
-    };
-    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;
-        // Bind & clear framebuffer, then render levels into it:
-        // It is crucial to set the viewport size to match the resolution of the
-        // texture we're rendering into.
-        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.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);
-        renderLevels(gl, matrix);
-        // 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);
-        renderContours(gl, matrix, width, height);
-        if (props.dots)
-            renderDots(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); } }));
+        (_a = map.current) === null || _a === void 0 ? void 0 : _a.triggerRepaint();
+    }, [map, props.levels, props.contourColor, props.contourThickness, props.gradientStops, props.minZoom, props.maxZoom, props.dots]);
+    return (React.createElement(Layer, { id: layer.id, key: layer.id, type: "custom", beforeId: "overlay", onAdd: layer.onAdd, onRemove: layer.onRemove, render: layer.render }));
 };
 /**
  * A custom WebGL map layer that renders interpolated data with optional contour lines.
@@ -370,10 +457,10 @@ var InterpolationLayerBase = function (props) {
  * - Values are automatically normalized to 0-1 range
  */
 var InterpolationLayer = function (_a) {
-    var _b = _a.levels, levels = _b === void 0 ? 0 : _b, _c = _a.contourColor, contourColor = _c === void 0 ? '#35ABE2' : _c, _d = _a.contourThickness, contourThickness = _d === void 0 ? 1 : _d, _e = _a.gradientStops, gradientStops = _e === void 0 ? [
+    var _b = _a.levels, levels = _b === void 0 ? DEFAULT_LEVELS : _b, _c = _a.contourColor, contourColor = _c === void 0 ? DEFAULT_CONTOUR_COLOR : _c, _d = _a.contourThickness, contourThickness = _d === void 0 ? DEFAULT_CONTOUR_THICKNESS : _d, _e = _a.gradientStops, gradientStops = _e === void 0 ? [
         { pos: 0.0, color: '#0000ffff' },
         { pos: 1.0, color: '#000000ff' }
-    ] : _e, _f = _a.minZoom, minZoom = _f === void 0 ? 0 : _f, _g = _a.maxZoom, maxZoom = _g === void 0 ? 99 : _g, _h = _a.dots, dots = _h === void 0 ? false : _h, props = __rest(_a, ["levels", "contourColor", "contourThickness", "gradientStops", "minZoom", "maxZoom", "dots"]);
+    ] : _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.dots, dots = _h === void 0 ? false : _h, props = __rest(_a, ["levels", "contourColor", "contourThickness", "gradientStops", "minZoom", "maxZoom", "dots"]);
     return React.createElement(InterpolationLayerBase, __assign({ levels: levels, contourColor: contourColor, contourThickness: contourThickness, gradientStops: gradientStops, minZoom: minZoom, maxZoom: maxZoom, dots: dots }, props));
 };
 InterpolationLayer.displayName = 'InterpolationLayer';