@longline/aqua-ui 1.0.249 → 1.0.251

package/formatters/HumanFormatter/HumanFormatter.d.ts

@@ -9,7 +9,7 @@ interface IHumanFormatterProps {
     locale?: string;
     /**
      * Number of decimal places to show (overrides default formatting)
-     * @default undefined
+     * @default 0
      */
     decimals?: number;
 }

package/formatters/HumanFormatter/HumanFormatter.js

@@ -9,7 +9,7 @@ import * as React from 'react';
  * ```
  */
 var HumanFormatter = function (_a) {
-    var value = _a.value, _b = _a.locale, locale = _b === void 0 ? 'en' : _b, _c = _a.decimals, decimals = _c === void 0 ? 2 : _c;
+    var value = _a.value, _b = _a.locale, locale = _b === void 0 ? 'en' : _b, _c = _a.decimals, decimals = _c === void 0 ? 0 : _c;
     if (value == null)
         return null;
     var num = typeof value === 'string' ? parseFloat(value) : value;

package/map/controls/FullscreenButton/FullscreenButton.d.ts

@@ -6,6 +6,13 @@ interface IFullscreenButtonProps {
      * will be the map's direct container.
      */
     container?: HTMLDivElement;
+    /**
+     * For `map` mode, fullscreen mode affect map control only, but this will
+     * not work if the map has children that have expanding elements using
+     * portals.  In `document` mode, the entire application is made fullscreen.
+     * @default document
+     */
+    mode?: 'map' | 'document';
 }
 /**
  * The `FullscreenButton` toggles the map full-screen when clicked.
@@ -18,7 +25,7 @@ interface IFullscreenButtonProps {
  * ```
  */
 declare const FullscreenButton: {
-    ({ hint, ...props }: IMapButtonProps & IFullscreenButtonProps): React.JSX.Element;
+    ({ hint, mode, ...props }: IMapButtonProps & IFullscreenButtonProps): React.JSX.Element;
     displayName: string;
 };
 export { FullscreenButton, IFullscreenButtonProps };

package/map/controls/FullscreenButton/FullscreenButton.js

@@ -34,9 +34,8 @@ import { MapButton } from '../base/MapButton';
  * ```
  */
 var FullscreenButton = function (_a) {
-    var _b = _a.hint, hint = _b === void 0 ? React.createElement(React.Fragment, null, "Toggle fullscreen map") : _b, props = __rest(_a, ["hint"]);
+    var _b = _a.hint, hint = _b === void 0 ? React.createElement(React.Fragment, null, "Toggle fullscreen map") : _b, _c = _a.mode, mode = _c === void 0 ? 'document' : _c, props = __rest(_a, ["hint", "mode"]);
     var map = useMap().current;
-    //
     // Does the browser offer full screen support?
     var checkFullscreenSupport = function () {
         return !!(window.document.fullscreenEnabled ||
@@ -44,11 +43,16 @@ var FullscreenButton = function (_a) {
     };
     var toggle = function () {
         if (document.fullscreenElement === null) {
-            if (props.container) {
-                props.container.requestFullscreen();
+            if (mode == 'map') {
+                if (props.container) {
+                    props.container.requestFullscreen();
+                }
+                else {
+                    map.getContainer().requestFullscreen();
+                }
             }
             else {
-                map.getContainer().requestFullscreen();
+                window.document.documentElement.requestFullscreen();
             }
         }
         else {

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

@@ -61,6 +61,11 @@ interface IClusterLayerProps {
      * @default 99
      */
     maxZoom?: number;
+    /**
+     * Number of decimals to use in number formatting.
+     * @default 0
+     */
+    decimals?: number;
 }
 /**
  * A `ClusterLayer` manages its own `Source`. It does not take GeoJSON, but a list of objects which must at least have
@@ -86,7 +91,7 @@ interface IClusterLayerProps {
  * ```
  */
 declare const ClusterLayer: {
-    ({ relativeSize, radius, clusterRadius, clusterMaxZoom, minZoom, maxZoom, ringFields, clickZoom, ...props }: IClusterLayerProps): React.JSX.Element;
+    ({ relativeSize, radius, clusterRadius, clusterMaxZoom, minZoom, maxZoom, decimals, ringFields, clickZoom, ...props }: IClusterLayerProps): React.JSX.Element;
     displayName: string;
 };
 export { ClusterLayer, IClusterLayerProps };

package/map/layers/ClusterLayer/ClusterLayer.js

@@ -106,14 +106,14 @@ var ClusterLayerBase = function (_a) {
  * ```
  */
 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, _f = _a.minZoom, minZoom = _f === void 0 ? 0 : _f, _g = _a.maxZoom, maxZoom = _g === void 0 ? 99 : _g, ringFields = _a.ringFields, _h = _a.clickZoom, clickZoom = _h === void 0 ? false : _h, props = __rest(_a, ["relativeSize", "radius", "clusterRadius", "clusterMaxZoom", "minZoom", "maxZoom", "ringFields", "clickZoom"]);
-    var _j = React.useState(0), key = _j[0], setKey = _j[1];
+    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, _f = _a.minZoom, minZoom = _f === void 0 ? 0 : _f, _g = _a.maxZoom, maxZoom = _g === void 0 ? 99 : _g, _h = _a.decimals, decimals = _h === void 0 ? 0 : _h, ringFields = _a.ringFields, _j = _a.clickZoom, clickZoom = _j === void 0 ? false : _j, props = __rest(_a, ["relativeSize", "radius", "clusterRadius", "clusterMaxZoom", "minZoom", "maxZoom", "decimals", "ringFields", "clickZoom"]);
+    var _k = React.useState(0), key = _k[0], setKey = _k[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, minZoom: minZoom, maxZoom: maxZoom, ringFields: ringFields, clickZoom: clickZoom }, props));
+    return React.createElement(ClusterLayerBase, __assign({ key: key, relativeSize: relativeSize, radius: radius, clusterRadius: clusterRadius, clusterMaxZoom: clusterMaxZoom, minZoom: minZoom, maxZoom: maxZoom, decimals: decimals, ringFields: ringFields, clickZoom: clickZoom }, props));
 };
 ClusterLayer.displayName = "ClusterLayer";
 export { ClusterLayer };

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+interface IHtmlMarkerLayerProps {
+    /**
+     * 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. Features that do not have an ID field are not displayed.
+     */
+    idField: string;
+    /**
+     * Minimum zoom level at which to show markers.
+     * @default 0
+     */
+    minZoom?: number;
+    /**
+     * Maximum zoom level at which to show markers.
+     * @default 99
+     */
+    maxZoom?: number;
+}
+declare const HtmlMarkerLayer: {
+    ({ minZoom, maxZoom, ...props }: IHtmlMarkerLayerProps): React.JSX.Element;
+    displayName: string;
+};
+export { HtmlMarkerLayer, IHtmlMarkerLayerProps };

package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer copy.js

@@ -0,0 +1,176 @@
+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 * as ReactDOM from 'react-dom/client';
+import { Layer, useMap } from 'react-map-gl/mapbox';
+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.
+ *
+ * The `minZoom` and `maxZoom` properties can be used to make markers appear only
+ * within a range of zoom levels.
+ *
+ * ```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 HtmlMarkerLayerBase = 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({});
+    var minZoom = React.useRef(props.minZoom);
+    var maxZoom = React.useRef(props.maxZoom);
+    // 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 () {
+        minZoom.current = props.minZoom;
+        maxZoom.current = props.maxZoom;
+        children.current = props.children;
+        for (var id in markersOnScreen.current) {
+            markersOnScreen.current[id].remove();
+        }
+        markers.current = {};
+        markersOnScreen.current = {};
+        map.triggerRepaint();
+    }, [props.children, props.minZoom, props.maxZoom]);
+    // 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 a 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.getZoom() < minZoom.current || map.getZoom() > maxZoom.current) ? [] : 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;
+            var id = fprops[props.idField];
+            // Do not render makers without an ID field:
+            if (!id)
+                continue;
+            // 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 } }));
+};
+var HtmlMarkerLayer = function (_a) {
+    var _b = _a.minZoom, minZoom = _b === void 0 ? 0 : _b, _c = _a.maxZoom, maxZoom = _c === void 0 ? 99 : _c, props = __rest(_a, ["minZoom", "maxZoom"]);
+    return React.createElement(HtmlMarkerLayerBase, __assign({ minZoom: minZoom, maxZoom: maxZoom }, props));
+};
+HtmlMarkerLayer.displayName = 'HtmlMarkerLayer';
+export { HtmlMarkerLayer };

package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer.js

@@ -56,117 +56,111 @@ import { Marker } from 'mapbox-gl';
  * </Source>
  * ```
  */
-var HtmlMarkerLayerBase = function (props) {
+var HtmlMarkerLayerBase = function (_a) {
+    var children = _a.children, sourceId = _a.sourceId, idField = _a.idField, _b = _a.minZoom, minZoom = _b === void 0 ? 0 : _b, _c = _a.maxZoom, maxZoom = _c === void 0 ? 99 : _c;
     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({});
-    var minZoom = React.useRef(props.minZoom);
-    var maxZoom = React.useRef(props.maxZoom);
-    // 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 () {
-        minZoom.current = props.minZoom;
-        maxZoom.current = props.maxZoom;
-        children.current = props.children;
-        for (var id in markersOnScreen.current) {
-            markersOnScreen.current[id].remove();
+    var markersRef = React.useRef({});
+    var rootsRef = React.useRef({});
+    var visibleRef = React.useRef({});
+    var childrenFn = React.useRef(children);
+    var ensureMarker = React.useCallback(function (feature) {
+        var _a, _b, _c, _d, _e;
+        var id = feature.properties[idField];
+        if (!id)
+            return undefined;
+        var coords = feature.geometry.coordinates;
+        var props = __assign({ longitude: coords[0], latitude: coords[1] }, feature.properties);
+        var marker = markersRef.current[id];
+        if (!marker) {
+            var el = document.createElement('div');
+            var root = ReactDOM.createRoot(el);
+            root.render((_b = (_a = childrenFn.current) === null || _a === void 0 ? void 0 : _a.call(childrenFn, props)) !== null && _b !== void 0 ? _b : null);
+            marker = new Marker({ element: el }).setLngLat(coords);
+            marker.addTo(map.getMap());
+            markersRef.current[id] = marker;
+            rootsRef.current[id] = root;
         }
-        markers.current = {};
-        markersOnScreen.current = {};
-        map.triggerRepaint();
-    }, [props.children, props.minZoom, props.maxZoom]);
-    // 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))
+        else {
+            (_c = rootsRef.current[id]) === null || _c === void 0 ? void 0 : _c.render((_e = (_d = childrenFn.current) === null || _d === void 0 ? void 0 : _d.call(childrenFn, props)) !== null && _e !== void 0 ? _e : null);
+            marker.setLngLat(coords);
+        }
+        return marker;
+    }, [idField, map]);
+    var updateMarkers = React.useCallback(function () {
+        var _a;
+        if (!map.getSource(sourceId))
             return;
-        if (!map.isSourceLoaded(props.sourceId))
+        if (!map.isSourceLoaded(sourceId))
+            return;
+        if (map.getZoom() < minZoom || map.getZoom() > maxZoom)
             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 a 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.getZoom() < minZoom.current || map.getZoom() > maxZoom.current) ? [] : map.querySourceFeatures(props.sourceId).filter(function (f) {
-            var id = f.properties[props.idField];
-            return seen.hasOwnProperty(id) ? false : (seen[id] = true);
+        var features = map.querySourceFeatures(sourceId).filter(function (f) {
+            var _a;
+            var id = (_a = f.properties) === null || _a === void 0 ? void 0 : _a[idField];
+            if (!id || seen[id])
+                return false;
+            seen[id] = true;
+            return 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 = {};
+        var newVisible = {};
         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;
-            var id = fprops[props.idField];
-            // Do not render makers without an ID field:
-            if (!id)
-                continue;
-            // 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());
+            var id = feature.properties[idField];
+            var marker = ensureMarker(feature);
+            if (marker)
+                newVisible[id] = marker;
         }
-        // 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();
+        for (var id in visibleRef.current) {
+            if (!newVisible[id]) {
+                visibleRef.current[id].remove();
+                (_a = rootsRef.current[id]) === null || _a === void 0 ? void 0 : _a.unmount();
+                delete markersRef.current[id];
+                delete rootsRef.current[id];
+            }
         }
-        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 } }));
+        visibleRef.current = newVisible;
+    }, [map, sourceId, idField, minZoom, maxZoom, ensureMarker]);
+    React.useEffect(function () {
+        if (!map)
+            return undefined;
+        var onSourceData = function (e) {
+            if (e.sourceId === sourceId && e.isSourceLoaded) {
+                updateMarkers();
+            }
+        };
+        var onRender = function () {
+            updateMarkers();
+        };
+        map.on('sourcedata', onSourceData);
+        map.on('render', onRender);
+        return function () {
+            map.off('sourcedata', onSourceData);
+            map.off('render', onRender);
+            // ✅ Defer cleanup until after React has finished unmounting
+            requestAnimationFrame(function () {
+                var _a;
+                for (var id in markersRef.current) {
+                    try {
+                        markersRef.current[id].remove();
+                    }
+                    catch (_b) { }
+                    try {
+                        (_a = rootsRef.current[id]) === null || _a === void 0 ? void 0 : _a.unmount();
+                    }
+                    catch (_c) { }
+                }
+                markersRef.current = {};
+                rootsRef.current = {};
+                visibleRef.current = {};
+            });
+        };
+    }, [map, sourceId, updateMarkers]);
+    React.useEffect(function () {
+        childrenFn.current = children;
+        updateMarkers();
+    }, [children, updateMarkers]);
+    return React.createElement(Layer, { source: sourceId, type: "circle", paint: { 'circle-radius': 0 } });
 };
 var HtmlMarkerLayer = function (_a) {
     var _b = _a.minZoom, minZoom = _b === void 0 ? 0 : _b, _c = _a.maxZoom, maxZoom = _c === void 0 ? 99 : _c, props = __rest(_a, ["minZoom", "maxZoom"]);

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

@@ -23,6 +23,11 @@ interface IClusterMarkerProps {
      * ranging from green to red. There should be exactly 5 values.
      */
     ringValues?: number[];
+    /**
+     * Number of decimals to use in number formatting.
+     * @default 0
+     */
+    decimals?: number;
     /**
      * Fired when the marker is clicked.
      */
@@ -33,7 +38,7 @@ interface IClusterMarkerProps {
  *
  */
 declare const ClusterMarker: {
-    ({ radius, relativeSize, value, ...props }: IClusterMarkerProps): React.JSX.Element;
+    ({ radius, relativeSize, value, decimals, ...props }: IClusterMarkerProps): React.JSX.Element;
     displayName: string;
 };
 export { ClusterMarker, IClusterMarkerProps };

package/map/markers/ClusterMarker/ClusterMarker.js

@@ -85,7 +85,7 @@ var ClusterMarkerBase = function (props) {
         props.ringValues &&
             React.createElement("svg", null, renderValueRings()),
         React.createElement("span", null,
-            React.createElement(HumanFormatter, { value: props.value }))));
+            React.createElement(HumanFormatter, { value: props.value, decimals: props.decimals }))));
 };
 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"
     /**
@@ -98,10 +98,10 @@ var ClusterMarkerStyled = styled(ClusterMarkerBase)(templateObject_1 || (templat
  *
  */
 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 _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, _e = _a.decimals, decimals = _e === void 0 ? 0 : _e, props = __rest(_a, ["radius", "relativeSize", "value", "decimals"]);
     var step = Math.log10(Math.max(1, value));
     var r = radius + step * relativeSize;
-    return React.createElement(ClusterMarkerStyled, __assign({ radius: r, value: value }, props));
+    return React.createElement(ClusterMarkerStyled, __assign({ radius: r, value: value, decimals: decimals }, props));
 };
 ClusterMarker.displayName = 'ClusterMarker';
 export { ClusterMarker };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.249",
+  "version": "1.0.251",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",