@longline/aqua-ui 1.0.51 → 1.0.53

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

@@ -17,35 +17,16 @@ interface IProps {
      * correctly.
      */
     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;
 }
-/**
- * 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.
- *
- * ```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>
- * ```
- */
-declare const HtmlMarkerLayer: (props: IProps) => React.JSX.Element;
+declare const HtmlMarkerLayer: ({ minZoom, maxZoom, ...props }: IProps) => React.JSX.Element;
 export { HtmlMarkerLayer };

package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer.js

@@ -9,6 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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';
@@ -42,13 +53,15 @@ import { Marker } from 'mapbox-gl';
  * </Source>
  * ```
  */
-var HtmlMarkerLayer = function (props) {
+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.
@@ -60,6 +73,8 @@ var HtmlMarkerLayer = function (props) {
     // 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();
@@ -67,7 +82,7 @@ var HtmlMarkerLayer = function (props) {
         markers.current = {};
         markersOnScreen.current = {};
         map.triggerRepaint();
-    }, [props.children]);
+    }, [props.children, props.minZoom, props.maxZoom]);
     // When component is unmounted, remove all its markers from the map.
     React.useEffect(function () {
         return function () {
@@ -105,11 +120,11 @@ var HtmlMarkerLayer = function (props) {
         // 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 layer that renders only invisible circles.    
+        // 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.querySourceFeatures(props.sourceId).filter(function (f) {
+        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);
         });
@@ -148,4 +163,8 @@ var HtmlMarkerLayer = function (props) {
     // 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));
+};
 export { HtmlMarkerLayer };

package/map/layers/InterpolationLayer/InterpolationLayer.d.ts

@@ -25,11 +25,21 @@ interface IProps {
      * @default #35ABE2
      */
     contourColor?: string;
+    /**
+     * Minimum zoom level at which to render layer.
+     * @default 0
+     */
+    minZoom?: number;
+    /**
+     * Maximum zoom level at which to render layer.
+     * @default 99
+     */
+    maxZoom?: number;
 }
 /**
  * An `InterpolationLayer` takes a data array of the form `{ latitude, longitude, value }`. It performs triangulation
  * and draws the data in an OpenGL layer. Optionally, a number of contour `levels` can be set to draw contour lines.
  * Gradient colors are configurable using `gradientStops`.
  */
-declare const InterpolationLayer: ({ levels, contourColor, gradientStops, ...props }: IProps) => React.JSX.Element;
+declare const InterpolationLayer: ({ levels, contourColor, gradientStops, minZoom, maxZoom, ...props }: IProps) => React.JSX.Element;
 export { InterpolationLayer };

package/map/layers/InterpolationLayer/InterpolationLayer.js

@@ -218,9 +218,13 @@ var InterpolationLayerBase = function (props) {
         gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         gl.drawArrays(gl.TRIANGLES, 0, 6);
     };
-    var onRender = function (gl, matrix, width, height) {
+    var onRender = function (gl, matrix, zoom, width, height) {
         // Render is called many times while the map is panned/zoomed.
         // You cannot have access to the map though.
+        if (zoom < props.minZoom)
+            return;
+        if (zoom > props.maxZoom)
+            return;
         // Bind & clear framebuffer, then render levels into it:
         // It is crucial to set the viewport size to match the resolution of the
         // texture we're rendering into.
@@ -239,7 +243,7 @@ var InterpolationLayerBase = function (props) {
     // @ts-ignore
     , { 
         // @ts-ignore
-        type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
+        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 `InterpolationLayer` takes a data array of the form `{ latitude, longitude, value }`. It performs triangulation
@@ -250,7 +254,7 @@ var InterpolationLayer = function (_a) {
     var _b = _a.levels, levels = _b === void 0 ? 0 : _b, _c = _a.contourColor, contourColor = _c === void 0 ? '#35ABE2' : _c, _d = _a.gradientStops, gradientStops = _d === void 0 ? [
         { pos: 0.0, color: '#0000ffff' },
         { pos: 1.0, color: '#000000ff' }
-    ] : _d, props = __rest(_a, ["levels", "contourColor", "gradientStops"]);
-    return React.createElement(InterpolationLayerBase, __assign({ levels: levels, contourColor: contourColor, gradientStops: gradientStops }, props));
+    ] : _d, _e = _a.minZoom, minZoom = _e === void 0 ? 0 : _e, _f = _a.maxZoom, maxZoom = _f === void 0 ? 99 : _f, props = __rest(_a, ["levels", "contourColor", "gradientStops", "minZoom", "maxZoom"]);
+    return React.createElement(InterpolationLayerBase, __assign({ levels: levels, contourColor: contourColor, gradientStops: gradientStops, minZoom: minZoom, maxZoom: maxZoom }, props));
 };
 export { InterpolationLayer };

package/map/layers/ParticlesLayer/ParticlesLayer.d.ts

@@ -36,6 +36,16 @@ interface IProps {
      * @default 1.0
      */
     pointSize?: number;
+    /**
+     * Minimum zoom level at which to render layer.
+     * @default 0
+     */
+    minZoom?: number;
+    /**
+     * Maximum zoom level at which to render layer.
+     * @default 99
+     */
+    maxZoom?: number;
 }
-declare const ParticlesLayer: ({ particles, density, delay, gradientStops, ...props }: IProps) => React.JSX.Element;
+declare const ParticlesLayer: ({ particles, density, delay, gradientStops, minZoom, maxZoom, ...props }: IProps) => React.JSX.Element;
 export { ParticlesLayer };

package/map/layers/ParticlesLayer/ParticlesLayer.js

@@ -303,7 +303,11 @@ var ParticlesLayerBase = function (props) {
         gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         gl.drawArrays(gl.POINTS, 0, props.density * props.density * props.particles);
     };
-    var onRender = function (gl, matrix, width, height) {
+    var onRender = function (gl, matrix, zoom, width, height) {
+        if (zoom < props.minZoom)
+            return;
+        if (zoom > props.maxZoom)
+            return;
         gl.useProgram(uvProgram.current);
         // Render U-texture:
         gl.bindFramebuffer(gl.FRAMEBUFFER, fboU.current);
@@ -328,7 +332,7 @@ var ParticlesLayerBase = function (props) {
     // @ts-ignore
     , { 
         // @ts-ignore
-        type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
+        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); } }));
 };
 var ParticlesLayer = function (_a) {
     var _b = _a.particles, particles = _b === void 0 ? 80 : _b, _c = _a.density, density = _c === void 0 ? 40 : _c, _d = _a.delay, delay = _d === void 0 ? 0 : _d, _e = _a.gradientStops, gradientStops = _e === void 0 ? [
@@ -336,7 +340,7 @@ var ParticlesLayer = function (_a) {
         { pos: 0.25, color: '#5c5cffff' },
         { pos: 0.5, color: '#5c5cff00' },
         { pos: 1.0, color: '#5c5cff00' }, // transparent blue
-    ] : _e, props = __rest(_a, ["particles", "density", "delay", "gradientStops"]);
-    return React.createElement(ParticlesLayerBase, __assign({ particles: particles, density: density, gradientStops: gradientStops, delay: delay }, props));
+    ] : _e, _f = _a.minZoom, minZoom = _f === void 0 ? 0 : _f, _g = _a.maxZoom, maxZoom = _g === void 0 ? 99 : _g, props = __rest(_a, ["particles", "density", "delay", "gradientStops", "minZoom", "maxZoom"]);
+    return React.createElement(ParticlesLayerBase, __assign({ particles: particles, density: density, gradientStops: gradientStops, delay: delay, minZoom: minZoom, maxZoom: maxZoom }, props));
 };
 export { ParticlesLayer };

package/package.json

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