@longline/aqua-ui 1.0.338 → 1.0.340

package/map/controls/Geocoder/Geocoder.js

@@ -33,27 +33,34 @@ import { GeocoderList } from './GeocoderList';
 import { GeocoderSelector } from './GeocoderSelector';
 import { MapControl } from '../base/MapControl';
 import { useOutsideClose } from '../../../hooks/useOutsideClose';
+// Default prop values, referenced both by the GeocoderBase fallbacks and the
+// Geocoder wrapper below.
+var DEFAULT_SEARCH_ICON = false;
+var DEFAULT_PLACEHOLDER = "Type to search places";
+var DEFAULT_UPWARDS = false;
 var GeocoderBase = function (props) {
+    var _a, _b, _c;
     var wrapperRef = React.useRef(null);
     var map = useMap().current;
     // Timer is used for debouncing requests:
-    var _a = React.useState(null), timer = _a[0], setTimer = _a[1];
+    var _d = React.useState(null), timer = _d[0], setTimer = _d[1];
     // Current query:
-    var _b = React.useState(""), q = _b[0], setQ = _b[1];
+    var _e = React.useState(""), q = _e[0], setQ = _e[1];
     // Currently retrieved features:
-    var _c = React.useState([]), features = _c[0], setFeatures = _c[1];
+    var _f = React.useState([]), features = _f[0], setFeatures = _f[1];
     // Offset of currently-selected feature (0-based):
-    var _d = React.useState(-1), selectedIndex = _d[0], setSelectedIndex = _d[1];
+    var _g = React.useState(-1), selectedIndex = _g[0], setSelectedIndex = _g[1];
     //
     // Clear the control, removing any items.
     // Focus on input.
     //  
     var clear = function () {
+        var _a;
         setQ("");
         setFeatures([]);
         setSelectedIndex(-1);
-        if (wrapperRef)
-            wrapperRef.current.querySelector('input').focus();
+        if (wrapperRef.current)
+            (_a = wrapperRef.current.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
     };
     useOutsideClose({
         open: features.length > 0,
@@ -66,7 +73,7 @@ var GeocoderBase = function (props) {
     // Call mapbox geocoder API, and store results in state.
     //
     var lookup = function (q) {
-        if (q == "") {
+        if (q === "") {
             clear();
             return;
         }
@@ -78,13 +85,17 @@ var GeocoderBase = function (props) {
             setFeatures(res);
             if (res.length > 0)
                 setSelectedIndex(0);
+        })
+            .catch(function () {
+            setFeatures([]);
+            setSelectedIndex(-1);
         });
     };
     // 
     // Debounce calls to lookup by 350ms.
     // 
     var lookupDebounced = function (q) {
-        if (timer != null) {
+        if (timer !== null) {
             window.clearTimeout(timer);
             setTimer(null);
         }
@@ -95,6 +106,8 @@ var GeocoderBase = function (props) {
         lookupDebounced(newq);
     };
     var handleClick = function (feature) {
+        if (!map)
+            return;
         if (feature.properties.bbox) {
             map.fitBounds(feature.properties.bbox);
         }
@@ -121,7 +134,8 @@ var GeocoderBase = function (props) {
             case 'Enter':
             case 'NumpadEnter':
                 e.preventDefault();
-                handleClick(features[selectedIndex]);
+                if (selectedIndex >= 0 && features[selectedIndex])
+                    handleClick(features[selectedIndex]);
                 break;
             case 'Escape':
                 e.preventDefault();
@@ -129,11 +143,11 @@ var GeocoderBase = function (props) {
                 break;
         }
     };
-    return (React.createElement(MapControl, { "data-testid": props['data-testid'] || "Geocoder", x: props.x, y: props.y },
+    return (React.createElement(MapControl, { "data-testid": props['data-testid'] || "Geocoder", x: props.x, y: props.y, respectPadding: props.respectPadding, style: props.style },
         React.createElement("div", { className: props.className, onKeyDown: function (e) { return handleKeyDown(e); }, ref: wrapperRef },
-            React.createElement(GeocoderSelector, { placeholder: props.placeholder, searchIcon: props.searchIcon, value: q, onChange: handleChange }),
-            features.length > 0 && React.createElement(GeocoderList, { upwards: props.upwards }, features.map(function (f, idx) {
-                return React.createElement(GeocoderEntry, { key: idx, feature: f, selected: idx == selectedIndex, onClick: function () { return handleClick(f); } });
+            React.createElement(GeocoderSelector, { placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : DEFAULT_PLACEHOLDER, searchIcon: (_b = props.searchIcon) !== null && _b !== void 0 ? _b : DEFAULT_SEARCH_ICON, value: q, onChange: handleChange }),
+            features.length > 0 && React.createElement(GeocoderList, { upwards: (_c = props.upwards) !== null && _c !== void 0 ? _c : DEFAULT_UPWARDS }, features.map(function (f, idx) {
+                return React.createElement(GeocoderEntry, { key: idx, feature: f, selected: idx === selectedIndex, onClick: function () { return handleClick(f); } });
             })))));
 };
 var GeocoderStyled = styled(GeocoderBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", "px;\n  pointer-events: all !important;\n"], ["\n  width: ", "px;\n  pointer-events: all !important;\n"
@@ -159,7 +173,7 @@ var GeocoderStyled = styled(GeocoderBase)(templateObject_1 || (templateObject_1
  * Mapbox geocoding playground: https://docs.mapbox.com/playground/geocoding/
  */
 var Geocoder = function (_a) {
-    var _b = _a.width, width = _b === void 0 ? 300 : _b, _c = _a.searchIcon, searchIcon = _c === void 0 ? false : _c, _d = _a.placeholder, placeholder = _d === void 0 ? "Type to search places" : _d, _e = _a.pointZoom, pointZoom = _e === void 0 ? 15 : _e, _f = _a.proximityIP, proximityIP = _f === void 0 ? true : _f, _g = _a.upwards, upwards = _g === void 0 ? false : _g, props = __rest(_a, ["width", "searchIcon", "placeholder", "pointZoom", "proximityIP", "upwards"]);
+    var _b = _a.width, width = _b === void 0 ? 300 : _b, _c = _a.searchIcon, searchIcon = _c === void 0 ? DEFAULT_SEARCH_ICON : _c, _d = _a.placeholder, placeholder = _d === void 0 ? DEFAULT_PLACEHOLDER : _d, _e = _a.pointZoom, pointZoom = _e === void 0 ? 15 : _e, _f = _a.proximityIP, proximityIP = _f === void 0 ? true : _f, _g = _a.upwards, upwards = _g === void 0 ? DEFAULT_UPWARDS : _g, props = __rest(_a, ["width", "searchIcon", "placeholder", "pointZoom", "proximityIP", "upwards"]);
     return React.createElement(GeocoderStyled, __assign({ width: width, searchIcon: searchIcon, placeholder: placeholder, pointZoom: pointZoom, proximityIP: proximityIP, upwards: upwards }, props));
 };
 Geocoder.displayName = "Geocoder";

package/map/controls/Geocoder/GeocoderApi.js

@@ -55,6 +55,8 @@ var GeocoderApi = /** @class */ (function () {
                             })];
                     case 1:
                         res = _a.sent();
+                        if (!res.ok)
+                            throw new Error("Geocoder lookup failed: ".concat(res.status, " ").concat(res.statusText));
                         return [4 /*yield*/, res.json()];
                     case 2:
                         json = _a.sent();

package/map/controls/Geocoder/GeocoderSelector.js

@@ -20,6 +20,6 @@ var GeocoderSelectorBase = function (props) {
             React.createElement(Icon, { url: SVG.Icons.Search, color: theme.colors.neutral[50] }),
         React.createElement("input", { placeholder: props.placeholder, value: props.value, onChange: handleChange })));
 };
-var GeocoderSelector = styled(GeocoderSelectorBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: 34px;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  // Content:  \n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  // Appearance:\n  background-color: ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n  border: none;\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  // Focus:\n  :focus-within > & {\n    outline: solid 2px ", ";\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n  \n  input {\n    width:            100%;\n    box-sizing:       border-box;\n    z-index:          0;\n    text-align:       left;\n    border:           none;\n    outline:          none;\n    background-color: transparent;\n    color:            ", ";\n    \n    // Define colors for placeholder text.\n    &::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n\n    // Define colors for selected text.\n    &::selection {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    /* Define colors for selected text. */\n    &::selection {\n      background-color: rgba(100,100,100,.4);\n      color: ", ";\n    }\n\n    /* Make sure HTML5 validation does not show up. */\n    &:valid {\n      box-shadow: none;\n    }\n    &:invalid {\n      box-shadow: none;\n    }\n\n    /* Turn off number spinners. */\n    &[type=number]::-webkit-inner-spin-button, \n    &[type=number]::-webkit-outer-spin-button { \n      -webkit-appearance: none;  /* Webkit (Chrome) */\n      margin: 0; \n    }    \n    &[type=number] {\n      -moz-appearance: textfield; /* Firefox */\n      appearance: textfield;\n    }\n  }\n"], ["\n  position: relative;\n  height: 34px;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  // Content:  \n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  // Appearance:\n  background-color: ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n  border: none;\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  // Focus:\n  :focus-within > & {\n    outline: solid 2px ", ";\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n  \n  input {\n    width:            100%;\n    box-sizing:       border-box;\n    z-index:          0;\n    text-align:       left;\n    border:           none;\n    outline:          none;\n    background-color: transparent;\n    color:            ", ";\n    \n    // Define colors for placeholder text.\n    &::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n\n    // Define colors for selected text.\n    &::selection {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    /* Define colors for selected text. */\n    &::selection {\n      background-color: rgba(100,100,100,.4);\n      color: ", ";\n    }\n\n    /* Make sure HTML5 validation does not show up. */\n    &:valid {\n      box-shadow: none;\n    }\n    &:invalid {\n      box-shadow: none;\n    }\n\n    /* Turn off number spinners. */\n    &[type=number]::-webkit-inner-spin-button, \n    &[type=number]::-webkit-outer-spin-button { \n      -webkit-appearance: none;  /* Webkit (Chrome) */\n      margin: 0; \n    }    \n    &[type=number] {\n      -moz-appearance: textfield; /* Firefox */\n      appearance: textfield;\n    }\n  }\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.fontColor; });
+var GeocoderSelector = styled(GeocoderSelectorBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: 34px;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  // Content:  \n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  // Appearance:\n  background-color: ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n  border: none;\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  // Focus:\n  :focus-within > & {\n    outline: solid 2px ", ";\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n  \n  input {\n    width:            100%;\n    box-sizing:       border-box;\n    z-index:          0;\n    text-align:       left;\n    border:           none;\n    outline:          none;\n    background-color: transparent;\n    color:            ", ";\n    \n    // Define colors for placeholder text.\n    &::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n\n    // Define colors for selected text.\n    &::selection {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    /* Make sure HTML5 validation does not show up. */\n    &:valid {\n      box-shadow: none;\n    }\n    &:invalid {\n      box-shadow: none;\n    }\n\n    /* Turn off number spinners. */\n    &[type=number]::-webkit-inner-spin-button, \n    &[type=number]::-webkit-outer-spin-button { \n      -webkit-appearance: none;  /* Webkit (Chrome) */\n      margin: 0; \n    }    \n    &[type=number] {\n      -moz-appearance: textfield; /* Firefox */\n      appearance: textfield;\n    }\n  }\n"], ["\n  position: relative;\n  height: 34px;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  // Content:  \n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  // Appearance:\n  background-color: ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n  border: none;\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  // Focus:\n  :focus-within > & {\n    outline: solid 2px ", ";\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n  \n  input {\n    width:            100%;\n    box-sizing:       border-box;\n    z-index:          0;\n    text-align:       left;\n    border:           none;\n    outline:          none;\n    background-color: transparent;\n    color:            ", ";\n    \n    // Define colors for placeholder text.\n    &::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n\n    // Define colors for selected text.\n    &::selection {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    /* Make sure HTML5 validation does not show up. */\n    &:valid {\n      box-shadow: none;\n    }\n    &:invalid {\n      box-shadow: none;\n    }\n\n    /* Turn off number spinners. */\n    &[type=number]::-webkit-inner-spin-button, \n    &[type=number]::-webkit-outer-spin-button { \n      -webkit-appearance: none;  /* Webkit (Chrome) */\n      margin: 0; \n    }    \n    &[type=number] {\n      -moz-appearance: textfield; /* Firefox */\n      appearance: textfield;\n    }\n  }\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; });
 export { GeocoderSelector };
 var templateObject_1;

package/map/controls/Graticule/Graticule.js

@@ -75,7 +75,6 @@ var Graticule = function (props) {
         var step = props.adaptive ? props.degrees / Math.pow(2, Math.ceil(viewState.zoom - 1)) : props.degrees;
         var bounds = getBounds();
         var features = [];
-        var count = 0;
         for (var lng = -180; lng <= 180; lng += step) {
             if (!(lng > bounds.west && lng < bounds.east))
                 continue;
@@ -84,7 +83,6 @@ var Graticule = function (props) {
                 geometry: { type: 'LineString', coordinates: [[lng, -90], [lng, 90]] },
                 properties: {}
             });
-            count++;
         }
         for (var lat = -90; lat <= 90; lat += step) {
             if (!(lat < bounds.north && lat > bounds.south))
@@ -94,7 +92,6 @@ var Graticule = function (props) {
                 geometry: { type: 'LineString', coordinates: [[-180, lat], [180, lat]] },
                 properties: {}
             });
-            count++;
         }
         for (var lng = -180 + step; lng <= 180; lng += step) {
             if (!(lng > bounds.west && lng < bounds.east))
@@ -112,7 +109,6 @@ var Graticule = function (props) {
                     geometry: { type: 'Point', coordinates: [lng, lat + step / 2] },
                     properties: { x: props.decimal ? formatNumber(lng, 3) : formatLongitude(lng) }
                 });
-                count += 2;
             }
         }
         return { type: 'FeatureCollection', features: features };
@@ -120,7 +116,7 @@ var Graticule = function (props) {
     var _b = React.useState({ type: 'FeatureCollection', features: [] }), featureCollection = _b[0], setFeatureCollection = _b[1];
     React.useEffect(function () {
         setFeatureCollection(buildGrid());
-    }, [viewState.zoom, viewState.latitude, viewState.longitude]);
+    }, [viewState.zoom, viewState.latitude, viewState.longitude, props.degrees, props.adaptive, props.decimal]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Source, { type: "geojson", data: featureCollection },
             React.createElement(Layer, { type: "line", filter: ['==', ["geometry-type"], 'LineString'], paint: {

package/map/controls/MapLoader/MapLoader.js

@@ -30,7 +30,7 @@ import { MapControl } from '../base/MapControl';
 var DEFAULT_SIZE = 40; // Default control size (px)
 var DEFAULT_COLOR = "white"; // Default control color
 var MapLoaderBase = function (props) {
-    return (React.createElement(MapControl, { "data-testid": props['data-testid'] || "MapLoader", x: props.x, y: props.y },
+    return (React.createElement(MapControl, { "data-testid": props['data-testid'] || "MapLoader", x: props.x, y: props.y, respectPadding: props.respectPadding, style: props.style },
         React.createElement("div", { className: props.className },
             React.createElement(Svg, { width: "1792", height: "1792", viewBox: "0 0 1792 1792", xmlns: "http://www.w3.org/2000/svg" },
                 React.createElement("path", { d: "M1760 896q0 176-68.5 336t-184 275.5-275.5 184-336 68.5-336-68.5-275.5-184-184-275.5-68.5-336q0-213 97-398.5t265-305.5 374-151v228q-221 45-366.5 221t-145.5 406q0 130 51 248.5t136.5 204 204 136.5 248.5 51 248.5-51 204-136.5 136.5-204 51-248.5q0-230-145.5-406t-366.5-221v-228q206 31 374 151t265 305.5 97 398.5z" })))));

package/map/controls/ScaleControl/ScaleControl.js

@@ -100,7 +100,7 @@ var ScaleControlStyled = styled(ScaleControlBase)(templateObject_1 || (templateO
  * ```
  */
 var ScaleControl = function (_a) {
-    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.width, width = _d === void 0 ? 100 : _d, props = __rest(_a, ["x", "y", "width"]);
+    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.width, width = _d === void 0 ? DEFAULT_WIDTH : _d, props = __rest(_a, ["x", "y", "width"]);
     return React.createElement(ScaleControlStyled, __assign({ x: x, y: y, width: width }, props));
 };
 ScaleControl.displayName = 'ScaleControl';

package/map/controls/ZoomInButton/ZoomInButton.js

@@ -49,7 +49,7 @@ var ZoomInButton = function (_a) {
         " Zoom in") : _b, props = __rest(_a, ["hint"]);
     var viewState = useViewState();
     var map = useMap().current;
-    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "ZoomInButton", disabled: viewState.zoom >= map.getMaxZoom(), onClick: function () { return map.zoomIn(); }, hint: hint }, props),
+    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "ZoomInButton", ariaLabel: "Zoom in", disabled: viewState.zoom >= map.getMaxZoom(), onClick: function () { return map.zoomIn(); }, hint: hint }, props),
         React.createElement("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { d: "M100,43.2v13.6c0,1.9-0.7,3.5-2,4.8c-1.3,1.3-2.9,2-4.8,2H63.6v29.5c0,1.9-0.7,3.5-2,4.8c-1.3,1.3-2.9,2-4.8,2H43.2c-1.9,0-3.5-0.7-4.8-2c-1.3-1.3-2-2.9-2-4.8V63.6H6.8c-1.9,0-3.5-0.7-4.8-2c-1.3-1.3-2-2.9-2-4.8V43.2c0-1.9,0.7-3.5,2-4.8c1.3-1.3,2.9-2,4.8-2h29.5V6.8c0-1.9,0.7-3.5,2-4.8c1.3-1.3,2.9-2,4.8-2h13.6c1.9,0,3.5,0.7,4.8,2c1.3,1.3,2,2.9,2,4.8v29.5h29.5c1.9,0,3.5,0.7,4.8,2C99.3,39.7,100,41.3,100,43.2z" }))));
 };

package/map/controls/ZoomOutButton/ZoomOutButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { IMapButtonProps } from '../base/MapButton';
 /**
- * The `ZoomInButton` zooms the map out when clicked.  It respects the min and
+ * The `ZoomOutButton` zooms the map out when clicked.  It respects the min and
  * max zoom levels of the map.
  *
  * The current map ViewState must be passed to this control, which is done

package/map/controls/ZoomOutButton/ZoomOutButton.js

@@ -27,7 +27,7 @@ import { useViewState } from '../../Map';
 import { Mouse } from '../../../controls/Mouse';
 import { Key } from '../../../controls/Key';
 /**
- * The `ZoomInButton` zooms the map out when clicked.  It respects the min and
+ * The `ZoomOutButton` zooms the map out when clicked.  It respects the min and
  * max zoom levels of the map.
  *
  * The current map ViewState must be passed to this control, which is done
@@ -49,7 +49,7 @@ var ZoomOutButton = function (_a) {
         " Zoom out") : _b, props = __rest(_a, ["hint"]);
     var viewState = useViewState();
     var map = useMap().current;
-    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "ZoomOutButton", disabled: viewState.zoom <= map.getMinZoom(), onClick: function () { return map.zoomOut(); }, hint: hint }, props),
+    return (React.createElement(MapButton, __assign({ "data-testid": props['data-testid'] || "ZoomOutButton", ariaLabel: "Zoom out", disabled: viewState.zoom <= map.getMinZoom(), onClick: function () { return map.zoomOut(); }, hint: hint }, props),
         React.createElement("svg", { width: "100", height: "100", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { d: "M93.2,36.4c1.9,0,3.5,0.7,4.8,2c1.3,1.3,2,2.9,2,4.8v13.6c0,1.9-0.7,3.5-2,4.8c-1.3,1.3-2.9,2-4.8,2H63.6H6.8c-1.9,0-3.5-0.7-4.8-2c-1.3-1.3-2-2.9-2-4.8V43.2c0-1.9,0.7-3.5,2-4.8c1.3-1.3,2.9-2,4.8-2" }))));
 };

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

@@ -15,6 +15,11 @@ interface IMapButtonProps extends IMapControlProps {
      * Optional hint to show on hover. This can be JSX. No hint is shown if this value is `null`.
      */
     hint?: React.ReactNode;
+    /**
+     * Accessible label for the button, read by screen readers. Provide this when
+     * the `hint` is JSX (a string hint is used as the label automatically).
+     */
+    ariaLabel?: string;
     /**
      * Button size in pixels.
      * @defaultValue 32
@@ -31,9 +36,10 @@ interface IProps {
     /** @ignore */
     children?: React.ReactNode;
     /**
-     * Fired when the map button is clicked.
+     * Fired when the map button is clicked, or activated with Enter/Space.
+     * Receives the originating mouse or keyboard event.
      */
-    onClick: (e?: React.MouseEvent) => void;
+    onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;
 }
 /**
  * A `MapButton` is a square button to be used on a Mapbox map. It must

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

@@ -39,6 +39,14 @@ var MapButtonBase = function (props) {
         if (props.onClick)
             props.onClick(e);
     };
+    var handleKeyDown = function (e) {
+        if (props.disabled)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            props.onClick(e);
+        }
+    };
     var handleMouseEnter = function () {
         if (hintRef)
             hintRef.style.opacity = "1";
@@ -60,7 +68,8 @@ var MapButtonBase = function (props) {
         ]
     }), styles = _c.styles, attributes = _c.attributes, update = _c.update;
     var renderButton = function () {
-        return React.createElement("div", { ref: setWrapperRef, className: props.className, "data-testid": props['data-testid'] || "MapButton", tabIndex: props.disabled ? -1 : 0, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        var _a;
+        return React.createElement("div", { ref: setWrapperRef, className: props.className, "data-testid": props['data-testid'] || "MapButton", tabIndex: props.disabled ? -1 : 0, role: "button", "aria-label": (_a = props.ariaLabel) !== null && _a !== void 0 ? _a : (typeof props.hint === 'string' ? props.hint : undefined), "aria-disabled": props.disabled, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
             React.createElement(Button, { "data-testid": "MapButton.Button", "$grouped": props.grouped, "$size": props.size, "$disabled": props.disabled, "$active": props.active }, props.children),
             props.hint &&
                 createPortal(React.createElement(Hint, { "data-testid": "MapButton.Hint", ref: setHintRef, styles: styles.popper, attributes: __assign({}, attributes.popper) }, props.hint), document.body));
@@ -69,7 +78,7 @@ var MapButtonBase = function (props) {
         return renderButton();
     return React.createElement(MapControl, { x: props.x, y: props.y }, renderButton());
 };
-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 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  // 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  // Disabled mode:\n  ", "  \n"
     /**
      * A `MapButton` is a square button to be used on a Mapbox map. It must

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

@@ -20,6 +20,11 @@ interface IMapControlProps extends ITestable {
      * @default false
      */
     respectPadding?: boolean;
+    /**
+     * Optional inline styles applied to the outer element, merged after (and so
+     * overriding) the computed positioning styles.
+     */
+    style?: React.CSSProperties;
 }
 /**
  * `MapControl` positions a control of top of a map, taking Mapbox `padding`

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

@@ -27,15 +27,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled from 'styled-components';
 import { useViewState } from '../../../Map';
+// Default prop values, referenced both by the MapControlBase fallbacks and the
+// MapControl wrapper below.
+var DEFAULT_X = 0;
+var DEFAULT_Y = 0;
 var MapControlBase = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var viewState = useViewState();
-    return (React.createElement("div", { "data-testid": props['data-testid'] || "MapControl", className: props.className, style: {
+    var x = (_a = props.x) !== null && _a !== void 0 ? _a : DEFAULT_X;
+    var y = (_b = props.y) !== null && _b !== void 0 ? _b : DEFAULT_Y;
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "MapControl", className: props.className, style: __assign({ 
             // Must calculate this style dynamically, because it needs local state.
-            left: props.x >= 0 ? "".concat(props.x + (props.respectPadding ? viewState.padding.left : 0), "px") : 'auto',
-            right: props.x < 0 ? "".concat((props.respectPadding ? viewState.padding.right : 0) - props.x, "px") : 'auto',
-            top: props.y >= 0 ? "".concat(props.y + (props.respectPadding ? viewState.padding.top : 0), "px") : 'auto',
-            bottom: props.y < 0 ? "".concat(-props.y - -(props.respectPadding ? viewState.padding.bottom : 0), "px") : 'auto'
-        } }, props.children));
+            left: x >= 0 ? "".concat(x + (props.respectPadding ? ((_d = (_c = viewState === null || viewState === void 0 ? void 0 : viewState.padding) === null || _c === void 0 ? void 0 : _c.left) !== null && _d !== void 0 ? _d : 0) : 0), "px") : 'auto', right: x < 0 ? "".concat((props.respectPadding ? ((_f = (_e = viewState === null || viewState === void 0 ? void 0 : viewState.padding) === null || _e === void 0 ? void 0 : _e.right) !== null && _f !== void 0 ? _f : 0) : 0) - x, "px") : 'auto', top: y >= 0 ? "".concat(y + (props.respectPadding ? ((_h = (_g = viewState === null || viewState === void 0 ? void 0 : viewState.padding) === null || _g === void 0 ? void 0 : _g.top) !== null && _h !== void 0 ? _h : 0) : 0), "px") : 'auto', bottom: y < 0 ? "".concat(-y - -(props.respectPadding ? ((_k = (_j = viewState === null || viewState === void 0 ? void 0 : viewState.padding) === null || _j === void 0 ? void 0 : _j.bottom) !== null && _k !== void 0 ? _k : 0) : 0), "px") : 'auto' }, props.style) }, 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"
     /**
@@ -70,7 +73,7 @@ var MapControlStyled = styled(MapControlBase)(templateObject_1 || (templateObjec
  * 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, _d = _a.respectPadding, respectPadding = _d === void 0 ? false : _d, props = __rest(_a, ["x", "y", "respectPadding"]);
+    var _b = _a.x, x = _b === void 0 ? DEFAULT_X : _b, _c = _a.y, y = _c === void 0 ? DEFAULT_Y : _c, _d = _a.respectPadding, respectPadding = _d === void 0 ? false : _d, props = __rest(_a, ["x", "y", "respectPadding"]);
     return React.createElement(MapControlStyled, __assign({ x: x, y: y, respectPadding: respectPadding }, props));
 };
 export { MapControl };

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

@@ -11,7 +11,7 @@ interface IClusterLayerProps {
     items: IItem[];
     /**
      * Radius of cluster (in pixels).
-     * @default 18
+     * @default 24
      */
     radius?: number;
     /**

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;