@longline/aqua-ui 1.0.69 → 1.0.71

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

@@ -51,6 +51,16 @@ interface IProps {
      * @default false
      */
     clickZoom?: boolean;
+    /**
+     * Minimum zoom level at which to show markers.
+     * @default 0
+     */
+    minZoom?: number;
+    /**
+     * Maximum zoom level at which to show markers.
+     * @default 99
+     */
+    maxZoom?: number;
 }
 /**
  * A `ClusterLayer` manages its own `Source`. It does not takes GeoJSON, but a list of objects which must at least have
@@ -75,5 +85,5 @@ interface IProps {
  * </Map>
  * ```
  */
-declare const ClusterLayer: ({ relativeSize, radius, clusterRadius, clusterMaxZoom, ringFields, clickZoom, ...props }: IProps) => React.JSX.Element;
+declare const ClusterLayer: ({ relativeSize, radius, clusterRadius, clusterMaxZoom, minZoom, maxZoom, ringFields, clickZoom, ...props }: IProps) => React.JSX.Element;
 export { ClusterLayer };

package/map/layers/ClusterLayer/ClusterLayer.js

@@ -78,7 +78,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" }, function (markerProps) {
+        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));
         })));
 };
@@ -106,13 +106,13 @@ 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, 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];
+    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];
     // 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));
+    return React.createElement(ClusterLayerBase, __assign({ key: key, relativeSize: relativeSize, radius: radius, clusterRadius: clusterRadius, clusterMaxZoom: clusterMaxZoom, minZoom: minZoom, maxZoom: maxZoom, ringFields: ringFields, clickZoom: clickZoom }, props));
 };
 export { ClusterLayer };

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

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

package/map/layers/ClusterLayer/index.js

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

package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer.js

@@ -44,6 +44,9 @@ import { Marker } from 'mapbox-gl';
  * 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}>

package/package.json

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