@longline/aqua-ui 1.0.52 → 1.0.53

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.52",
+  "version": "1.0.53",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",