@longline/aqua-ui 1.0.339 → 1.0.340

package/map/layers/ClusterLayer/ClusterLayer.js

@@ -24,13 +24,15 @@ import * as React from 'react';
 import { Source, useMap } from 'react-map-gl/mapbox';
 import { HtmlMarkerLayer } from '../HtmlMarkerLayer/HtmlMarkerLayer';
 import { ClusterMarker } from '../../markers/ClusterMarker';
+// Default cluster radius in pixels (see IClusterLayerProps.radius).
+var DEFAULT_RADIUS = 24;
 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 _b = _a.relativeSize, relativeSize = _b === void 0 ? 0 : _b, _c = _a.radius, radius = _c === void 0 ? DEFAULT_RADIUS : _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;
@@ -68,6 +70,8 @@ var ClusterLayerBase = function (_a) {
         return obj;
     }, [props.aggregation, ringFields]);
     var handleClick = function (longitude, latitude, cluster_id) {
+        if (!map)
+            return;
         map.getSource(sourceId).getClusterExpansionZoom(cluster_id, function (err, zoom) {
             if (err)
                 return;
@@ -79,7 +83,7 @@ var ClusterLayerBase = function (_a) {
     };
     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", minZoom: props.minZoom, maxZoom: props.maxZoom }, 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));
+            return React.createElement(ClusterMarker, __assign({ relativeSize: relativeSize, radius: radius, value: props.aggregation ? markerProps['sum'] : markerProps['point_count'], decimals: props.decimals, ringValues: ringFields.map(function (f) { return markerProps[f]; }), onClick: clickZoom ? function () { return handleClick(markerProps.longitude, markerProps.latitude, markerProps.cluster_id); } : null }, markerProps));
         })));
 };
 /**
@@ -106,7 +110,7 @@ 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, _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 _b = _a.relativeSize, relativeSize = _b === void 0 ? 0 : _b, _c = _a.radius, radius = _c === void 0 ? DEFAULT_RADIUS : _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.

package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer.js

@@ -65,6 +65,8 @@ var HtmlMarkerLayerBase = function (_a) {
     var childrenFn = React.useRef(children);
     var ensureMarker = React.useCallback(function (feature) {
         var _a, _b, _c, _d, _e;
+        if (!map)
+            return undefined;
         var id = feature.properties[idField];
         if (!id)
             return undefined;
@@ -87,7 +89,9 @@ var HtmlMarkerLayerBase = function (_a) {
         return marker;
     }, [idField, map]);
     var updateMarkers = React.useCallback(function () {
-        var _a, _b;
+        var _a, _b, _c;
+        if (!map)
+            return;
         if (!map.getSource(sourceId))
             return;
         if (!map.isSourceLoaded(sourceId))
@@ -116,7 +120,7 @@ var HtmlMarkerLayerBase = function (_a) {
         var newVisible = {};
         for (var _i = 0, features_1 = features; _i < features_1.length; _i++) {
             var feature = features_1[_i];
-            var id = feature.properties[idField];
+            var id = (_b = feature.properties) === null || _b === void 0 ? void 0 : _b[idField];
             var marker = ensureMarker(feature);
             if (marker)
                 newVisible[id] = marker;
@@ -124,7 +128,7 @@ var HtmlMarkerLayerBase = function (_a) {
         for (var id in visibleRef.current) {
             if (!newVisible[id]) {
                 visibleRef.current[id].remove();
-                (_b = rootsRef.current[id]) === null || _b === void 0 ? void 0 : _b.unmount();
+                (_c = rootsRef.current[id]) === null || _c === void 0 ? void 0 : _c.unmount();
                 delete markersRef.current[id];
                 delete rootsRef.current[id];
             }
@@ -147,7 +151,7 @@ var HtmlMarkerLayerBase = function (_a) {
         return function () {
             map.off('sourcedata', onSourceData);
             map.off('render', onRender);
-            // ✅ Defer cleanup until after React has finished unmounting
+            // Defer cleanup until after React has finished unmounting.
             requestAnimationFrame(function () {
                 var _a;
                 for (var id in markersRef.current) {

package/map/layers/IdwBlendLayer/IdwBlendLayer.js

@@ -27,6 +27,10 @@ import { VertexShader } from './VertexShader';
 import { FragmentShader } from './FragmentShader';
 import { RgbColor } from '../../../helper/RgbColor';
 import { PresetGradients } from '../../../controls/Gradient';
+// Default prop values, referenced both by the IdwBlendLayerBase fallbacks and
+// the IdwBlendLayer wrapper below.
+var DEFAULT_MIN_ZOOM = 0;
+var DEFAULT_MAX_ZOOM = 99;
 var IdwBlendLayerBase = function (props) {
     var map = useMap();
     var discProgram = React.useRef(null);
@@ -92,11 +96,12 @@ var IdwBlendLayerBase = function (props) {
         discBuffer.current = createPointsBuffer(gl, props.data);
     };
     var onRender = function (gl, matrix, zoom, width, height) {
+        var _a, _b;
         // Render is called many times while the map is panned/zoomed.
         // You cannot have access to the map though.
-        if (zoom < props.minZoom)
+        if (zoom < ((_a = props.minZoom) !== null && _a !== void 0 ? _a : DEFAULT_MIN_ZOOM))
             return;
-        if (zoom > props.maxZoom)
+        if (zoom > ((_b = props.maxZoom) !== null && _b !== void 0 ? _b : DEFAULT_MAX_ZOOM))
             return;
         // Render is called many times while the map is panned/zoomed.
         // You cannot have access to the map though.
@@ -115,14 +120,14 @@ var IdwBlendLayerBase = function (props) {
         //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, props.data.length * 4);
     };
-    return (React.createElement(Layer, { id: null, type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getZoom(), map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
+    return (React.createElement(Layer, { id: "", type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getZoom(), map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
 };
 /**
  * An `IdwLayer` takes a data array of the form `{ latitude, longitude, value }`,
  * and renders a colored surface using inverse distance weighting.
  */
 var IdwBlendLayer = function (_a) {
-    var _b = _a.gradientStops, gradientStops = _b === void 0 ? PresetGradients.Blue : _b, _c = _a.minZoom, minZoom = _c === void 0 ? 0 : _c, _d = _a.maxZoom, maxZoom = _d === void 0 ? 99 : _d, _e = _a.maxDistance, maxDistance = _e === void 0 ? 0.0002 : _e, _f = _a.fadeFraction, fadeFraction = _f === void 0 ? 0.15 : _f, props = __rest(_a, ["gradientStops", "minZoom", "maxZoom", "maxDistance", "fadeFraction"]);
+    var _b = _a.gradientStops, gradientStops = _b === void 0 ? PresetGradients.Blue : _b, _c = _a.minZoom, minZoom = _c === void 0 ? DEFAULT_MIN_ZOOM : _c, _d = _a.maxZoom, maxZoom = _d === void 0 ? DEFAULT_MAX_ZOOM : _d, _e = _a.maxDistance, maxDistance = _e === void 0 ? 0.0002 : _e, _f = _a.fadeFraction, fadeFraction = _f === void 0 ? 0.15 : _f, props = __rest(_a, ["gradientStops", "minZoom", "maxZoom", "maxDistance", "fadeFraction"]);
     return React.createElement(IdwBlendLayerBase, __assign({ gradientStops: gradientStops, minZoom: minZoom, maxZoom: maxZoom, maxDistance: maxDistance, fadeFraction: fadeFraction }, props));
 };
 IdwBlendLayer.displayName = 'IdwBlendLayer';

package/map/layers/IdwLayer/IdwLayer.d.ts

@@ -31,7 +31,8 @@ interface IIdwLayerProps {
      */
     maxDistance?: number;
     /**
-     * Thickness of fading edge of blob (value 0..1)
+     * Thickness of fading edge of blob, as a fraction of `maxDistance`,
+     * clamped to the range 0..1.
      * @default 0.15
      */
     fadeFraction?: number;