@longline/aqua-ui 1.0.0

package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer.js

@@ -0,0 +1,151 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { Layer, useMap } from 'react-map-gl';
+import { Marker } from 'mapbox-gl';
+/**
+ * The `HtmlMarkerLayer` manages HTML markers on a map. HTML markers are far slower
+ * than OpenGL layers, but much more flexible: with SVG, any shape of marker can
+ * be designed, and the markers can easily be made responsive to hover.
+ *
+ * The `HtmlMarkerLayer` keeps an internal cache, creating and rendering markers only
+ * when they are visible in the map viewport. This is a suitable solution for clusters
+ * (where by definition there are never very many icons in the viewport), or when
+ * there are simply not _that_ many markers: up to a few hundred in the viewport is the
+ * upper limit.
+ *
+ * The `HtmlMarkerLayer` must be placed inside a GeoJSON `Source`. In that source,
+ * each feature must have a unique ID (passed to this layer as the `idField`), which
+ * is used to tell features apart. When features are refreshed, it is imported that
+ * they all get new IDs so that old markers get removed correctly.
+ *
+ * The `HtmlMarkerLayer` component takes a _function child_. This function accepts
+ * a `props` object, which will be the properties from each GeoJSON feature for which
+ * a marker is rendered.
+ *
+ * ```tsx
+ * // featureCollection has a property "id" with unique values
+ * <Source id="mysource" type="geojson" data={featureCollection}>
+ *   <HtmlMarkerLayer sourceId="mysource" idField="id">
+ *     {(markerProps) => <MyMarkerComponent color="gold" radius={45} {...markerProps}/>
+ *   </HtmlMarkerLayer>
+ * </Source>
+ * ```
+ */
+var HtmlMarkerLayer = function (props) {
+    var map = useMap().current;
+    // Can't call props.children directly from map render event handler.
+    // Make a ref copy:
+    var children = React.useRef(props.children);
+    var markers = React.useRef({});
+    var markersOnScreen = React.useRef({});
+    // Add render event to map, and remove it when this component 
+    // is unmounted. Whenever the map renders, we must refresh
+    // all markers.
+    React.useEffect(function () {
+        map.on('render', updateMarkers);
+        return function () { map.off('render', updateMarkers); };
+    }, []);
+    // If the child function changes, then update the children ref copy.
+    // Also clear map and repaint it, because child component props may
+    // have changed.
+    React.useEffect(function () {
+        children.current = props.children;
+        for (var id in markersOnScreen.current) {
+            markersOnScreen.current[id].remove();
+        }
+        markers.current = {};
+        markersOnScreen.current = {};
+        map.triggerRepaint();
+    }, [props.children]);
+    // When component is unmounted, remove all its markers from the map.
+    React.useEffect(function () {
+        return function () {
+            for (var id in markersOnScreen.current) {
+                markersOnScreen.current[id].remove();
+            }
+            map.triggerRepaint();
+        };
+    }, []);
+    //
+    // Given a native or React component and props, turn it into an 
+    // HTML element. Return this element.
+    //
+    var createHtmlElementFromReactNode = function (latlngfeatureProps) {
+        // Don't render anything if there is no child.
+        if (!children.current)
+            return null;
+        // Get the first child.
+        var elem = children.current(latlngfeatureProps);
+        // Render child.
+        var el = document.createElement('div');
+        var root = ReactDOM.createRoot(el);
+        root.render(elem);
+        return el;
+    };
+    // 
+    // Calculate which markers are offscreen, and remove them.
+    // Add new markers for markers which are now onscreen.
+    var updateMarkers = function () {
+        // Only run after GeoJSON is loaded:
+        if (!map.getSource(props.sourceId))
+            return;
+        if (!map.isSourceLoaded(props.sourceId))
+            return;
+        // Retrieve all features that are currently rendered on a visible map tile,
+        // thus excluding everything that's off-screen, for speed. The use of 
+        // querySourceFeatures requires that at least one Layer exists, which is
+        // why we have layer that renders only invisible circles.    
+        // querySourceFeatures often results duplicates due to buffering.
+        // Remove these duplicates by looking at each feature's unique ID.
+        var seen = {};
+        var features = map.querySourceFeatures(props.sourceId).filter(function (f) {
+            var id = f.properties[props.idField];
+            return seen.hasOwnProperty(id) ? false : (seen[id] = true);
+        });
+        // For every marker on the screen, create an HTML marker (if we didn't yet),
+        // and add it to the map if it's not there already
+        var newMarkers = {};
+        for (var _i = 0, features_1 = features; _i < features_1.length; _i++) {
+            var feature = features_1[_i];
+            var coords = feature.geometry.coordinates;
+            var fprops = feature.properties;
+            // if (!props.cluster) continue;
+            var id = fprops[props.idField];
+            // Is there a marker for this feature?
+            var marker = markers.current[id];
+            // If not, create one:
+            if (!marker) {
+                var el = createHtmlElementFromReactNode(__assign({ longitude: coords[0], latitude: coords[1] }, fprops));
+                marker = markers.current[id] = new Marker({
+                    element: el
+                });
+                marker.setLngLat(coords);
+            }
+            newMarkers[id] = marker;
+            if (!markersOnScreen.current[id])
+                marker.addTo(map.getMap());
+        }
+        // for every marker we've added previously, remove those 
+        // that are no longer visible:
+        for (var id in markersOnScreen.current) {
+            if (!newMarkers[id])
+                markersOnScreen.current[id].remove();
+        }
+        markersOnScreen.current = newMarkers;
+    };
+    // querySourceFeatures will only work if we have a layer, even
+    // though it's empty.
+    return (React.createElement(Layer, { source: props.sourceId, type: "circle", paint: { "circle-radius": 0 } }));
+};
+export { HtmlMarkerLayer };

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

@@ -0,0 +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_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 dist = float(levels);\n\n    // Get shades of input color and surrounding pixels:\n    int shade = getShade(dataTexture, gl_FragCoord.xy, dist);\n    int up    = getShade(dataTexture, vec2(gl_FragCoord.x, gl_FragCoord.y - 1.0), dist);\n    int down  = getShade(dataTexture, vec2(gl_FragCoord.x, gl_FragCoord.y + 1.0), dist);\n    int left  = getShade(dataTexture, vec2(gl_FragCoord.x - 1.0, gl_FragCoord.y), dist);\n    int right = getShade(dataTexture, vec2(gl_FragCoord.x + 1.0, gl_FragCoord.y), dist);\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";
+export { ContoursFragmentShader };

package/map/layers/InterpolationLayer/ContoursFragmentShader.js

@@ -0,0 +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_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 dist = float(levels);\n\n    // Get shades of input color and surrounding pixels:\n    int shade = getShade(dataTexture, gl_FragCoord.xy, dist);\n    int up    = getShade(dataTexture, vec2(gl_FragCoord.x, gl_FragCoord.y - 1.0), dist);\n    int down  = getShade(dataTexture, vec2(gl_FragCoord.x, gl_FragCoord.y + 1.0), dist);\n    int left  = getShade(dataTexture, vec2(gl_FragCoord.x - 1.0, gl_FragCoord.y), dist);\n    int right = getShade(dataTexture, vec2(gl_FragCoord.x + 1.0, gl_FragCoord.y), dist);\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";
+export { ContoursFragmentShader };

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

@@ -0,0 +1,2 @@
+declare const ContoursVertexShader = "\n  uniform   mat4 u_matrix;\n  attribute vec2 a_pos;\n\n  // Vertex shader merely sets vertex position. Fragment shader \n  // does all the work.\n  void main() {\n    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);\n  }\n";
+export { ContoursVertexShader };

package/map/layers/InterpolationLayer/ContoursVertexShader.js

@@ -0,0 +1,2 @@
+var ContoursVertexShader = /*glsl*/ "\n  uniform   mat4 u_matrix;\n  attribute vec2 a_pos;\n\n  // Vertex shader merely sets vertex position. Fragment shader \n  // does all the work.\n  void main() {\n    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);\n  }\n";
+export { ContoursVertexShader };

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

@@ -0,0 +1,5 @@
+interface IGradientStop {
+    pos: number;
+    color: string;
+}
+export { IGradientStop };

package/map/layers/InterpolationLayer/IGradientStop.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { IGradientStop } from './IGradientStop';
+interface IPoint {
+    latitude: number;
+    longitude: number;
+    value: number;
+}
+interface IProps {
+    /**
+     * Input data.
+     */
+    data: IPoint[];
+    /**
+     * Gradient stops. A default gradient is preset.
+     */
+    gradientStops?: IGradientStop[];
+    /**
+     * Number of contour lines. This is a power of 2, between 2 and 256.
+     * If 0, then no contour lines are drawn.
+     * @default 0
+     */
+    levels?: number;
+    /**
+     * Optional color of contour lines.
+     * @default #35ABE2
+     */
+    contourColor?: string;
+}
+/**
+ * An `InterpolationLayer` takes a data array of the form `{ latitude, longitude, value }`. It performs triangulation
+ * and draws the data in an OpenGL layer. Optionally, a number of contour `levels` can be set to draw contour lines.
+ * Gradient colors are configurable using `gradientStops`.
+ */
+declare const InterpolationLayer: ({ levels, contourColor, gradientStops, ...props }: IProps) => React.JSX.Element;
+export { InterpolationLayer };

package/map/layers/InterpolationLayer/InterpolationLayer.js

@@ -0,0 +1,256 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import { featureCollection, point } from '@turf/helpers';
+import { MercatorCoordinate } from 'mapbox-gl';
+import { Layer, useMap } from 'react-map-gl';
+import tin from '@turf/tin';
+import { RgbColor } from '../../../helper/RgbColor';
+import { LevelsVertexShader } from './LevelsVertexShader';
+import { LevelsFragmentShader } from './LevelsFragmentShader';
+import { ContoursVertexShader } from './ContoursVertexShader';
+import { ContoursFragmentShader } from './ContoursFragmentShader';
+var TEXTURE_WIDTH = 1024;
+var TEXTURE_HEIGHT = 1024;
+var InterpolationLayerBase = function (props) {
+    var map = useMap();
+    var levelsProgram = React.useRef(null);
+    var contoursProgram = 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.
+    React.useEffect(function () {
+        setTime(Date.now());
+    }, [props.levels, props.data, props.contourColor, 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');
+        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 onAddLayer = function (map, gl) {
+        // AddLayer is only called once.
+        if (!gl)
+            return;
+        var geometry = getGeometry();
+        var minValue = Math.min.apply(Math, geometry.features.map(function (f) { return f.properties['a']; }));
+        var maxValue = Math.max.apply(Math, geometry.features.map(function (f) { return f.properties['a']; }));
+        createLevelsProgram(gl);
+        createContoursProgram(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 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 onRender = function (gl, matrix, width, height) {
+        // Render is called many times while the map is panned/zoomed.
+        // You cannot have access to the map though.
+        // 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);
+    };
+    return (React.createElement(Layer
+    // @ts-ignore
+    , { 
+        // @ts-ignore
+        type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
+};
+/**
+ * An `InterpolationLayer` takes a data array of the form `{ latitude, longitude, value }`. It performs triangulation
+ * and draws the data in an OpenGL layer. Optionally, a number of contour `levels` can be set to draw contour lines.
+ * Gradient colors are configurable using `gradientStops`.
+ */
+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.gradientStops, gradientStops = _d === void 0 ? [
+        { pos: 0.0, color: '#0000ffff' },
+        { pos: 1.0, color: '#000000ff' }
+    ] : _d, props = __rest(_a, ["levels", "contourColor", "gradientStops"]);
+    return React.createElement(InterpolationLayerBase, __assign({ levels: levels, contourColor: contourColor, gradientStops: gradientStops }, props));
+};
+export { InterpolationLayer };

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

@@ -0,0 +1,2 @@
+declare const LevelsFragmentShader = " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  varying vec4 vColor;\n\n  // Fragment shader merely copies vertex color.\n  void main() {\n    gl_FragColor = vColor;\n  }\n";
+export { LevelsFragmentShader };

package/map/layers/InterpolationLayer/LevelsFragmentShader.js

@@ -0,0 +1,2 @@
+var LevelsFragmentShader = /*glsl*/ " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  varying vec4 vColor;\n\n  // Fragment shader merely copies vertex color.\n  void main() {\n    gl_FragColor = vColor;\n  }\n";
+export { LevelsFragmentShader };

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

@@ -0,0 +1,2 @@
+declare const LevelsVertexShader = "\n  uniform   mat4 u_matrix;\n  attribute vec2 a_pos;\n  attribute float a_value;\n  varying   vec4 vColor;\n\n  // For each vertex, create a greyscale color equal to its value.\n  void main() {\n    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);\n    vColor = vec4(a_value, a_value, a_value, 1.0);\n  }\n";
+export { LevelsVertexShader };

package/map/layers/InterpolationLayer/LevelsVertexShader.js

@@ -0,0 +1,2 @@
+var LevelsVertexShader = /*glsl*/ "\n  uniform   mat4 u_matrix;\n  attribute vec2 a_pos;\n  attribute float a_value;\n  varying   vec4 vColor;\n\n  // For each vertex, create a greyscale color equal to its value.\n  void main() {\n    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);\n    vColor = vec4(a_value, a_value, a_value, 1.0);\n  }\n";
+export { LevelsVertexShader };

package/map/layers/ParticlesLayer/ParticlesFragmentShader.d.ts

@@ -0,0 +1,2 @@
+declare const ParticlesFragmentShader = " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  uniform sampler2D uTexture;\n  uniform sampler2D vTexture;\n  varying vec4 v_color;\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  vec4 getSpeed(vec2 pixelCoord) {\n    vec4 colorU = texture2D(uTexture, pixelCoord / u_resolution);\n    vec4 colorV = texture2D(vTexture, pixelCoord / u_resolution);\n    if(colorU.w == 0.0 || colorV.w == 0.0) return vec4(0.0, 0.0, 0.0, 0.0);\n    float uRange = maxU - minU;\n    float vRange = maxV - minV;\n    float u = uRange * colorU.x + minU;\n    float v = vRange * colorV.x + minV;\n    float ratio = sqrt(u * u + v * v) / maxUV;\n    \n    return vec4(1.0, 1.0, 1.0, 1.0);\n    return vec4(ratio, 0.0, 0.0, 1.0);\n  } */\n\n  /* void oldmain() {\n    float xMod20 = mod(float(gl_FragCoord.x), 20.0);\n    if(!(xMod20 >= shift && xMod20 <= shift + 1.0)) return;\n    if(mod(float(gl_FragCoord.y), 20.0) >= 3.0) return;\n    // Get input color:\n    //vec4 color = texelFetch(uTexture, gl_FragCoord.xy);\n\n    vec2 pos = gl_FragCoord.xy;\n    vec4 color = getSpeed(pos);\n\n    gl_FragColor = color;\n  } */\n\n  // Half size of box\n  #define SIZE 15\n\n  /* void main() {\n    // Draw box around point.\n    int x = int(gl_PointCoord.x * float(SIZE*2));\n    int y = int(gl_PointCoord.y * float(SIZE*2));  \n    if(x == 0 || y == 0 || x == SIZE*2-1 || y == SIZE*2-1) {\n      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n      return;\n    }\n\n    // Get texture color of point at its center.\n    vec4 color = texelFetch(uTexture, gl_FragCoord.xy - vec2(x, -y));\n    gl_FragColor = color;\n  } */\n\n  void main() {\n    gl_FragColor = v_color;\n  }\n";
+export { ParticlesFragmentShader };

package/map/layers/ParticlesLayer/ParticlesFragmentShader.js

@@ -0,0 +1,2 @@
+var ParticlesFragmentShader = /*glsl*/ " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  uniform sampler2D uTexture;\n  uniform sampler2D vTexture;\n  varying vec4 v_color;\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  vec4 getSpeed(vec2 pixelCoord) {\n    vec4 colorU = texture2D(uTexture, pixelCoord / u_resolution);\n    vec4 colorV = texture2D(vTexture, pixelCoord / u_resolution);\n    if(colorU.w == 0.0 || colorV.w == 0.0) return vec4(0.0, 0.0, 0.0, 0.0);\n    float uRange = maxU - minU;\n    float vRange = maxV - minV;\n    float u = uRange * colorU.x + minU;\n    float v = vRange * colorV.x + minV;\n    float ratio = sqrt(u * u + v * v) / maxUV;\n    \n    return vec4(1.0, 1.0, 1.0, 1.0);\n    return vec4(ratio, 0.0, 0.0, 1.0);\n  } */\n\n  /* void oldmain() {\n    float xMod20 = mod(float(gl_FragCoord.x), 20.0);\n    if(!(xMod20 >= shift && xMod20 <= shift + 1.0)) return;\n    if(mod(float(gl_FragCoord.y), 20.0) >= 3.0) return;\n    // Get input color:\n    //vec4 color = texelFetch(uTexture, gl_FragCoord.xy);\n\n    vec2 pos = gl_FragCoord.xy;\n    vec4 color = getSpeed(pos);\n\n    gl_FragColor = color;\n  } */\n\n  // Half size of box\n  #define SIZE 15\n\n  /* void main() {\n    // Draw box around point.\n    int x = int(gl_PointCoord.x * float(SIZE*2));\n    int y = int(gl_PointCoord.y * float(SIZE*2));  \n    if(x == 0 || y == 0 || x == SIZE*2-1 || y == SIZE*2-1) {\n      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n      return;\n    }\n\n    // Get texture color of point at its center.\n    vec4 color = texelFetch(uTexture, gl_FragCoord.xy - vec2(x, -y));\n    gl_FragColor = color;\n  } */\n\n  void main() {\n    gl_FragColor = v_color;\n  }\n";
+export { ParticlesFragmentShader };

package/map/layers/ParticlesLayer/ParticlesLayer.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { IGradientStop } from '../InterpolationLayer/IGradientStop';
+interface IPoint {
+    latitude: number;
+    longitude: number;
+    u: number;
+    v: number;
+}
+interface IProps {
+    /**
+     * Input data.
+     */
+    data: IPoint[];
+    /**
+     * Gradient stops. A default gradient is preset.
+     */
+    gradientStops?: IGradientStop[];
+    /**
+     * Number of particles per curve.
+     * @default 80
+     */
+    particles?: number;
+    /**
+     * Number or points horizontally (and vertically).
+     * @default 40
+     */
+    density?: number;
+    /**
+     * Animation delay factor.
+     * @default 1
+     */
+    delay?: number;
+    /**
+     * Number of pixels in a point.
+     * @default 1.0
+     */
+    pointSize?: number;
+}
+declare const ParticlesLayer: ({ particles, density, delay, gradientStops, ...props }: IProps) => React.JSX.Element;
+export { ParticlesLayer };