maplibre-gl-lidar 0.3.1 → 0.4.0

package/README.md

@@ -28,6 +28,16 @@ Try the [live demo](https://opengeos.org/maplibre-gl-lidar).
 
 ![](https://github.com/user-attachments/assets/db03b60d-918d-438d-9f3f-1f922b1a0a2b)
 
+## Online Viewer
+
+Use the [Online Viewer](https://opengeos.org/maplibre-gl-lidar/viewer/) to load and visualize any COPC point cloud by entering a URL. You can also use URL parameters for direct linking:
+
+```
+https://opengeos.org/maplibre-gl-lidar/viewer/?url=https://s3.amazonaws.com/hobu-lidar/autzen-classified.copc.laz
+```
+
+This allows you to share links that automatically load specific point clouds.
+
 ## Installation
 
 ```bash
@@ -446,6 +456,41 @@ Point clouds are automatically transformed to WGS84 (EPSG:4326) for display on t
 - Compound coordinate systems (horizontal + vertical)
 - Automatic unit conversion (feet to meters for elevation)
 
+## 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-lidar:latest
+
+# Run the container
+docker run -p 8080:80 ghcr.io/opengeos/maplibre-gl-lidar:latest
+```
+
+Then open http://localhost:8080/maplibre-gl-lidar/ in your browser to view the examples.
+
+### Build Locally
+
+```bash
+# Build the image
+docker build -t maplibre-gl-lidar .
+
+# Run the container
+docker run -p 8080:80 maplibre-gl-lidar
+```
+
+### 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`) |
+
+
 ## Dependencies
 
 - [deck.gl](https://deck.gl/) - WebGL visualization layers

package/dist/{LidarLayerAdapter-Cefl4jQL.js → LidarLayerAdapter-CWBS2ItS.js}

@@ -35461,11 +35461,17 @@ class PointCloudManager {
     this.updateStyle({ pointSize: size });
   }
   /**
-   * Sets the opacity.
+   * Sets the global opacity for all point clouds.
+   * This also clears any per-layer opacity overrides so the global value takes effect.
    *
    * @param opacity - Opacity value (0-1)
    */
   setOpacity(opacity) {
+    for (const [id, pc] of this._pointClouds) {
+      if (pc.opacityOverride !== null) {
+        this._pointClouds.set(id, { ...pc, opacityOverride: null });
+      }
+    }
     this.updateStyle({ opacity });
   }
   /**
@@ -36040,6 +36046,20 @@ class RangeSlider {
       this._slider.disabled = !enabled;
     }
   }
+  /**
+   * Sets the slider min and max bounds.
+   *
+   * @param min - New minimum value
+   * @param max - New maximum value
+   */
+  setBounds(min, max) {
+    this._options.min = min;
+    this._options.max = max;
+    if (this._slider) {
+      this._slider.min = String(min);
+      this._slider.max = String(max);
+    }
+  }
   /**
    * Formats the value for display.
    */
@@ -36484,6 +36504,12 @@ class PanelBuilder {
       this._zOffsetSliderContainer.style.display = state.zOffsetEnabled ? "block" : "none";
     }
     if (this._zOffsetSlider) {
+      if (state.zOffsetBase !== void 0) {
+        const defaultOffset = -state.zOffsetBase;
+        const sliderMin = defaultOffset - 100;
+        const sliderMax = defaultOffset + 100;
+        this._zOffsetSlider.setBounds(sliderMin, sliderMax);
+      }
       this._zOffsetSlider.setValue(state.zOffset ?? 0);
     }
     if (this._elevationSlider && state.pointClouds.length > 0) {
@@ -36715,15 +36741,16 @@ class PanelBuilder {
     sliderContainer.style.display = this._state.zOffsetEnabled ? "block" : "none";
     sliderContainer.style.marginTop = "8px";
     this._zOffsetSliderContainer = sliderContainer;
-    const bounds2 = this._getElevationBounds();
-    const range = bounds2.max - bounds2.min;
-    const maxOffset = Math.max(100, Math.ceil(range));
+    const zOffsetBase = this._state.zOffsetBase ?? 0;
+    const defaultOffset = -zOffsetBase;
+    const sliderMin = defaultOffset - 100;
+    const sliderMax = defaultOffset + 100;
     this._zOffsetSlider = new RangeSlider({
       label: "Offset (m)",
-      min: -maxOffset,
-      max: maxOffset,
+      min: sliderMin,
+      max: sliderMax,
       step: 1,
-      value: this._state.zOffset ?? 0,
+      value: this._state.zOffset ?? defaultOffset,
       onChange: (v) => this._callbacks.onZOffsetChange(v)
     });
     sliderContainer.appendChild(this._zOffsetSlider.render());
@@ -36968,6 +36995,8 @@ const DEFAULT_OPTIONS = {
   // Show all fields by default
   zOffsetEnabled: false,
   zOffset: 0,
+  autoZOffset: true,
+  // Automatically calculate Z offset from 2nd percentile
   copcLoadingMode: void 0,
   // Auto-detect: 'dynamic' for COPC URLs, 'full' otherwise
   streamingPointBudget: 5e6,
@@ -37202,7 +37231,7 @@ class LidarControl {
    * @returns Promise resolving to the point cloud info
    */
   async loadPointCloud(source, options) {
-    var _a, _b;
+    var _a, _b, _c;
     const isCopcUrl = typeof source === "string" && (source.startsWith("http://") || source.startsWith("https://")) && /\.copc\./i.test(source);
     const isCopcFile = source instanceof File && /\.copc\./i.test(source.name);
     const isCopc = isCopcUrl || isCopcFile;
@@ -37229,6 +37258,23 @@ class LidarControl {
       const data = await this._loader.load(source, onProgress);
       onProgress(95, "Creating visualization layers...");
       (_a = this._pointCloudManager) == null ? void 0 : _a.addPointCloud(id, data);
+      let zOffsetBase;
+      let zOffset;
+      let zOffsetEnabled = this._state.zOffsetEnabled;
+      if (this._options.autoZOffset && data.positions && data.pointCount > 0) {
+        const zValues = new Float32Array(data.pointCount);
+        for (let i = 0; i < data.pointCount; i++) {
+          zValues[i] = data.positions[i * 3 + 2] ?? 0;
+        }
+        const percentileBounds = computePercentileBounds(zValues, 2, 98);
+        zOffsetBase = percentileBounds.min;
+        zOffset = -zOffsetBase;
+        zOffsetEnabled = true;
+        (_b = this._pointCloudManager) == null ? void 0 : _b.setZOffset(zOffset);
+        console.log(`Auto Z offset applied: zOffsetBase=${zOffsetBase.toFixed(1)}, zOffset=${zOffset.toFixed(1)}, enabled=${zOffsetEnabled}`);
+      } else {
+        console.log("Auto Z offset skipped - conditions not met");
+      }
       onProgress(100, "Complete!");
       const info2 = {
         id,
@@ -37251,7 +37297,10 @@ class LidarControl {
         loading: false,
         pointClouds,
         activePointCloudId: id,
-        availableClassifications: mergedClassifications
+        availableClassifications: mergedClassifications,
+        zOffsetBase,
+        zOffset: zOffset ?? this._state.zOffset,
+        zOffsetEnabled
       });
       this._emitWithData("load", { pointCloud: info2 });
       if (this._options.autoZoom) {
@@ -37266,7 +37315,7 @@ class LidarControl {
         console.warn(
           `CORS error detected for ${source}. Falling back to download mode...`
         );
-        (_b = this._panelBuilder) == null ? void 0 : _b.updateLoadingProgress(5, "CORS blocked - downloading file...");
+        (_c = this._panelBuilder) == null ? void 0 : _c.updateLoadingProgress(5, "CORS blocked - downloading file...");
         return this._loadPointCloudFullDownload(source);
       }
       this.setState({
@@ -37345,9 +37394,22 @@ class LidarControl {
       (_a = this._panelBuilder) == null ? void 0 : _a.updateLoadingProgress(10, "Initializing COPC file...");
       const { bounds: bounds2, totalPoints, hasRGB, spacing } = await streamingLoader.initialize();
       (_b = this._panelBuilder) == null ? void 0 : _b.updateLoadingProgress(20, "Setting up streaming...");
+      let autoZOffsetApplied = false;
       streamingLoader.setOnPointsLoaded((data) => {
-        var _a2;
+        var _a2, _b2;
         (_a2 = this._pointCloudManager) == null ? void 0 : _a2.updatePointCloud(id, data);
+        if (this._options.autoZOffset && !autoZOffsetApplied && data.bounds) {
+          const zOffsetBase = data.bounds.minZ;
+          const zOffset = -zOffsetBase;
+          (_b2 = this._pointCloudManager) == null ? void 0 : _b2.setZOffset(zOffset);
+          console.log(`Auto Z offset applied (streaming): ${zOffset.toFixed(1)}m (ground level from bounds: ${zOffsetBase.toFixed(1)}m)`);
+          this.setState({
+            zOffsetBase,
+            zOffset,
+            zOffsetEnabled: true
+          });
+          autoZOffsetApplied = true;
+        }
         const newClassifications = getAvailableClassifications(data);
         if (newClassifications.size > 0) {
           const mergedClassifications = /* @__PURE__ */ new Set([
@@ -37471,7 +37533,7 @@ class LidarControl {
    * Used as fallback when streaming fails due to CORS.
    */
   async _loadPointCloudFullDownload(url) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const id = generateId("pc");
     const name = getFilename(url);
     try {
@@ -37516,7 +37578,22 @@ class LidarControl {
       const data = await this._loader.load(buffer.buffer, onProgress);
       (_e = this._panelBuilder) == null ? void 0 : _e.updateLoadingProgress(95, "Creating visualization layers...");
       (_f = this._pointCloudManager) == null ? void 0 : _f.addPointCloud(id, data);
-      (_g = this._panelBuilder) == null ? void 0 : _g.updateLoadingProgress(100, "Complete!");
+      let zOffsetBase;
+      let zOffset;
+      let zOffsetEnabled = this._state.zOffsetEnabled;
+      if (this._options.autoZOffset && data.positions && data.pointCount > 0) {
+        const zValues = new Float32Array(data.pointCount);
+        for (let i = 0; i < data.pointCount; i++) {
+          zValues[i] = data.positions[i * 3 + 2] ?? 0;
+        }
+        const percentileBounds = computePercentileBounds(zValues, 2, 98);
+        zOffsetBase = percentileBounds.min;
+        zOffset = -zOffsetBase;
+        zOffsetEnabled = true;
+        (_g = this._pointCloudManager) == null ? void 0 : _g.setZOffset(zOffset);
+        console.log(`Auto Z offset applied (download): ${zOffset.toFixed(1)}m (ground level: ${zOffsetBase.toFixed(1)}m)`);
+      }
+      (_h = this._panelBuilder) == null ? void 0 : _h.updateLoadingProgress(100, "Complete!");
       const info2 = {
         id,
         name,
@@ -37538,7 +37615,10 @@ class LidarControl {
         loading: false,
         pointClouds,
         activePointCloudId: id,
-        availableClassifications: mergedClassifications
+        availableClassifications: mergedClassifications,
+        zOffsetBase,
+        zOffset: zOffset ?? this._state.zOffset,
+        zOffsetEnabled
       });
       this._emitWithData("load", { pointCloud: info2 });
       if (this._options.autoZoom) {
@@ -38436,4 +38516,4 @@ export {
   getFilename as l,
   throttle as t
 };
-//# sourceMappingURL=LidarLayerAdapter-Cefl4jQL.js.map
+//# sourceMappingURL=LidarLayerAdapter-CWBS2ItS.js.map