@longline/aqua-ui 1.0.0 → 1.0.8

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

@@ -1,71 +0,0 @@
-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

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

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

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

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

@@ -1,17 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

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

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

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

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

@@ -1,79 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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 };

package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer.js

@@ -1,151 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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 };