The main control class implementing MapLibre's IControl interface.

#### Constructor Options

`typescript
interface LidarControlOptions {
// Panel settings
collapsed?: boolean; // Start collapsed (default: true)
position?: string; // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
title?: string; // Panel title (default: 'LiDAR Viewer')
panelWidth?: number; // Panel width in pixels (default: 365)
panelMaxHeight?: number; // Panel max height with scrollbar (default: 500)
className?: string; // Custom CSS class

// Point cloud styling
pointSize?: number; // Point size in pixels (default: 2)
opacity?: number; // Opacity 0-1 (default: 1.0)
colorScheme?: ColorScheme; // Color scheme (default: 'elevation')
usePercentile?: boolean; // Use 2-98% percentile for coloring (default: true)
pointBudget?: number; // Max points to display (default: 1000000)

// Filters and adjustments
elevationRange?: [number, number] | null; // Elevation filter
zOffsetEnabled?: boolean; // Enable Z offset adjustment (default: false)
zOffset?: number; // Z offset in meters (default: 0)

// Interaction
pickable?: boolean; // Enable point picking/hover tooltips (default: false)
pickInfoFields?: string[]; // Fields to show in tooltip (default: all)

// Behavior
autoZoom?: boolean; // Auto zoom to data after loading (default: true)

// COPC Streaming (dynamic loading)
copcLoadingMode?: "full" | "dynamic"; // Loading mode for COPC files (default: 'dynamic')
streamingPointBudget?: number; // Max points for streaming (default: 5000000)
streamingMaxConcurrentRequests?: number; // Concurrent node requests (default: 4)
streamingViewportDebounceMs?: number; // Viewport change debounce (default: 150)
}
`

#### Methods

`typescript
// Loading
loadPointCloud(source: string | File | ArrayBuffer, options?: { loadingMode?: 'full' | 'dynamic' }): Promise
loadPointCloudStreaming(source: string | File | ArrayBuffer, options?: StreamingLoaderOptions): Promise
stopStreaming(): void // Stop dynamic loading and clean up
unloadPointCloud(id?: string): void
getPointClouds(): PointCloudInfo[]
flyToPointCloud(id?: string): void

// Styling
setPointSize(size: number): void
setOpacity(opacity: number): void
setColorScheme(scheme: ColorScheme): void
setUsePercentile(usePercentile: boolean): void
getUsePercentile(): boolean
setElevationRange(min: number, max: number): void
clearElevationRange(): void
setPickable(pickable: boolean): void

// Z Offset
setZOffsetEnabled(enabled: boolean): void
setZOffset(offset: number): void
getZOffset(): number

// Pick info customization
setPickInfoFields(fields?: string[]): void
getPickInfoFields(): string[] | undefined

// Classification visibility (when using 'classification' color scheme)
setClassificationVisibility(code: number, visible: boolean): void
showAllClassifications(): void
hideAllClassifications(): void
getHiddenClassifications(): number[]
getAvailableClassifications(): number[]

// Panel control
toggle(): void
expand(): void
collapse(): void

// Events
on(event: LidarControlEvent, handler: LidarControlEventHandler): void
off(event: LidarControlEvent, handler: LidarControlEventHandler): void

// State
getState(): LidarState
getMap(): MapLibreMap | undefined
`

#### Events

- load - Point cloud loaded successfully
- loadstart - Loading started
- loaderror - Loading failed
- unload - Point cloud unloaded
- statechange - Control state changed
- stylechange - Styling changed
- collapse - Panel collapsed
- expand - Panel expanded
- streamingstart - Dynamic streaming started
- streamingstop - Dynamic streaming stopped
- streamingprogress - Streaming progress update
- budgetreached - Point budget limit reached

$3

- 'elevation' - Viridis-like color ramp based on Z values
- 'intensity' - Grayscale based on intensity attribute
- 'classification' - ASPRS standard classification colors
- 'rgb' - Use embedded RGB colors (if available)

$3

By default, elevation and intensity coloring uses the 2nd-98th percentile range instead of the full min-max range. This clips outliers and provides better color distribution across the point cloud.

`typescript
// Percentile coloring is enabled by default
const control = new LidarControl({
colorScheme: "elevation",
usePercentile: true, // default
});

// Disable to use full value range (min-max)
control.setUsePercentile(false);

// Check current setting
console.log(control.getUsePercentile()); // true or false
`

The percentile toggle is also available in the GUI panel when using "Elevation" or "Intensity" color schemes. Uncheck "Use percentile range (2-98%)" to use the full value range.

$3

When pickable is enabled, hovering over points displays a tooltip with all available attributes:

- X, Y, Z - Coordinates and elevation
- Intensity - Reflectance value
- Classification - ASPRS class name (Ground, Building, Vegetation, etc.)
- Red, Green, Blue - RGB color values (if available)
- GpsTime - GPS timestamp
- ReturnNumber / NumberOfReturns - Return information
- PointSourceId - Scanner source ID
- ScanAngle - Scan angle
- And more (EdgeOfFlightLine, ScanDirectionFlag, UserData, etc.)

Enable via constructor option or toggle in the GUI panel:

`typescript
// Via constructor
const control = new LidarControl({ pickable: true });

// Or programmatically
control.setPickable(true);

// Optionally filter which fields to display
control.setPickInfoFields([
"Classification",
"Intensity",
"GpsTime",
"ReturnNumber",
]);
`

$3

Shift point clouds vertically for alignment with terrain or other data:

`typescript
// Via constructor
const control = new LidarControl({
zOffsetEnabled: true,
zOffset: 50, // Shift up 50 meters
});

// Or programmatically
control.setZOffsetEnabled(true);
control.setZOffset(50);

// Get current offset
console.log(control.getZOffset()); // 50
`

The Z offset can also be adjusted interactively via the "Z Offset" checkbox and slider in the GUI panel.

$3

When using the "Classification" color scheme, an interactive legend appears showing all classification types found in the point cloud data. Each classification displays:

- A color swatch matching the ASPRS standard colors
- The classification name (Ground, Building, Vegetation, etc.)
- A checkbox to toggle visibility

Features:

- Show All / Hide All buttons - Quickly toggle all classifications at once
- Individual toggles - Show or hide specific classification types
- Auto-detection - Classifications are automatically detected from loaded data
- Streaming support - Classifications update as data streams in for COPC files

`typescript
// Via GUI: Select "Classification" from the Color By dropdown
// The legend automatically appears with checkboxes for each class

// Programmatically control visibility
control.setColorScheme("classification");

// Hide specific classifications (e.g., hide noise points)
control.setClassificationVisibility(7, false); // Hide "Low Point (Noise)"
control.setClassificationVisibility(18, false); // Hide "High Noise"

// Show only ground and buildings
control.hideAllClassifications();
control.setClassificationVisibility(2, true); // Ground
control.setClassificationVisibility(6, true); // Building

// Get available classifications in the data
const available = control.getAvailableClassifications();
console.log("Classifications:", available); // [2, 3, 4, 5, 6, ...]

// Get currently hidden classifications
const hidden = control.getHiddenClassifications();
console.log("Hidden:", hidden); // [7, 18]
`

ASPRS Classification Codes:
| Code | Name |
|------|------|
| 2 | Ground |
| 3 | Low Vegetation |
| 4 | Medium Vegetation |
| 5 | High Vegetation |
| 6 | Building |
| 7 | Low Point (Noise) |
| 9 | Water |
| 17 | Bridge Deck |

$3

For large COPC (Cloud Optimized Point Cloud) files, dynamic streaming loads only the points visible in the current viewport, dramatically reducing initial load time and memory usage.

Key features:

- Viewport-based loading - Only loads octree nodes visible in the current map view
- Level-of-detail (LOD) - Automatically selects appropriate detail level based on zoom
- Center-first priority - Points near the viewport center load first
- Point budget - Limits total points in memory (default: 5 million)

How it works:

1. When loading a COPC file (from URL or local file), dynamic mode is used by default
2. As you pan/zoom the map, new nodes are streamed based on viewport
3. Deeper octree levels (more detail) load as you zoom in
4. Parent nodes provide coverage where child nodes don't exist

`typescript
// Dynamic loading is the default for COPC files
const control = new LidarControl();
control.loadPointCloud("https://example.com/large-pointcloud.copc.laz");

// Explicitly set loading mode
const control = new LidarControl({
copcLoadingMode: "dynamic", // or 'full' for complete load
streamingPointBudget: 10_000_000, // 10 million points max
});

// Override per-load
control.loadPointCloud(file, { loadingMode: "full" }); // Force full load
control.loadPointCloud(url, { loadingMode: "dynamic" }); // Force streaming
`

Loading modes:

- 'dynamic' (default for COPC) - Stream nodes based on viewport, ideal for large files
- 'full' - Load entire point cloud upfront, better for small files

Note: Non-COPC files (regular LAS/LAZ) always use full loading mode since they don't have the octree structure required for streaming.

$3

maplibre-gl-lidar supports Entwine Point Tile (EPT) datasets, a widely-used format for serving large point clouds over HTTP with viewport-based streaming.

Key features:

- Directory-based format - Metadata in ept.json, hierarchy in ept-hierarchy/, data in ept-data/
- Viewport-based streaming - Points load dynamically based on current map view
- LAZ compression - Efficient data transfer using LAZ compression
- Automatic CRS transformation - Coordinates transformed from source CRS to WGS84

Loading EPT data:

`typescript
// Load EPT dataset by URL (automatically detected via ept.json)
lidarControl.loadPointCloud("https://na-c.entwine.io/dublin/ept.json");

// Or load programmatically
lidarControl.loadPointCloudEptStreaming(
"https://na-c.entwine.io/dublin/ept.json",
{
pointBudget: 5_000_000, // Max points in memory
}
);
`

Sample EPT datasets:

- Dublin, Ireland: https://na-c.entwine.io/dublin/ept.json
- New York City (4.7B points): https://na-c.entwine.io/nyc/ept.json
- Red Rocks: https://na-c.entwine.io/red-rocks/ept.json

Note: EPT datasets require CORS support from the server. The sample datasets from entwine.io are CORS-enabled.

$3

#### useLidarState

`typescript
const {
state,
setState,
setPointSize,
setOpacity,
setColorScheme,
setUsePercentile,
setElevationRange,
setZOffsetEnabled,
setZOffset,
toggle,
reset,
} = useLidarState(initialState?);
`

#### usePointCloud

`typescript
const { data, loading, error, progress, load, reset } = usePointCloud();

// Load a file
await load(file);
console.log(Loaded ${data.pointCount} points);
`

Supported Formats

- LAS 1.0 - 1.4 (all versions supported via copc.js + loaders.gl fallback)
- LAZ (compressed LAS)
- COPC (Cloud Optimized Point Cloud) - with dynamic streaming support
- EPT (Entwine Point Tile) - viewport-based streaming from HTTP servers

Note: LAS 1.2 and 1.4 are loaded using copc.js for optimal performance. LAS 1.0, 1.1, and 1.3 files automatically fall back to @loaders.gl/las.

Framework Integration

$3

maplibre-gl-lidar works with Next.js out of the box, including Turbopack (the default bundler in Next.js 15+). The library bundles browser-safe shims for Node.js modules that are statically referenced but never executed in browsers.

Note for older Next.js versions or custom webpack configs: If you encounter "Can't resolve 'fs'" errors, add this to your next.config.js:

`javascript
/* @type {import('next').NextConfig} /
const nextConfig = {
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.fallback = {
...config.resolve.fallback,
fs: false,
path: false,
};
}
return config;
},
};

module.exports = nextConfig;
`

Coordinate Systems

Point clouds are automatically transformed to WGS84 (EPSG:4326) for display on the map. The loader reads the WKT coordinate reference system from the file and uses proj4 to transform coordinates. Supported features:

- Projected coordinate systems (State Plane, UTM, etc.)
- 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.

$3

`bash


Pull the latest image

`bash


Build the image

| 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 - WebGL visualization layers
- copc.js - COPC/LAS/LAZ parsing (LAS 1.2/1.4)
- @loaders.gl/las - LAS parsing fallback (LAS 1.0/1.1/1.3)
- laz-perf - LAZ decompression
- proj4 - Coordinate transformation
- maplibre-gl - Map rendering

License

MIT

Credits

- Microsoft Planetary Computer: USGS 3DEP Lidar Point Cloud Dataset
- AWS Open Data: USGS 3DEP LiDAR Point Clouds
- Hobu, Inc.
- COPC.io
- Entwine