@longline/aqua-ui 1.0.70 → 1.0.72

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

@@ -51,9 +51,19 @@ 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
+ * A `ClusterLayer` manages its own `Source`. It does not take GeoJSON, but a list of objects which must at least have
  * `latitude` and `longitude` keys. Other object keys may be used for the aggregate values of clusters; if no field is
  * supplied, then the cluster will display the number of features inside them (the `point_count`).
  *
@@ -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,12 +78,12 @@ 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));
         })));
 };
 /**
- * A `ClusterLayer` manages its own `Source`. It does not takes GeoJSON, but a list of objects which must at least have
+ * A `ClusterLayer` manages its own `Source`. It does not take GeoJSON, but a list of objects which must at least have
  * `latitude` and `longitude` keys. Other object keys may be used for the aggregate values of clusters; if no field is
  * supplied, then the cluster will display the number of features inside them (the `point_count`).
  *
@@ -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/HtmlMarkerLayer/HtmlMarkerLayer.d.ts

@@ -14,7 +14,7 @@ interface IProps {
      * 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.
+     * correctly. Features that do not have an ID field are not displayed.
      */
     idField: string;
     /**

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}>
@@ -135,8 +138,10 @@ var HtmlMarkerLayerBase = function (props) {
             var feature = features_1[_i];
             var coords = feature.geometry.coordinates;
             var fprops = feature.properties;
-            // if (!props.cluster) continue;
             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:

package/package.json

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