@longline/aqua-ui 1.0.0

package/map/layers/ParticlesLayer/ParticlesLayer.js

@@ -0,0 +1,337 @@
+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 tin from '@turf/tin';
+import { MercatorCoordinate } from 'mapbox-gl';
+import { Layer, useMap } from 'react-map-gl';
+import { UVVertexShader } from './UVVertexShader';
+import { UVFragmentShader } from './UVFragmentShader';
+import { ParticlesFragmentShader } from './ParticlesFragmentShader';
+import { ParticlesVertexShader } from './ParticlesVertexShader';
+import { RgbColor } from '../../../helper/RgbColor';
+var TEXTURE_WIDTH = 1024;
+var TEXTURE_HEIGHT = 1024;
+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);
+    var textureU = React.useRef(null);
+    var textureV = React.useRef(null);
+    var fboU = React.useRef(null);
+    var fboV = React.useRef(null);
+    var frame = React.useRef(0);
+    // requestAnimationFrame ID:
+    var animation = 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:
+    React.useEffect(function () {
+        setTime(Date.now());
+        window.cancelAnimationFrame(animation.current);
+        frame.current = 0;
+        animation.current = window.requestAnimationFrame(draw);
+    }, [props.data, props.gradientStops, props.particles, props.density, props.delay, props.pointSize]);
+    var draw = function () {
+        frame.current = (frame.current + 1) % (props.particles * props.delay);
+        map.current.triggerRepaint();
+        animation.current = window.requestAnimationFrame(draw);
+    };
+    React.useEffect(function () {
+        animation.current = window.requestAnimationFrame(draw);
+        return function () {
+            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 = Math.min.apply(Math, polys.features.map(function (f) { return f.properties['a']; }));
+        var maxValue = Math.max.apply(Math, polys.features.map(function (f) { return f.properties['a']; }));
+        // 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 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);
+                }
+            }
+        }
+        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);
+        createUVProgram(gl);
+        createParticlesProgram(gl);
+        textureU.current = createTexture(gl);
+        textureV.current = createTexture(gl);
+        fboU.current = createFrameBuffer(gl, textureU.current);
+        fboV.current = createFrameBuffer(gl, textureV.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);
+    };
+    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 / props.delay));
+        // 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);
+        // U/V mins and maxes:
+        gl.uniform1f(gl.getUniformLocation(particlesProgram.current, "minU"), minU.current);
+        gl.uniform1f(gl.getUniformLocation(particlesProgram.current, "maxU"), maxU.current);
+        gl.uniform1f(gl.getUniformLocation(particlesProgram.current, "minV"), minV.current);
+        gl.uniform1f(gl.getUniformLocation(particlesProgram.current, "maxV"), maxV.current);
+        // u-texture:
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, textureU.current);
+        gl.uniform1i(gl.getUniformLocation(particlesProgram.current, "uTexture"), 0);
+        // v-texture:
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, textureV.current);
+        gl.uniform1i(gl.getUniformLocation(particlesProgram.current, "vTexture"), 1);
+        // 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);
+    };
+    var onRender = function (gl, matrix, width, height) {
+        gl.useProgram(uvProgram.current);
+        // Render U-texture:
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fboU.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);
+        renderSpeedBuffer(gl, matrix, bufferU.current, numTrianglesU.current);
+        // Render V-texture:
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fboV.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);
+        renderSpeedBuffer(gl, matrix, bufferV.current, numTrianglesV.current);
+        // 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
+    // @ts-ignore
+    , { 
+        // @ts-ignore
+        type: "custom", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
+};
+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 ? 1 : _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, props = __rest(_a, ["particles", "density", "delay", "gradientStops"]);
+    return React.createElement(ParticlesLayerBase, __assign({ particles: particles, density: density, gradientStops: gradientStops, delay: delay }, props));
+};
+export { ParticlesLayer };

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

@@ -0,0 +1,2 @@
+declare const ParticlesVertexShader = "\n  uniform   mat4 u_matrix;\n  attribute vec2 a_pos;\n  attribute float a_idx;\n  attribute float a_offset;\n\n  uniform float u_point_size;\n  uniform int u_num_instances;\n  uniform int u_frame;\n  uniform sampler2D uTexture;\n  uniform sampler2D vTexture;  \n  uniform float minU;\n  uniform float maxU;\n  uniform float minV;\n  uniform float maxV;\n  uniform float u_gradientStops[12];\n  uniform vec4 u_gradientColors[12];  \n\n  // Output color, calculated by this vertex shader:\n  varying vec4 v_color;\n\n  //\n  // Returns texture color at pixelCoord.\n  //\n  vec4 texelFetch(sampler2D tex, vec2 normalizedCoord) {\n    return texture2D(tex, normalizedCoord);\n  }\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  // Vertex shader merely sets vertex position. Fragment shader \n  // does all the work.\n  void main() {\n    int idx = int(a_idx);   \n    int offset = int(a_offset);\n    int frame = u_frame + offset;\n    if(frame >= u_num_instances) frame -= u_num_instances;\n\n    // Determine color from frame.\n    int start = idx - frame;\n    if(start < 0) start += u_num_instances;\n    v_color = getGradientColor(float(u_num_instances - start) / float(u_num_instances));\n\n    // a_pos.x is -1..1, left to right.\n    // a_pox.y is -1..1, bottom to top (negative is bottom).\n    vec2 pos = a_pos; // Start off at initial position.\n\n    // Find initial U. If there isn't one (outside of bounds of texture), \n    // then we don't draw anything.\n    float w = texelFetch(uTexture, (pos + 1.0) / 2.0).w;\n    if(w == 0.0) return;\n\n\n    // Use velocity vector [idx] times.\n    float uRange = maxU - minU;\n    float vRange = maxV - minV;\n\n    for(int i = 1; i < 100; i++) {\n      if(i > idx) break;\n      // Find velocity vector at current position.\n      // u and v are 0..1 values.\n      vec4 uColor = texelFetch(uTexture, (pos + 1.0) / 2.0);\n      vec4 vColor = texelFetch(vTexture, (pos + 1.0) / 2.0);\n      if(uColor.w == 0.0) return;\n      float u = uRange * uColor.x + minU;\n      float v = vRange * vColor.x + minV;\n      \n      pos.x += u / 10.0;\n      pos.y += v / 10.0;\n      if(pos.x <= -1.0 || pos.x >= 1.0 || pos.y <= -1.0 || pos.x >= 1.0) {\n        return;\n      }\n    }\n\n    gl_Position = vec4(pos.x, pos.y, 0.0, 1.0);\n    gl_PointSize = u_point_size;\n  }\n";
+export { ParticlesVertexShader };

package/map/layers/ParticlesLayer/ParticlesVertexShader.js

@@ -0,0 +1,2 @@
+var ParticlesVertexShader = /*glsl*/ "\n  uniform   mat4 u_matrix;\n  attribute vec2 a_pos;\n  attribute float a_idx;\n  attribute float a_offset;\n\n  uniform float u_point_size;\n  uniform int u_num_instances;\n  uniform int u_frame;\n  uniform sampler2D uTexture;\n  uniform sampler2D vTexture;  \n  uniform float minU;\n  uniform float maxU;\n  uniform float minV;\n  uniform float maxV;\n  uniform float u_gradientStops[12];\n  uniform vec4 u_gradientColors[12];  \n\n  // Output color, calculated by this vertex shader:\n  varying vec4 v_color;\n\n  //\n  // Returns texture color at pixelCoord.\n  //\n  vec4 texelFetch(sampler2D tex, vec2 normalizedCoord) {\n    return texture2D(tex, normalizedCoord);\n  }\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  // Vertex shader merely sets vertex position. Fragment shader \n  // does all the work.\n  void main() {\n    int idx = int(a_idx);   \n    int offset = int(a_offset);\n    int frame = u_frame + offset;\n    if(frame >= u_num_instances) frame -= u_num_instances;\n\n    // Determine color from frame.\n    int start = idx - frame;\n    if(start < 0) start += u_num_instances;\n    v_color = getGradientColor(float(u_num_instances - start) / float(u_num_instances));\n\n    // a_pos.x is -1..1, left to right.\n    // a_pox.y is -1..1, bottom to top (negative is bottom).\n    vec2 pos = a_pos; // Start off at initial position.\n\n    // Find initial U. If there isn't one (outside of bounds of texture), \n    // then we don't draw anything.\n    float w = texelFetch(uTexture, (pos + 1.0) / 2.0).w;\n    if(w == 0.0) return;\n\n\n    // Use velocity vector [idx] times.\n    float uRange = maxU - minU;\n    float vRange = maxV - minV;\n\n    for(int i = 1; i < 100; i++) {\n      if(i > idx) break;\n      // Find velocity vector at current position.\n      // u and v are 0..1 values.\n      vec4 uColor = texelFetch(uTexture, (pos + 1.0) / 2.0);\n      vec4 vColor = texelFetch(vTexture, (pos + 1.0) / 2.0);\n      if(uColor.w == 0.0) return;\n      float u = uRange * uColor.x + minU;\n      float v = vRange * vColor.x + minV;\n      \n      pos.x += u / 10.0;\n      pos.y += v / 10.0;\n      if(pos.x <= -1.0 || pos.x >= 1.0 || pos.y <= -1.0 || pos.x >= 1.0) {\n        return;\n      }\n    }\n\n    gl_Position = vec4(pos.x, pos.y, 0.0, 1.0);\n    gl_PointSize = u_point_size;\n  }\n";
+export { ParticlesVertexShader };

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

@@ -0,0 +1,2 @@
+declare const UVFragmentShader = " \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 { UVFragmentShader };

package/map/layers/ParticlesLayer/UVFragmentShader.js

@@ -0,0 +1,2 @@
+var UVFragmentShader = /*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 { UVFragmentShader };

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

@@ -0,0 +1,2 @@
+declare const UVVertexShader = "\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 { UVVertexShader };

package/map/layers/ParticlesLayer/UVVertexShader.js

@@ -0,0 +1,2 @@
+var UVVertexShader = /*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 { UVVertexShader };

package/map/markers/ClusterMarker/ClusterMarker.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Radius of cluster (in pixels).
+     * @default 24
+     */
+    radius?: number;
+    /**
+     * If set, cluster size is relative to its value (as taken from the `field`),
+     * adding this value to the cluster radius per logarithmic step.
+     * @default 0
+     */
+    relativeSize?: number;
+    /**
+     * Value to show in cluster.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Values to use for colored ring. The colors will be taken from a predefined 5-color palette,
+     * ranging from green to red. There should be exactly 5 values.
+     */
+    ringValues?: number[];
+    /**
+     * Fired when the marker is clicked.
+     */
+    onClick?: () => void;
+}
+/**
+ * A `ClusterMarker` may be used with an `HtmlMarkerLayer`, or as a component on its own.
+ *
+ */
+declare const ClusterMarker: ({ radius, relativeSize, value, ...props }: IProps) => React.JSX.Element;
+export { ClusterMarker };

package/map/markers/ClusterMarker/ClusterMarker.js

@@ -0,0 +1,99 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { Human } from '../../../formatters/Human';
+var ClusterMarkerBase = function (props) {
+    /**
+     * Create a <path> for a donut segment.
+     * @param start Start angle (0-1)
+     * @param end   End angle (0-1)
+     * @param r     Outer radius
+     * @param r0    Inner radius
+     * @param color Color
+     * @returns HTML string
+     */
+    var donutSegment = function (key, start, end, r, r0, color) {
+        if (end - start === 1)
+            end -= 0.00001;
+        var a0 = 2 * Math.PI * (start - 0.25);
+        var a1 = 2 * Math.PI * (end - 0.25);
+        var x0 = Math.cos(a0);
+        var y0 = Math.sin(a0);
+        var x1 = Math.cos(a1);
+        var y1 = Math.sin(a1);
+        var largeArc = end - start > 0.5 ? 1 : 0;
+        // draw an SVG path, as JSX:
+        return (React.createElement("path", { key: key, d: "M ".concat(r + r0 * x0, " ").concat(r + r0 * y0, " L ").concat(r + r * x0, " ").concat(r + r * y0, " A ").concat(r, " ").concat(r, " 0 ").concat(largeArc, " 1 ").concat(r + r * x1, " ").concat(r + r * y1, " L ").concat(r + r0 * x1, " ").concat(r + r0 * y1, " A ").concat(r0, " ").concat(r0, " 0 ").concat(largeArc, " 0 ").concat(r + r0 * x0, " ").concat(r + r0 * y0), fill: color }));
+    };
+    var getRingColor = function (idx) {
+        var Colors = [
+            "#76b72d",
+            "#35abe2",
+            "#e9db64",
+            "#f6a44e",
+            "#e94a52"
+        ];
+        return Colors[idx % 5];
+    };
+    var renderValueRings = function () {
+        var value = 0;
+        // Calculate total value of ringfields:
+        var totalValue = props.ringValues.reduce(function (acc, f) { return f + acc; }, 0);
+        var rings = [];
+        props.ringValues.forEach(function (ringValue, idx) {
+            var relativeValue = ringValue / totalValue;
+            rings.push(donutSegment(idx, value, value + relativeValue, props.radius, props.radius - 4, getRingColor(idx)));
+            value += relativeValue;
+        });
+        return rings;
+    };
+    // Radius is passed in as inline style, to avoid generating 1000s of styled-component classes.
+    return (React.createElement("div", { className: props.className, style: { width: "".concat(props.radius * 2, "px"), height: "".concat(props.radius * 2, "px") }, onClick: props.onClick },
+        props.ringValues &&
+            React.createElement("svg", null, renderValueRings()),
+        React.createElement("span", null,
+            React.createElement(Human, { value: props.value }))));
+};
+var ClusterMarkerStyled = styled(ClusterMarkerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  box-sizing: border-box;\n\n  // Appearance:\n  border-radius: 50%;\n  background-color: rgb(255 255 255 / 100%);\n  box-shadow: \n    0 0 0 6px rgb(255 255 255 / 44%),  // outer ring small\n    0 0 0 12px rgb(255 255 255 / 20%), // outer ring big\n    inset 0px 0 0px 4px #fff,        // inner white ring\n    inset 0px 7px 3px 0px rgba(0, 0, 0, 0.25); // inner dropshadow\n  cursor: ", ";\n  outline: none;\n  user-select: none;\n\n  & > svg {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    width: 100%;\n    height: 100%;\n    margin-left: -50%;\n    margin-top: -50%;\n  }\n\n  & > span {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    // Content:\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: #3C698A;\n    font: normal 700 12px/12px \"Roboto Condensed\";\n  }\n"], ["\n  // Position and size:\n  position: relative;\n  box-sizing: border-box;\n\n  // Appearance:\n  border-radius: 50%;\n  background-color: rgb(255 255 255 / 100%);\n  box-shadow: \n    0 0 0 6px rgb(255 255 255 / 44%),  // outer ring small\n    0 0 0 12px rgb(255 255 255 / 20%), // outer ring big\n    inset 0px 0 0px 4px #fff,        // inner white ring\n    inset 0px 7px 3px 0px rgba(0, 0, 0, 0.25); // inner dropshadow\n  cursor: ", ";\n  outline: none;\n  user-select: none;\n\n  & > svg {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    width: 100%;\n    height: 100%;\n    margin-left: -50%;\n    margin-top: -50%;\n  }\n\n  & > span {\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    // Content:\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: #3C698A;\n    font: normal 700 12px/12px \"Roboto Condensed\";\n  }\n"
+    /**
+     * A `ClusterMarker` may be used with an `HtmlMarkerLayer`, or as a component on its own.
+     *
+     */
+])), function (p) { return p.onClick ? 'pointer' : 'inherit'; });
+/**
+ * A `ClusterMarker` may be used with an `HtmlMarkerLayer`, or as a component on its own.
+ *
+ */
+var ClusterMarker = function (_a) {
+    var _b = _a.radius, radius = _b === void 0 ? 24 : _b, _c = _a.relativeSize, relativeSize = _c === void 0 ? 0 : _c, _d = _a.value, value = _d === void 0 ? 0 : _d, props = __rest(_a, ["radius", "relativeSize", "value"]);
+    var step = Math.log10(Math.max(1, value));
+    var r = radius + step * relativeSize;
+    return React.createElement(ClusterMarkerStyled, __assign({ radius: r, value: value }, props));
+};
+export { ClusterMarker };
+var templateObject_1;

package/map/markers/ClusterMarker/index.d.ts

@@ -0,0 +1 @@
+export * from './ClusterMarker';

package/map/markers/ClusterMarker/index.js

@@ -0,0 +1 @@
+export * from './ClusterMarker';

package/map/markers/RiskMarker/RiskMarker.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Fired when marker is clicked.
+     */
+    onClick?: () => void;
+    actioned?: boolean;
+    value?: number;
+    color?: string;
+}
+/**
+ * A `RiskMarker` may be used in combination with `HtmlMarkerLayer`, or as
+ * component on its own.
+ *
+ * A `RiskMarker` can show the risk status of an object (by `color`), and whether
+ * there are open actions for this object (`actioned`). The value of the
+ * `RiskMarker` is its `value` property.
+ */
+declare const RiskMarker: (props: IProps) => React.JSX.Element;
+export { RiskMarker };

package/map/markers/RiskMarker/RiskMarker.js

@@ -0,0 +1,61 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 styled from 'styled-components';
+var RiskMarkerBase = function (props) {
+    var handleClick = function () {
+        if (props.onClick) {
+            props.onClick();
+        }
+    };
+    var size = (props.value ? Math.log10(props.value) : 1) * 10 + 70;
+    return (React.createElement("div", { className: "".concat(props.className, " ").concat(props.value > 0 ? 'audited ' : 'unaudited ', " ").concat(props.actioned ? 'actioned ' : ''), style: { width: "".concat(size, "px"), height: "".concat(size, "px") }, onClick: handleClick },
+        React.createElement("span", null, props.value),
+        React.createElement("svg", { viewBox: "0 0 60 60" },
+            React.createElement("path", { className: "background", fill: "#808080", fillOpacity: "0.7", d: "M19.0156 38.625C22.0352 35.6761 23.5975 38.9978 29.8862 38.9978C36.1437 38.9978 37.7209 35.8054 40.9297 38.6875C44.667 34.9361 50.4414 33.5238 50.4414 27.781C50.4414 16.3436 41.2634 7.07178 29.9414 7.07178C18.6195 7.07178 9.44141 16.3436 9.44141 27.781C9.44141 33.5662 15.2294 34.8675 19.0156 38.625Z" }),
+            React.createElement("path", { className: "action-shadow", fill: "#343434", d: "M30 17.0332C33.5908 17.0332 36.5017 14.8478 36.5017 12.152C36.5017 9.45617 33.5908 7.27075 30 7.27075C26.4092 7.27075 23.4983 9.45617 23.4983 12.152C23.4983 14.8478 26.4092 17.0332 30 17.0332Z" }),
+            React.createElement("path", { className: "farm", fill: "#ffffff", d: "M29.9414 39C36.0165 39 40.9414 34.0751 40.9414 27.9999C40.9414 21.9248 36.0165 17 29.9414 17C23.8663 17 18.9414 21.9248 18.9414 27.9999C18.9414 34.0751 23.8663 39 29.9414 39Z" }),
+            React.createElement("path", { className: "farm-stroke", fill: "#fff", fillRule: "evenodd", clipRule: "evenodd", d: "M29.9414 18.5C24.6947 18.5 20.4414 22.7532 20.4414 27.9999C20.4414 33.2466 24.6947 37.5 29.9414 37.5C35.1881 37.5 39.4414 33.2466 39.4414 27.9999C39.4414 22.7532 35.1881 18.5 29.9414 18.5ZM17.4414 27.9999C17.4414 21.0964 23.0379 15.5 29.9414 15.5C36.845 15.5 42.4414 21.0964 42.4414 27.9999C42.4414 34.9035 36.845 40.5 29.9414 40.5C23.0378 40.5 17.4414 34.9035 17.4414 27.9999Z" }),
+            React.createElement("g", { className: "audit" },
+                React.createElement("path", { fill: props.color, d: "M45.4232 27.907C45.4232 32.1131 43.6968 35.9209 40.9057 38.6772L44.8493 42.5715C48.6495 38.8185 51 33.6339 51 27.9069C51 20.6528 47.2224 14.2779 41.5104 10.5715C40.9627 12.3806 39.9874 14.0031 38.7039 15.3365C42.7597 18.0806 45.4232 22.6851 45.4232 27.907Z" }),
+                React.createElement("path", { fill: props.color, d: "M19.0398 38.6182C16.2824 35.8664 14.5768 32.0843 14.5768 27.907C14.5768 22.6853 17.2402 18.0805 21.2961 15.3366C20.0124 14.0031 19.0373 12.3806 18.4897 10.5715C12.7777 14.278 9 20.653 9 27.9071C9 33.6052 11.3297 38.764 15.0964 42.5125L19.0398 38.6182Z" })),
+            React.createElement("path", { className: "arrow", fill: "#fff", d: "M30 43.1146C27.7325 43.1146 25.5897 42.6184 23.6597 41.7539L30 56.62L36.3088 41.7688C34.3869 42.6242 32.255 43.1146 30 43.1146Z" }),
+            React.createElement("path", { className: "no-action", fill: props.color, d: "M42.3623 11.1596C42.366 11.1624 42.3702 11.1646 42.374 11.1673C42.0952 10.9667 41.8147 10.7682 41.5257 10.5811C41.526 10.5812 41.5255 10.5811 41.5257 10.5811C41.524 10.5874 41.5205 10.5932 41.5185 10.5995C38.2075 8.45041 34.2622 7.17529 30.0006 7.17529C25.7501 7.17529 21.815 8.44472 18.5087 10.5835L18.5072 10.5811C12.7877 14.2844 8.97314 20.6539 8.97314 27.9018C8.97314 33.595 11.3058 38.7493 15.0775 42.4946L19.0258 38.6037C16.2649 35.8544 14.557 32.0755 14.557 27.9018C14.557 22.7029 17.2828 18.0472 21.3201 15.3016C23.7952 13.6421 26.7811 12.6672 30.0005 12.6672C33.2389 12.6672 36.2422 13.6518 38.7257 15.3292C38.722 15.3333 38.719 15.338 38.715 15.342C42.7762 18.0838 45.443 22.6843 45.443 27.9018C45.443 32.1043 43.7145 35.9088 40.9199 38.6627L44.8682 42.5537C48.6733 38.8039 51.027 33.6237 51.027 27.9017C51.0272 21.0153 47.6086 14.9265 42.3623 11.1596Z" }),
+            React.createElement("path", { className: "action", fill: "#fff", d: "M30 13.9319C33.017 13.9319 35.4628 11.5697 35.4628 8.65588C35.4628 5.74203 33.017 3.37988 30 3.37988C26.983 3.37988 24.5374 5.74203 24.5374 8.65588C24.5374 11.5697 26.983 13.9319 30 13.9319Z" }))));
+};
+var RiskMarkerBaseStyled = styled(RiskMarkerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  box-sizing: border-box;\n  width: 60px;\n  height: 60px;\n\n  & > svg {\n    width: 100%;\n    height: 100%;\n  }  \n\n  & > span {\n    position: absolute;\n    display: block;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 2;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 16px;\n    font-weight: bold;\n    color: #476988;\n    pointer-events: none; // Don't capture SVG's mouse events\n    margin-bottom: 5px;\n  }\n\n  & > svg {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    cursor: pointer;\n    filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.8));\n  }\n\n  // By default, all first-level paths/g in marker are hidden.\n  & > svg > * { visibility: hidden; }\n     \n  // Unhide and color parts based on marker class.\n  &.unaudited {\n    .farm { visibility: visible; }\n    .arrow { visibility: visible; }\n    &:hover {\n      .farm-stroke { visibility: visible; fill: #888; }\n    }\n  }\n\n  &.audited {\n    .farm { visibility: visible; fill: #fff; }\n    .arrow { visibility: visible; fill: #fff; }\n    .no-action { visibility: visible; }\n    .background { visibility: visible; }\n    &:hover {\n      .background { fill: #fff; }\n    }\n  }\n\n  &.actioned {\n    .no-action { visibility: hidden; }\n    .audit { visibility: visible; }\n    .action { visibility: visible; }\n    .action-shadow { visibility: visible; }\n  }\n\n  .mapboxgl-marker.active {\n    span {\n      color: #fff;\n    }\n    .farm { fill: #273C44; }\n    .farm-stroke { visibility: visible; fill: #fff; }\n    .background { fill: #808080; }\n    &:hover {\n      .background { fill: #808080; }\n    }\n  }    \n"], ["\n  // Position and size:\n  position: relative;\n  box-sizing: border-box;\n  width: 60px;\n  height: 60px;\n\n  & > svg {\n    width: 100%;\n    height: 100%;\n  }  \n\n  & > span {\n    position: absolute;\n    display: block;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 2;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 16px;\n    font-weight: bold;\n    color: #476988;\n    pointer-events: none; // Don't capture SVG's mouse events\n    margin-bottom: 5px;\n  }\n\n  & > svg {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    cursor: pointer;\n    filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 0.8));\n  }\n\n  // By default, all first-level paths/g in marker are hidden.\n  & > svg > * { visibility: hidden; }\n     \n  // Unhide and color parts based on marker class.\n  &.unaudited {\n    .farm { visibility: visible; }\n    .arrow { visibility: visible; }\n    &:hover {\n      .farm-stroke { visibility: visible; fill: #888; }\n    }\n  }\n\n  &.audited {\n    .farm { visibility: visible; fill: #fff; }\n    .arrow { visibility: visible; fill: #fff; }\n    .no-action { visibility: visible; }\n    .background { visibility: visible; }\n    &:hover {\n      .background { fill: #fff; }\n    }\n  }\n\n  &.actioned {\n    .no-action { visibility: hidden; }\n    .audit { visibility: visible; }\n    .action { visibility: visible; }\n    .action-shadow { visibility: visible; }\n  }\n\n  .mapboxgl-marker.active {\n    span {\n      color: #fff;\n    }\n    .farm { fill: #273C44; }\n    .farm-stroke { visibility: visible; fill: #fff; }\n    .background { fill: #808080; }\n    &:hover {\n      .background { fill: #808080; }\n    }\n  }    \n"
+    /**
+     * A `RiskMarker` may be used in combination with `HtmlMarkerLayer`, or as
+     * component on its own.
+     *
+     * A `RiskMarker` can show the risk status of an object (by `color`), and whether
+     * there are open actions for this object (`actioned`). The value of the
+     * `RiskMarker` is its `value` property.
+     */
+])));
+/**
+ * A `RiskMarker` may be used in combination with `HtmlMarkerLayer`, or as
+ * component on its own.
+ *
+ * A `RiskMarker` can show the risk status of an object (by `color`), and whether
+ * there are open actions for this object (`actioned`). The value of the
+ * `RiskMarker` is its `value` property.
+ */
+var RiskMarker = function (props) {
+    return React.createElement(RiskMarkerBaseStyled, __assign({}, props));
+};
+export { RiskMarker };
+var templateObject_1;