maplibre-gl-components 0.2.0 → 0.3.0

package/README.md

@@ -10,6 +10,7 @@ Legend, colorbar, and HTML control components for MapLibre GL JS maps.
 - **Colorbar** - Continuous gradient legends with built-in matplotlib colormaps
 - **Legend** - Categorical legends with color swatches and labels
 - **HtmlControl** - Flexible HTML content control for custom info panels
+- **Zoom-based Visibility** - Show/hide components at specific zoom levels with `minzoom`/`maxzoom`
 - **React Support** - First-class React components and hooks
 - **TypeScript** - Full type definitions included
 - **20+ Built-in Colormaps** - viridis, plasma, terrain, jet, and more
@@ -160,6 +161,8 @@ interface ColorbarOptions {
   opacity?: number;
   fontSize?: number;
   fontColor?: string;
+  minzoom?: number;                    // Min zoom level to show (default: 0)
+  maxzoom?: number;                    // Max zoom level to show (default: 24)
 }
 
 // Methods
@@ -190,6 +193,8 @@ interface LegendOptions {
   opacity?: number;
   fontSize?: number;
   fontColor?: string;
+  minzoom?: number;                    // Min zoom level to show (default: 0)
+  maxzoom?: number;                    // Max zoom level to show (default: 24)
 }
 
 interface LegendItem {
@@ -229,6 +234,8 @@ interface HtmlControlOptions {
   opacity?: number;
   maxWidth?: number;
   maxHeight?: number;
+  minzoom?: number;                    // Min zoom level to show (default: 0)
+  maxzoom?: number;                    // Max zoom level to show (default: 24)
 }
 
 // Methods
@@ -293,6 +300,56 @@ const colorbar = new Colorbar({
 });
 ```
 
+## Zoom-based Visibility
+
+All components support `minzoom` and `maxzoom` options to control visibility based on the map's zoom level. This is useful for showing different legends at different zoom levels, similar to how map layers work.
+
+```typescript
+// Show legend only when zoomed in (zoom >= 10)
+const detailLegend = new Legend({
+  title: 'Detailed Features',
+  items: [...],
+  minzoom: 10,  // Only visible at zoom 10 and above
+});
+
+// Show legend only when zoomed out (zoom <= 8)
+const overviewLegend = new Legend({
+  title: 'Overview',
+  items: [...],
+  maxzoom: 8,  // Only visible at zoom 8 and below
+});
+
+// Show colorbar only within a specific zoom range
+const colorbar = new Colorbar({
+  colormap: 'viridis',
+  vmin: 0,
+  vmax: 100,
+  minzoom: 5,   // Visible from zoom 5...
+  maxzoom: 15,  // ...up to zoom 15
+});
+```
+
+### React Example
+
+```tsx
+<LegendReact
+  map={map}
+  title="Lidar Point Cloud"
+  items={[
+    { label: 'QL0 (Approx. <= 0.35m NPS)', color: '#003300' },
+    { label: 'QL1 (Approx. 0.35m NPS)', color: '#006600' },
+    { label: 'QL2 (Approx. 0.7m NPS)', color: '#00cc00' },
+    { label: 'QL3 (Approx. 1.4m NPS)', color: '#ccff00' },
+    { label: 'Other', color: '#99ccff' },
+  ]}
+  minzoom={8}
+  maxzoom={18}
+  position="top-left"
+/>
+```
+
+**Note:** The `visible` option takes precedence - if `visible` is `false`, the component will be hidden regardless of zoom level.
+
 ## React Hooks
 
 ```typescript
@@ -375,6 +432,41 @@ npm run build
 npm run build:examples
 ```
 
+## Docker
+
+The examples can be run using Docker. The image is automatically built and published to GitHub Container Registry.
+
+### Pull and Run
+
+```bash
+# Pull the latest image
+docker pull ghcr.io/opengeos/maplibre-gl-components:latest
+
+# Run the container
+docker run -p 8080:80 ghcr.io/opengeos/maplibre-gl-components:latest
+```
+
+Then open http://localhost:8080/maplibre-gl-components/ in your browser to view the examples.
+
+### Build Locally
+
+```bash
+# Build the image
+docker build -t maplibre-gl-components .
+
+# Run the container
+docker run -p 8080:80 maplibre-gl-components
+```
+
+### Available Tags
+
+| Tag | Description |
+|-----|-------------|
+| `latest` | Latest release |
+| `x.y.z` | Specific version (e.g., `1.0.0`) |
+| `x.y` | Minor version (e.g., `1.0`) |
+
+
 ## License
 
 MIT License - see [LICENSE](./LICENSE) for details.

package/dist/{HtmlControl-mwWlMV6V.js → HtmlControl-CxD6T9bG.js}

@@ -305,7 +305,9 @@ const DEFAULT_OPTIONS$2 = {
   fontSize: 11,
   fontColor: "#333",
   borderRadius: 4,
-  padding: 8
+  padding: 8,
+  minzoom: 0,
+  maxzoom: 24
 };
 class Colorbar {
   /**
@@ -318,6 +320,9 @@ class Colorbar {
     __publicField(this, "_options");
     __publicField(this, "_state");
     __publicField(this, "_eventHandlers", /* @__PURE__ */ new Map());
+    __publicField(this, "_map");
+    __publicField(this, "_handleZoom");
+    __publicField(this, "_zoomVisible", true);
     this._options = { ...DEFAULT_OPTIONS$2, ...options };
     this._state = {
       visible: this._options.visible,
@@ -333,9 +338,13 @@ class Colorbar {
    * @param map - The MapLibre GL map instance.
    * @returns The control's container element.
    */
-  onAdd(_map) {
+  onAdd(map) {
+    this._map = map;
     this._container = this._createContainer();
     this._render();
+    this._handleZoom = () => this._checkZoomVisibility();
+    this._map.on("zoom", this._handleZoom);
+    this._checkZoomVisibility();
     return this._container;
   }
   /**
@@ -344,6 +353,11 @@ class Colorbar {
    */
   onRemove() {
     var _a, _b;
+    if (this._map && this._handleZoom) {
+      this._map.off("zoom", this._handleZoom);
+      this._handleZoom = void 0;
+    }
+    this._map = void 0;
     (_b = (_a = this._container) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(this._container);
     this._container = void 0;
     this._eventHandlers.clear();
@@ -354,9 +368,7 @@ class Colorbar {
   show() {
     if (!this._state.visible) {
       this._state.visible = true;
-      if (this._container) {
-        this._container.style.display = "flex";
-      }
+      this._updateDisplayState();
       this._emit("show");
     }
   }
@@ -366,9 +378,7 @@ class Colorbar {
   hide() {
     if (this._state.visible) {
       this._state.visible = false;
-      if (this._container) {
-        this._container.style.display = "none";
-      }
+      this._updateDisplayState();
       this._emit("hide");
     }
   }
@@ -489,6 +499,27 @@ class Colorbar {
       handlers.forEach((handler) => handler(eventData));
     }
   }
+  /**
+   * Checks if the current zoom level is within the visibility range.
+   */
+  _checkZoomVisibility() {
+    if (!this._map) return;
+    const zoom = this._map.getZoom();
+    const { minzoom, maxzoom } = this._options;
+    const inRange = zoom >= minzoom && zoom <= maxzoom;
+    if (inRange !== this._zoomVisible) {
+      this._zoomVisible = inRange;
+      this._updateDisplayState();
+    }
+  }
+  /**
+   * Updates the display state based on visibility and zoom level.
+   */
+  _updateDisplayState() {
+    if (!this._container) return;
+    const shouldShow = this._state.visible && this._zoomVisible;
+    this._container.style.display = shouldShow ? "flex" : "none";
+  }
   /**
    * Creates the main container element.
    *
@@ -497,7 +528,8 @@ class Colorbar {
   _createContainer() {
     const container = document.createElement("div");
     container.className = `maplibregl-ctrl maplibre-gl-colorbar${this._options.className ? ` ${this._options.className}` : ""}`;
-    if (!this._state.visible) {
+    const shouldShow = this._state.visible && this._zoomVisible;
+    if (!shouldShow) {
       container.style.display = "none";
     }
     return container;
@@ -522,6 +554,7 @@ class Colorbar {
     const isVertical = orientation === "vertical";
     const ticks = this._generateTicks();
     this._container.innerHTML = "";
+    const shouldShow = this._state.visible && this._zoomVisible;
     Object.assign(this._container.style, {
       backgroundColor,
       opacity: opacity.toString(),
@@ -529,7 +562,7 @@ class Colorbar {
       padding: `${padding}px`,
       fontSize: `${fontSize}px`,
       color: fontColor,
-      display: this._state.visible ? "flex" : "none",
+      display: shouldShow ? "flex" : "none",
       flexDirection: isVertical ? "row" : "column",
       alignItems: "stretch",
       gap: "6px",
@@ -604,7 +637,9 @@ const DEFAULT_OPTIONS$1 = {
   fontColor: "#333",
   swatchSize: 16,
   borderRadius: 4,
-  padding: 10
+  padding: 10,
+  minzoom: 0,
+  maxzoom: 24
 };
 class Legend {
   /**
@@ -617,6 +652,9 @@ class Legend {
     __publicField(this, "_options");
     __publicField(this, "_state");
     __publicField(this, "_eventHandlers", /* @__PURE__ */ new Map());
+    __publicField(this, "_map");
+    __publicField(this, "_handleZoom");
+    __publicField(this, "_zoomVisible", true);
     this._options = { ...DEFAULT_OPTIONS$1, ...options };
     this._state = {
       visible: this._options.visible,
@@ -630,9 +668,13 @@ class Legend {
    * @param map - The MapLibre GL map instance.
    * @returns The control's container element.
    */
-  onAdd(_map) {
+  onAdd(map) {
+    this._map = map;
     this._container = this._createContainer();
     this._render();
+    this._handleZoom = () => this._checkZoomVisibility();
+    this._map.on("zoom", this._handleZoom);
+    this._checkZoomVisibility();
     return this._container;
   }
   /**
@@ -640,6 +682,11 @@ class Legend {
    */
   onRemove() {
     var _a, _b;
+    if (this._map && this._handleZoom) {
+      this._map.off("zoom", this._handleZoom);
+      this._handleZoom = void 0;
+    }
+    this._map = void 0;
     (_b = (_a = this._container) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(this._container);
     this._container = void 0;
     this._eventHandlers.clear();
@@ -650,9 +697,7 @@ class Legend {
   show() {
     if (!this._state.visible) {
       this._state.visible = true;
-      if (this._container) {
-        this._container.style.display = "block";
-      }
+      this._updateDisplayState();
       this._emit("show");
     }
   }
@@ -662,9 +707,7 @@ class Legend {
   hide() {
     if (this._state.visible) {
       this._state.visible = false;
-      if (this._container) {
-        this._container.style.display = "none";
-      }
+      this._updateDisplayState();
       this._emit("hide");
     }
   }
@@ -786,6 +829,27 @@ class Legend {
       handlers.forEach((handler) => handler(eventData));
     }
   }
+  /**
+   * Checks if the current zoom level is within the visibility range.
+   */
+  _checkZoomVisibility() {
+    if (!this._map) return;
+    const zoom = this._map.getZoom();
+    const { minzoom, maxzoom } = this._options;
+    const inRange = zoom >= minzoom && zoom <= maxzoom;
+    if (inRange !== this._zoomVisible) {
+      this._zoomVisible = inRange;
+      this._updateDisplayState();
+    }
+  }
+  /**
+   * Updates the display state based on visibility and zoom level.
+   */
+  _updateDisplayState() {
+    if (!this._container) return;
+    const shouldShow = this._state.visible && this._zoomVisible;
+    this._container.style.display = shouldShow ? "block" : "none";
+  }
   /**
    * Creates the main container element.
    *
@@ -794,7 +858,8 @@ class Legend {
   _createContainer() {
     const container = document.createElement("div");
     container.className = `maplibregl-ctrl maplibre-gl-legend${this._options.className ? ` ${this._options.className}` : ""}`;
-    if (!this._state.visible) {
+    const shouldShow = this._state.visible && this._zoomVisible;
+    if (!shouldShow) {
       container.style.display = "none";
     }
     return container;
@@ -877,6 +942,7 @@ class Legend {
     this._container.innerHTML = "";
     const isCollapsedWithHeader = this._state.collapsed && (title || collapsible);
     const vertPadding = isCollapsedWithHeader ? 4 : padding;
+    const shouldShow = this._state.visible && this._zoomVisible;
     Object.assign(this._container.style, {
       backgroundColor,
       opacity: opacity.toString(),
@@ -887,7 +953,7 @@ class Legend {
       width: isCollapsedWithHeader ? "auto" : `${width}px`,
       maxWidth: `${width}px`,
       boxShadow: "0 0 0 2px rgba(0, 0, 0, 0.1)",
-      display: this._state.visible ? "block" : "none",
+      display: shouldShow ? "block" : "none",
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
     });
     if (title || collapsible) {
@@ -960,7 +1026,9 @@ const DEFAULT_OPTIONS = {
   maxWidth: 300,
   maxHeight: 400,
   fontSize: 12,
-  fontColor: "#333"
+  fontColor: "#333",
+  minzoom: 0,
+  maxzoom: 24
 };
 class HtmlControl {
   /**
@@ -974,6 +1042,9 @@ class HtmlControl {
     __publicField(this, "_options");
     __publicField(this, "_state");
     __publicField(this, "_eventHandlers", /* @__PURE__ */ new Map());
+    __publicField(this, "_map");
+    __publicField(this, "_handleZoom");
+    __publicField(this, "_zoomVisible", true);
     this._options = { ...DEFAULT_OPTIONS, ...options };
     this._state = {
       visible: this._options.visible,
@@ -988,9 +1059,13 @@ class HtmlControl {
    * @param map - The MapLibre GL map instance.
    * @returns The control's container element.
    */
-  onAdd(_map) {
+  onAdd(map) {
+    this._map = map;
     this._container = this._createContainer();
     this._render();
+    this._handleZoom = () => this._checkZoomVisibility();
+    this._map.on("zoom", this._handleZoom);
+    this._checkZoomVisibility();
     return this._container;
   }
   /**
@@ -999,6 +1074,11 @@ class HtmlControl {
    */
   onRemove() {
     var _a, _b;
+    if (this._map && this._handleZoom) {
+      this._map.off("zoom", this._handleZoom);
+      this._handleZoom = void 0;
+    }
+    this._map = void 0;
     (_b = (_a = this._container) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(this._container);
     this._container = void 0;
     this._contentEl = void 0;
@@ -1010,9 +1090,7 @@ class HtmlControl {
   show() {
     if (!this._state.visible) {
       this._state.visible = true;
-      if (this._container) {
-        this._container.style.display = "block";
-      }
+      this._updateDisplayState();
       this._emit("show");
     }
   }
@@ -1022,9 +1100,7 @@ class HtmlControl {
   hide() {
     if (this._state.visible) {
       this._state.visible = false;
-      if (this._container) {
-        this._container.style.display = "none";
-      }
+      this._updateDisplayState();
       this._emit("hide");
     }
   }
@@ -1150,6 +1226,27 @@ class HtmlControl {
       handlers.forEach((handler) => handler(eventData));
     }
   }
+  /**
+   * Checks if the current zoom level is within the visibility range.
+   */
+  _checkZoomVisibility() {
+    if (!this._map) return;
+    const zoom = this._map.getZoom();
+    const { minzoom, maxzoom } = this._options;
+    const inRange = zoom >= minzoom && zoom <= maxzoom;
+    if (inRange !== this._zoomVisible) {
+      this._zoomVisible = inRange;
+      this._updateDisplayState();
+    }
+  }
+  /**
+   * Updates the display state based on visibility and zoom level.
+   */
+  _updateDisplayState() {
+    if (!this._container) return;
+    const shouldShow = this._state.visible && this._zoomVisible;
+    this._container.style.display = shouldShow ? "block" : "none";
+  }
   /**
    * Creates the main container element.
    *
@@ -1158,7 +1255,8 @@ class HtmlControl {
   _createContainer() {
     const container = document.createElement("div");
     container.className = `maplibregl-ctrl maplibre-gl-html-control${this._options.className ? ` ${this._options.className}` : ""}`;
-    if (!this._state.visible) {
+    const shouldShow = this._state.visible && this._zoomVisible;
+    if (!shouldShow) {
       container.style.display = "none";
     }
     return container;
@@ -1183,6 +1281,7 @@ class HtmlControl {
     this._container.innerHTML = "";
     const isCollapsedWithHeader = this._state.collapsed && (title || collapsible);
     const vertPadding = isCollapsedWithHeader ? 4 : padding;
+    const shouldShow = this._state.visible && this._zoomVisible;
     Object.assign(this._container.style, {
       backgroundColor,
       opacity: String(opacity),
@@ -1192,7 +1291,7 @@ class HtmlControl {
       fontSize: `${fontSize}px`,
       color: fontColor,
       boxShadow: "0 0 0 2px rgba(0, 0, 0, 0.1)",
-      display: this._state.visible ? "block" : "none",
+      display: shouldShow ? "block" : "none",
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
     });
     if (collapsible || title) {
@@ -1278,4 +1377,4 @@ export {
   clamp as y,
   formatNumericValue as z
 };
-//# sourceMappingURL=HtmlControl-mwWlMV6V.js.map
+//# sourceMappingURL=HtmlControl-CxD6T9bG.js.map