@longline/aqua-ui 1.0.50 → 1.0.52

package/inputs/Slider/Slider.js

@@ -177,13 +177,13 @@ var Knob = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateOb
 var KnobPosition = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0px;\n  z-index: 0; // Required z-offset for Knob::before\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0px;\n  z-index: 0; // Required z-offset for Knob::before\n"])));
 var TrackFill = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 50%;\n  background-color: ", ";\n  ", "\n  ", "     \n  border-radius: 2px;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 50%;\n  background-color: ", ";\n  ", "\n  ", "     \n  border-radius: 2px;\n"])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.$error && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.negative); }, function (p) { return p.$disabled && css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.neutral[30]); });
 var Track = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: relative;\n  height: 4px;\n  border-radius: 2px;\n  box-sizing: border-box;\n  background-color: ", ";\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding-top: 1px;\n  padding-left: 2px;\n  padding-right: 2px;\n"], ["\n  position: relative;\n  height: 4px;\n  border-radius: 2px;\n  box-sizing: border-box;\n  background-color: ", ";\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding-top: 1px;\n  padding-left: 2px;\n  padding-right: 2px;\n"])), function (p) { return p.theme.colors.primary[5]; });
-var SliderStyled = styled(SliderBase)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  position: relative;\n  min-width: ", ";\n  box-sizing: border-box;\n  // Padding above and below to capture mouse-down\n  padding-top: 48px;\n  padding-bottom: 8px;\n  ", "\n  cursor: ", ";\n  user-select: none;\n  outline: none;\n  ", "\n\n  ", "\n"], ["\n  position: relative;\n  min-width: ", ";\n  box-sizing: border-box;\n  // Padding above and below to capture mouse-down\n  padding-top: 48px;\n  padding-bottom: 8px;\n  ", "\n  cursor: ", ";\n  user-select: none;\n  outline: none;\n  ", "\n\n  ", "\n"
+var SliderStyled = styled(SliderBase)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  position: relative;\n  min-width: ", ";\n  box-sizing: border-box;\n  // Padding above and below to capture mouse-down\n  padding-top: 52px;\n  padding-bottom: 14px;\n  ", "\n  cursor: ", ";\n  user-select: none;\n  outline: none;\n  ", "\n\n  ", "\n"], ["\n  position: relative;\n  min-width: ", ";\n  box-sizing: border-box;\n  // Padding above and below to capture mouse-down\n  padding-top: 52px;\n  padding-bottom: 14px;\n  ", "\n  cursor: ", ";\n  user-select: none;\n  outline: none;\n  ", "\n\n  ", "\n"
     /**
      * Sliders allow users to view and select a value (or range) along a track.
      * They're ideal for adjusting settings such as volume and brightness, or for
      * applying image filters.
      */
-])), function (p) { return p.fluid == true ? '100%' : '200px'; }, function (p) { return p.padded && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    padding-left: 12px;\n    padding-right: 12px;\n  "], ["\n    padding-left: 12px;\n    padding-right: 12px;\n  "]))); }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.disabled && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    pointer-events: none;\n  "], ["\n    pointer-events: none;\n  "]))); }, function (p) { return !p.disabled && css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    // Focus ring:\n    &:focus ", ":before {\n      animation: ", " 2s linear infinite;\n    }\n\n    &:hover ", ":before {\n      animation: none;\n      opacity: 0.7;\n    }    \n\n    // Active focus ring:\n    &:active ", ":before {\n      animation: none;\n      opacity: 1;\n    }\n  "], ["\n    // Focus ring:\n    &:focus ", ":before {\n      animation: ", " 2s linear infinite;\n    }\n\n    &:hover ", ":before {\n      animation: none;\n      opacity: 0.7;\n    }    \n\n    // Active focus ring:\n    &:active ", ":before {\n      animation: none;\n      opacity: 1;\n    }\n  "])), Knob, Pulse, Knob, Knob); });
+])), function (p) { return p.fluid == true ? '100%' : '200px'; }, function (p) { return p.padded && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    padding-left: 20px;\n    padding-right: 20px;\n  "], ["\n    padding-left: 20px;\n    padding-right: 20px;\n  "]))); }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.disabled && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    pointer-events: none;\n  "], ["\n    pointer-events: none;\n  "]))); }, function (p) { return !p.disabled && css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    // Focus ring:\n    &:focus ", ":before {\n      animation: ", " 2s linear infinite;\n    }\n\n    &:hover ", ":before {\n      animation: none;\n      opacity: 0.7;\n    }    \n\n    // Active focus ring:\n    &:active ", ":before {\n      animation: none;\n      opacity: 1;\n    }\n  "], ["\n    // Focus ring:\n    &:focus ", ":before {\n      animation: ", " 2s linear infinite;\n    }\n\n    &:hover ", ":before {\n      animation: none;\n      opacity: 0.7;\n    }    \n\n    // Active focus ring:\n    &:active ", ":before {\n      animation: none;\n      opacity: 1;\n    }\n  "])), Knob, Pulse, Knob, Knob); });
 /**
  * Sliders allow users to view and select a value (or range) along a track.
  * They're ideal for adjusting settings such as volume and brightness, or for

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/package.json

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