@longline/aqua-ui 1.0.0

package/map/controls/base/MapButton/MapButton.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { IMapControlProps } from '../MapControl';
+interface IMapButtonProps extends IMapControlProps {
+    /**
+     * Is the button currently active?
+     * @default false*
+     */
+    active?: boolean;
+    /**
+     * Is the button currently disabled?
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional hint to show on hover. This can be JSX. No hint is shown if this value is `null`.
+     */
+    hint?: React.ReactNode;
+    /**
+     * Button size in pixels.
+     * @defaultValue 32
+     */
+    size?: number;
+    /**
+     * Is this button grouped with siblings? This is the case when it is inside a `MapButtonGroup`.
+     */
+    grouped?: boolean;
+}
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /**
+     * Fired when the map button is clicked.
+     */
+    onClick: () => void;
+}
+/**
+ * A `MapButton` is a square button to be used on a Mapbox map. It must
+ * be provided with the `ViewState` by the underlying `Map`.
+ *
+ * This component is **abstract**: the button has no content by itself,
+ * which must be provided by its child.
+ */
+declare const MapButton: ({ size, disabled, active, grouped, ...props }: IProps & IMapButtonProps) => React.JSX.Element;
+export { MapButton, IMapButtonProps, IProps };

package/map/controls/base/MapButton/MapButton.js

@@ -0,0 +1,71 @@
+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, { css } from 'styled-components';
+import { Hint } from './Hint';
+import { MapControl } from '../MapControl';
+var MapButtonBase = function (props) {
+    var handleClick = function () {
+        if (props.disabled)
+            return;
+        if (props.onClick)
+            props.onClick();
+    };
+    var renderButton = function () {
+        return React.createElement("div", { className: props.className, tabIndex: props.disabled ? -1 : 0, onClick: handleClick },
+            React.createElement(Button, { "$grouped": props.grouped, "$size": props.size, "$disabled": props.disabled, "$active": props.active }, props.children),
+            props.hint &&
+                React.createElement(Hint, { offset: 12, side: props.x < 0 ? "right" : "left" }, props.hint));
+    };
+    if (props.grouped)
+        return renderButton();
+    return React.createElement(MapControl, { x: props.x, y: props.y }, renderButton());
+};
+// const Teardrop = styled.svg<{ $disabled: boolean }>`
+var Button = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([" \n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  background-color: ", ";\n\n  // Border:\n  border-radius: 4px;\n\n  ", "\n\n  svg {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: 8px;\n    fill: ", ";\n    transition: fill ease-in-out ", "ms;\n  }\n\n  // Hover:\n  div:hover > & {\n    background-color: ", ";\n  }\n\n  ", "\n\n  // Disabled:\n  ", "\n"], [" \n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  background-color: ", ";\n\n  // Border:\n  border-radius: 4px;\n\n  ", "\n\n  svg {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: 8px;\n    fill: ", ";\n    transition: fill ease-in-out ", "ms;\n  }\n\n  // Hover:\n  div:hover > & {\n    background-color: ", ";\n  }\n\n  ", "\n\n  // Disabled:\n  ", "\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.$grouped && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    div:first-child > & {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    div:not(:last-child):not(:first-child) > & {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    div:last-child > & {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n    }\n  "], ["\n    div:first-child > & {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    div:not(:last-child):not(:first-child) > & {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n    div:last-child > & {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n    }\n  "]))); }, function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.neutral[95]; }, function (p) { return p.$active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", " !important;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    background-color: ", " !important;\n    svg {\n      fill: ", ";\n    }\n  "])), function (p) { return p.theme.colors.accent; }, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.$disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    cursor: default;\n    background-color: ", ";\n    svg { fill: ", "; }    \n  "], ["\n    cursor: default;\n    background-color: ", ";\n    svg { fill: ", "; }    \n  "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.primary[3]; }); });
+var MapButtonStyled = styled(MapButtonBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  pointer-events: all;\n\n  // Size control:\n  width: ", "px;\n  height: ", "px;\n\n  outline: 0;\n  user-select: none;\n\n  // Grouped button has a separator border (though not the last button in the group):\n  ", "\n\n  // Hint positioning:\n  div:nth-child(2) {\n    opacity: 0;\n  }\n\n  // Hover:\n  &:hover {\n    div:nth-child(2) {\n      opacity: 1;\n    }\n  }\n\n  // Disabled mode:\n  ", "  \n"], ["\n  position: relative;\n  pointer-events: all;\n\n  // Size control:\n  width: ", "px;\n  height: ", "px;\n\n  outline: 0;\n  user-select: none;\n\n  // Grouped button has a separator border (though not the last button in the group):\n  ", "\n\n  // Hint positioning:\n  div:nth-child(2) {\n    opacity: 0;\n  }\n\n  // Hover:\n  &:hover {\n    div:nth-child(2) {\n      opacity: 1;\n    }\n  }\n\n  // Disabled mode:\n  ", "  \n"
+    /**
+     * A `MapButton` is a square button to be used on a Mapbox map. It must
+     * be provided with the `ViewState` by the underlying `Map`.
+     *
+     * This component is **abstract**: the button has no content by itself,
+     * which must be provided by its child.
+     */
+])), function (p) { return p.size; }, function (p) { return p.size; }, function (p) { return p.grouped && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    &:not(:last-child) {\n      border-bottom: solid 1px ", ";\n    }    \n  "], ["\n    &:not(:last-child) {\n      border-bottom: solid 1px ", ";\n    }    \n  "])), function (p) { return p.theme.colors.neutral[80]; }); }, function (p) { return p.disabled && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    pointer-events: none;\n    cursor: default;\n  "], ["\n    pointer-events: none;\n    cursor: default;\n  "]))); });
+/**
+ * A `MapButton` is a square button to be used on a Mapbox map. It must
+ * be provided with the `ViewState` by the underlying `Map`.
+ *
+ * This component is **abstract**: the button has no content by itself,
+ * which must be provided by its child.
+ */
+var MapButton = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 32 : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.grouped, grouped = _e === void 0 ? false : _e, props = __rest(_a, ["size", "disabled", "active", "grouped"]);
+    return React.createElement(MapButtonStyled, __assign({ size: size, disabled: disabled, active: active, grouped: grouped }, props));
+};
+export { MapButton };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/map/controls/base/MapButton/index.d.ts

@@ -0,0 +1 @@
+export { MapButton, IMapButtonProps } from './MapButton';

package/map/controls/base/MapButton/index.js

@@ -0,0 +1 @@
+export { MapButton } from './MapButton';

package/map/controls/base/MapButtonGroup/MapButtonGroup.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { IMapControlProps } from '../MapControl';
+interface IProps extends IMapControlProps {
+    /**
+     * Children must be one or more `MapButton`-derived components.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A `MapButtonGroup` groups `MapButton`-derived components, like `ZoomInButton` and `CompassButton`.
+ * It removes button borders, leaving a thin separator line between buttons.
+ *
+ * The button children do not need `x` and `y` coordinates.  Instead, coordinates are set once
+ * through `MapButtonGroup`.
+ */
+declare const MapButtonGroup: (props: IProps) => React.JSX.Element;
+export { MapButtonGroup };

package/map/controls/base/MapButtonGroup/MapButtonGroup.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { MapControl } from '../MapControl';
+/**
+ * A `MapButtonGroup` groups `MapButton`-derived components, like `ZoomInButton` and `CompassButton`.
+ * It removes button borders, leaving a thin separator line between buttons.
+ *
+ * The button children do not need `x` and `y` coordinates.  Instead, coordinates are set once
+ * through `MapButtonGroup`.
+ */
+var MapButtonGroup = function (props) {
+    return (React.createElement(MapControl, { x: props.x, y: props.y },
+        React.createElement("div", { className: props.className }, React.Children.map(props.children, function (child) {
+            if (child == null)
+                return null;
+            return React.cloneElement(child, {
+                // X-coordinate is required to determine if Hint aligns left or right.
+                x: props.x,
+                // If there's only one child, then grouped should be false, or we'd get
+                // a single button with no borders.
+                grouped: React.Children.count(props.children) > 1
+            });
+        }))));
+};
+export { MapButtonGroup };

package/map/controls/base/MapControl/MapControl.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+interface IMapControlProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * (From `MapControl`): Horizontal button position. A positive value is an offset from
+     * the left, and a negative value is an offset from the right.
+     * @default 0
+     */
+    x?: number;
+    /**
+     * (From `MapControl`): Vertical button position. A positive value is an offset from the
+     * top, and a negative value is an offset from the bottom.
+     * @default 0
+     */
+    y?: number;
+}
+/**
+ * `MapControl` positions a control of top of a map, taking Mapbox `padding`
+ * into account.
+ *
+ * The control is positioned using `x` and `y`. Positive values mean offset from
+ * left and top, and negative coordinates mean offsets from right and bottom.
+ *
+ * This component is **abstract**: the button has no content by itself,
+ * which must be provided by its child.
+ *
+ * **Note**: `MapControl` has `pointer-events: none`. It is the responsibility of
+ * the wrapped control to set `pointer-events: all`. This is done to accommodate
+ * controls that must not capture pointer events, such as `MapLoader`
+ * and `ScaleControl`.
+ */
+declare const MapControl: ({ x, y, ...props }: IMapControlProps & {
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export { MapControl, IMapControlProps };

package/map/controls/base/MapControl/MapControl.js

@@ -0,0 +1,77 @@
+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 { useViewState } from '../../../Map';
+import styled from 'styled-components';
+var MapControlBase = function (props) {
+    var viewState = useViewState();
+    return (React.createElement("div", { className: props.className, style: {
+            // Must calculate this style dynamically, because it needs local state.
+            left: props.x >= 0 ? "".concat(props.x + viewState.padding.left, "px") : 'auto',
+            right: props.x < 0 ? "".concat(viewState.padding.right - props.x, "px") : 'auto',
+            top: props.y >= 0 ? "".concat(props.y + viewState.padding.top, "px") : 'auto',
+            bottom: props.y < 0 ? "".concat(-props.y - -viewState.padding.bottom, "px") : 'auto'
+        } }, props.children));
+};
+var MapControlStyled = styled(MapControlBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 100;\n  box-sizing: border-box;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  z-index: 100;\n  box-sizing: border-box;\n  pointer-events: none;\n"
+    /**
+     * `MapControl` positions a control of top of a map, taking Mapbox `padding`
+     * into account.
+     *
+     * The control is positioned using `x` and `y`. Positive values mean offset from
+     * left and top, and negative coordinates mean offsets from right and bottom.
+     *
+     * This component is **abstract**: the button has no content by itself,
+     * which must be provided by its child.
+     *
+     * **Note**: `MapControl` has `pointer-events: none`. It is the responsibility of
+     * the wrapped control to set `pointer-events: all`. This is done to accommodate
+     * controls that must not capture pointer events, such as `MapLoader`
+     * and `ScaleControl`.
+     */
+])));
+/**
+ * `MapControl` positions a control of top of a map, taking Mapbox `padding`
+ * into account.
+ *
+ * The control is positioned using `x` and `y`. Positive values mean offset from
+ * left and top, and negative coordinates mean offsets from right and bottom.
+ *
+ * This component is **abstract**: the button has no content by itself,
+ * which must be provided by its child.
+ *
+ * **Note**: `MapControl` has `pointer-events: none`. It is the responsibility of
+ * the wrapped control to set `pointer-events: all`. This is done to accommodate
+ * controls that must not capture pointer events, such as `MapLoader`
+ * and `ScaleControl`.
+ */
+var MapControl = function (_a) {
+    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, props = __rest(_a, ["x", "y"]);
+    return React.createElement(MapControlStyled, __assign({ x: x, y: y }, props));
+};
+export { MapControl };
+var templateObject_1;

package/map/controls/base/MapControl/index.d.ts

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

package/map/controls/base/MapControl/index.js

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

package/map/layers/ClusterLayer/ClusterLayer.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+interface IItem {
+    latitude: number;
+    longitude: number;
+}
+interface IProps {
+    /**
+     * Array of items that must be clustered. Each item must at least have
+     * a `latitude` and `longitude` key.
+     */
+    items: IItem[];
+    /**
+     * Radius of cluster (in pixels).
+     * @default 18
+     */
+    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;
+    /**
+     * If provided, then this property will be extracted from features and a
+     * sum is calculated for each cluster.  This is the value that will be
+     * printed on clusters.  If omitted, `point_count` is used.
+     */
+    aggregation?: string;
+    /**
+     * RingFields are drawn as colored segments around the cluster marker.
+     * For each ring field, provide a (numeric) item property.
+     * @default []
+     */
+    ringFields?: string[];
+    /**
+     * Radius of each cluster. A value of 512 indicates a radius equal to the width
+     * of a tile.
+     * @default 80
+     */
+    clusterRadius?: number;
+    /**
+     * Max zoom on which to cluster points. Defaults to one zoom less than maxzoom
+     * (so that last zoom features are not clustered). Clusters are re-evaluated at
+     * integer zoom levels so setting clusterMaxZoom to 14 means the clusters will
+     * be displayed until z15.
+     * @default 18
+     */
+    clusterMaxZoom?: number;
+    /**
+     * If set, clicking a cluster zooms the map to its extent.
+     * @default false
+     */
+    clickZoom?: boolean;
+}
+/**
+ * A `ClusterLayer` manages its own `Source`. It does not takes GeoJSON, but a list of objects which must at least have
+ * `latitude` and `longitude` keys. Other object keys may be used for the aggregate values of clusters; if no field is
+ * supplied, then the cluster will display the number of features inside them (the `point_count`).
+ *
+ * A `ClusterLayer` uses `HtmlMarkerLayer`, providing it with its own preset marker.
+ *
+ * `ringFields` is an array of strings, each element being a key in the layer input items. For each cluster, the field
+ * values are aggregated, and then an arc is painted on the cluster marker which correspond to that field's weight
+ * compared to the other `ringFields`.
+ *
+ * ```tsx
+ * const items = [
+ *   { latitude: 23.3, longitude: 16.6, population: 100 },
+ *   { latitude: 24.5, longitude: 17.2, population: 250 },
+ *   ...
+ * ];
+ *
+ * <Map>
+ *   <ClusterLayer items={items} aggregation="population"/>
+ * </Map>
+ * ```
+ */
+declare const ClusterLayer: ({ relativeSize, radius, clusterRadius, clusterMaxZoom, ringFields, clickZoom, ...props }: IProps) => React.JSX.Element;
+export { ClusterLayer };

package/map/layers/ClusterLayer/ClusterLayer.js

@@ -0,0 +1,118 @@
+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 { Source, useMap } from 'react-map-gl';
+import { HtmlMarkerLayer } from '../HtmlMarkerLayer/HtmlMarkerLayer';
+import { ClusterMarker } from '../../markers/ClusterMarker';
+function uuidv4() {
+    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, function (c) {
+        return (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16);
+    });
+}
+var ClusterLayerBase = function (_a) {
+    var _b = _a.relativeSize, relativeSize = _b === void 0 ? 0 : _b, _c = _a.radius, radius = _c === void 0 ? 18 : _c, _d = _a.clusterRadius, clusterRadius = _d === void 0 ? 80 : _d, _e = _a.clusterMaxZoom, clusterMaxZoom = _e === void 0 ? 18 : _e, _f = _a.ringFields, ringFields = _f === void 0 ? [] : _f, _g = _a.clickZoom, clickZoom = _g === void 0 ? false : _g, props = __rest(_a, ["relativeSize", "radius", "clusterRadius", "clusterMaxZoom", "ringFields", "clickZoom"]);
+    var map = useMap().current;
+    // Generate a random, unique source ID:
+    var sourceId = React.useRef(uuidv4()).current;
+    var itemsToFeatures = React.useMemo(function () {
+        var collection = {
+            type: 'FeatureCollection',
+            // Return a feature for each item.
+            features: props.items.map(function (f) {
+                var _a;
+                // Build feature's propeties:
+                var properties = {};
+                // If an aggregation was provided, copy its value to the GeoJSON.
+                if (props.aggregation) {
+                    properties[props.aggregation] = (_a = f[props.aggregation]) !== null && _a !== void 0 ? _a : 0;
+                }
+                // If ringFields were provided, copy their values to the GeoJSON.
+                ringFields.forEach(function (rf) { return properties[rf] = f[rf]; });
+                return {
+                    type: 'Feature',
+                    geometry: { type: 'Point', coordinates: [f.longitude, f.latitude] },
+                    properties: properties
+                };
+            })
+        };
+        return collection;
+    }, [props.items]);
+    // Cluster properties calculations:
+    // * The `aggregation` is summed.
+    // * Each `ringField` is summed.  
+    var clusterProperties = React.useMemo(function () {
+        var obj = {};
+        if (props.aggregation)
+            obj["sum"] = ["+", ["get", props.aggregation]];
+        ringFields.forEach(function (rf) { return obj[rf] = ["+", ["get", rf]]; });
+        return obj;
+    }, [props.aggregation, ringFields]);
+    var handleClick = function (longitude, latitude, cluster_id) {
+        map.getSource(sourceId).getClusterExpansionZoom(cluster_id, function (err, zoom) {
+            if (err)
+                return;
+            map.easeTo({
+                center: [longitude, latitude],
+                zoom: zoom
+            });
+        });
+    };
+    return (React.createElement(Source, { id: sourceId, type: 'geojson', data: itemsToFeatures, cluster: true, clusterRadius: clusterRadius, clusterMaxZoom: clusterMaxZoom, clusterProperties: __assign({}, clusterProperties) },
+        React.createElement(HtmlMarkerLayer, { sourceId: sourceId, idField: "cluster_id" }, function (markerProps) {
+            return React.createElement(ClusterMarker, __assign({ relativeSize: relativeSize, radius: radius, value: props.aggregation ? markerProps['sum'] : markerProps['point_count'], ringValues: ringFields.map(function (f) { return markerProps[f]; }), onClick: clickZoom ? function () { return handleClick(markerProps.longitude, markerProps.latitude, markerProps.cluster_id); } : null }, markerProps));
+        })));
+};
+/**
+ * A `ClusterLayer` manages its own `Source`. It does not takes GeoJSON, but a list of objects which must at least have
+ * `latitude` and `longitude` keys. Other object keys may be used for the aggregate values of clusters; if no field is
+ * supplied, then the cluster will display the number of features inside them (the `point_count`).
+ *
+ * A `ClusterLayer` uses `HtmlMarkerLayer`, providing it with its own preset marker.
+ *
+ * `ringFields` is an array of strings, each element being a key in the layer input items. For each cluster, the field
+ * values are aggregated, and then an arc is painted on the cluster marker which correspond to that field's weight
+ * compared to the other `ringFields`.
+ *
+ * ```tsx
+ * const items = [
+ *   { latitude: 23.3, longitude: 16.6, population: 100 },
+ *   { latitude: 24.5, longitude: 17.2, population: 250 },
+ *   ...
+ * ];
+ *
+ * <Map>
+ *   <ClusterLayer items={items} aggregation="population"/>
+ * </Map>
+ * ```
+ */
+var ClusterLayer = function (_a) {
+    var _b = _a.relativeSize, relativeSize = _b === void 0 ? 0 : _b, _c = _a.radius, radius = _c === void 0 ? 24 : _c, _d = _a.clusterRadius, clusterRadius = _d === void 0 ? 80 : _d, _e = _a.clusterMaxZoom, clusterMaxZoom = _e === void 0 ? 18 : _e, ringFields = _a.ringFields, _f = _a.clickZoom, clickZoom = _f === void 0 ? false : _f, props = __rest(_a, ["relativeSize", "radius", "clusterRadius", "clusterMaxZoom", "ringFields", "clickZoom"]);
+    var _g = React.useState(0), key = _g[0], setKey = _g[1];
+    // When aggregation changes, we mount a whole new component. Mapbox does not 
+    // appear to deal with changes to clusterProperties well.
+    React.useEffect(function () {
+        setKey(Date.now());
+    }, [props.aggregation, ringFields]);
+    return React.createElement(ClusterLayerBase, __assign({ key: key, relativeSize: relativeSize, radius: radius, clusterRadius: clusterRadius, clusterMaxZoom: clusterMaxZoom, ringFields: ringFields, clickZoom: clickZoom }, props));
+};
+export { ClusterLayer };

package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+interface IProps {
+    /**
+     * Function that returns a marker component. Properties that `HtmlMarkerLayer`
+     * makes available to the component are passed in as `props`.
+     * e.g. `{(p) => <MyMarker {...p} bordered flashing/>}`
+     */
+    children?: (props: any) => React.ReactNode;
+    /**
+     * ID of the source that's queried.
+     */
+    sourceId: string;
+    /**
+     * Every feature must have a unique ID in its properties. This is used to
+     * tell features apart. If the `source` should ever change, then it is
+     * important that new items have new IDs, so that old markers get removed
+     * correctly.
+     */
+    idField: string;
+}
+/**
+ * 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>
+ * ```
+ */
+declare const HtmlMarkerLayer: (props: IProps) => React.JSX.Element;
+export { HtmlMarkerLayer };