@geoql/v-maplibre 1.4.0 → 1.6.0

package/README.md

@@ -17,38 +17,43 @@
 - 🚀 **Nuxt 4 Ready** - Seamlessly works with Nuxt 4 and SSR
 - 🎯 **PMTiles Built-in** - Native support for PMTiles protocol
 - 🌐 **deck.gl Integration** - High-performance WebGL visualization layers
+- 🛰️ **COG/GeoTIFF Support** - GPU-accelerated Cloud-Optimized GeoTIFF layers
+- 📡 **LiDAR Viewer** - LAS/LAZ/COPC point cloud visualization with streaming
 
 ## Installation
 
 ```bash
 # bun
-bun add @geoql/v-maplibre maplibre-gl
+bun add @geoql/v-maplibre maplibre-gl @deck.gl/{core,layers,mapbox,aggregation-layers,geo-layers,mesh-layers} maplibre-gl-wind
 
 # npm
-npm install @geoql/v-maplibre maplibre-gl
+npm install @geoql/v-maplibre maplibre-gl @deck.gl/{core,layers,mapbox,aggregation-layers,geo-layers,mesh-layers} maplibre-gl-wind
 
 # yarn
-yarn add @geoql/v-maplibre maplibre-gl
+yarn add @geoql/v-maplibre maplibre-gl @deck.gl/{core,layers,mapbox,aggregation-layers,geo-layers,mesh-layers} maplibre-gl-wind
 
 # pnpm
-pnpm add @geoql/v-maplibre maplibre-gl
+pnpm add @geoql/v-maplibre maplibre-gl @deck.gl/{core,layers,mapbox,aggregation-layers,geo-layers,mesh-layers} maplibre-gl-wind
 ```
 
-### deck.gl Layers (Optional)
+> **Note:** All packages listed above are required peer dependencies. Without them, your build will fail with missing export errors.
 
-For deck.gl visualization layers, install the required packages:
+### Additional Optional Dependencies
+
+Install these packages based on the features you need:
 
 ```bash
-# Core deck.gl packages
-bun add @deck.gl/core @deck.gl/layers @deck.gl/mapbox
+# Raster/COG layers (Cloud-Optimized GeoTIFF)
+bun add @developmentseed/deck.gl-raster @developmentseed/deck.gl-geotiff geotiff
+
+# COG Mosaic layers (client-side mosaicking of multiple COGs)
+bun add @developmentseed/deck.gl-raster @developmentseed/deck.gl-geotiff geotiff proj4
 
-# Additional layer packages (as needed)
-bun add @deck.gl/aggregation-layers  # Heatmap, Hexagon, Grid
-bun add @deck.gl/geo-layers          # Trips, MVT, Tile, H3
-bun add @deck.gl/mesh-layers         # SimpleMesh, Scenegraph
+# LiDAR viewer control
+bun add maplibre-gl-lidar
 
-# Raster layers (COG/GeoTIFF)
-bun add @developmentseed/deck.gl-geotiff
+# Wind particle visualization
+bun add maplibre-gl-wind
 ```
 
 ## Quick Start
@@ -91,6 +96,7 @@ bun add @developmentseed/deck.gl-geotiff
 - **`VLayerMaplibreCanvas`** - Canvas layers
 - **`VLayerMaplibreCluster`** - Clustered point layers
 - **`VLayerMaplibrePmtile`** - PMTiles layers
+- **`VLayerMaplibreRoute`** - Route/delivery tracking visualization
 
 ### deck.gl Layer Components
 
@@ -125,16 +131,39 @@ High-performance WebGL visualization layers powered by deck.gl:
 - `VLayerDeckglTile3D` - 3D Tiles (Cesium)
 - `VLayerDeckglTerrain` - Terrain mesh
 - `VLayerDeckglH3Hexagon` - H3 hexagons
+- `VLayerDeckglH3Cluster` - Clustered H3 hexagon regions
 - `VLayerDeckglGreatCircle` - Great circle arcs
+- `VLayerDeckglWMS` - Web Map Service tiles
+
+**Tile System Layers**
+
+- `VLayerDeckglS2` - Google S2 geometry cells
+- `VLayerDeckglGeohash` - Geohash spatial indexing
+- `VLayerDeckglQuadkey` - Bing Maps Quadkey tiles
+- `VLayerDeckglGridCell` - Pre-aggregated grid cells
 
 **Mesh Layers**
 
 - `VLayerDeckglSimpleMesh` - 3D meshes
 - `VLayerDeckglScenegraph` - glTF/GLB models
 
-**Raster Layers** (requires `@developmentseed/deck.gl-geotiff`)
+**Point Cloud Layers**
+
+- `VLayerDeckglPointCloud` - LiDAR/photogrammetry point clouds
+- `VLayerDeckglSolidPolygon` - 3D extruded solid polygons
+
+**Raster Layers** (requires `@developmentseed/deck.gl-raster` and `@developmentseed/deck.gl-geotiff`)
+
+- `VLayerDeckglCOG` - Cloud-Optimized GeoTIFF visualization (GPU-accelerated, auto-reprojection)
+- `VLayerDeckglMosaic` - Client-side COG mosaic from STAC items (requires `flatbush`, `proj4`)
 
-- `VLayerDeckglCOG` - Cloud-Optimized GeoTIFF visualization
+**Wind Visualization** (requires `maplibre-gl-wind`)
+
+- `VLayerDeckglWindParticle` - Animated wind particle flow with speed-based color ramps
+
+**Generic Layer**
+
+- `VLayerDeckgl` - Use any deck.gl layer class directly
 
 ### Control Components
 
@@ -143,6 +172,7 @@ High-performance WebGL visualization layers powered by deck.gl:
 - **`VControlGeolocate`** - Geolocation control
 - **`VControlFullscreen`** - Fullscreen toggle
 - **`VControlAttribution`** - Attribution control
+- **`VControlLidar`** - LiDAR point cloud viewer (LAS/LAZ/COPC support, streaming, color schemes)
 
 ## deck.gl Example
 
@@ -178,6 +208,44 @@ High-performance WebGL visualization layers powered by deck.gl:
 </template>
 ```
 
+## Wind Visualization Example
+
+```vue
+<script setup lang="ts">
+  import { VMap, VLayerDeckglWindParticle } from '@geoql/v-maplibre';
+
+  const mapOptions = {
+    style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
+    center: [0, 20],
+    zoom: 2,
+  };
+
+  // Wind data points with speed (m/s) and direction (degrees, 0=North)
+  const windData = [
+    { lat: 40.7, lon: -74.0, speed: 5.2, direction: 180 },
+    { lat: 34.0, lon: -118.2, speed: 3.1, direction: 270 },
+    // ... more points
+  ];
+</script>
+
+<template>
+  <VMap :options="mapOptions" style="height: 500px">
+    <VLayerDeckglWindParticle
+      id="wind"
+      :wind-data="windData"
+      :num-particles="8192"
+      :speed-factor="50"
+      :color-ramp="[
+        [0.0, [59, 130, 189, 255]],
+        [0.5, [253, 174, 97, 255]],
+        [1.0, [213, 62, 79, 255]],
+      ]"
+      :speed-range="[0, 30]"
+    ></VLayerDeckglWindParticle>
+  </VMap>
+</template>
+```
+
 ## Usage with Nuxt
 
 For Nuxt applications, wrap the map component with `ClientOnly`:

package/dist/controls/_shared/index.d.ts

@@ -0,0 +1 @@
+export { useMapControl } from './useMapControl';

package/dist/controls/_shared/useMapControl.d.ts

@@ -0,0 +1,10 @@
+import { type Ref, type ShallowRef } from 'vue';
+import type { Map, ControlPosition } from 'maplibre-gl';
+/**
+ * Register a Vue component as a MapLibre IControl for proper control stacking.
+ *
+ * @param map - Ref to the MapLibre map instance
+ * @param containerRef - Ref to the component's root HTMLElement
+ * @param position - Control position ('top-left' | 'top-right' | 'bottom-left' | 'bottom-right')
+ */
+export declare function useMapControl(map: ShallowRef<Map | null> | Ref<Map | null>, containerRef: Ref<HTMLElement | null>, position: ControlPosition): void;

package/dist/controls/index.d.ts

@@ -5,3 +5,9 @@ export { NavigationControl as VControlNavigation } from './navigation';
 export { ScaleControl as VControlScale } from './scale';
 export { LidarControl as VControlLidar } from './lidar';
 export type { LidarControlOptions, ColorScheme, CopcLoadingMode, PointCloudInfo, PointCloudBounds, StreamingProgress, LidarLoadEventData, LidarErrorEventData, LidarUnloadEventData, } from './lidar';
+export { VControlLayer, VControlLayerGroup } from './layer';
+export type { LayerControlOptions, LayerType, ControlPosition, LayerConfig, } from './layer';
+export { layerControlEvents } from './layer';
+export { VControlLegend } from './legend';
+export type { LegendType, CategoryLegendItem, GradientLegendItem, SizeLegendItem, LegendControlOptions, FilterState, ExpressionValue, DeckLayerWithExtensions, } from './legend';
+export { LEGEND_EVENTS } from './legend';

package/dist/controls/layer/VControlLayer.vue.d.ts

@@ -0,0 +1,38 @@
+import type { ControlPosition, LayerType } from './types';
+type __VLS_Props = {
+    layerId: string;
+    position?: ControlPosition;
+    visible?: boolean;
+    opacity?: number;
+    title?: string;
+    layerType?: LayerType;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "visibility-change": (visible: boolean) => any;
+    "opacity-change": (opacity: number) => any;
+    "update:visible": (visible: boolean) => any;
+    "update:opacity": (opacity: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onVisibility-change"?: ((visible: boolean) => any) | undefined;
+    "onOpacity-change"?: ((opacity: number) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    "onUpdate:opacity"?: ((opacity: number) => any) | undefined;
+}>, {
+    position: ControlPosition;
+    title: string;
+    opacity: number;
+    visible: boolean;
+    layerType: LayerType;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/controls/layer/VControlLayerGroup.vue.d.ts

@@ -0,0 +1,53 @@
+import type { ControlPosition, LayerType } from './types';
+export interface LayerConfig {
+    id: string;
+    title: string;
+    visible?: boolean;
+    opacity?: number;
+    type?: LayerType;
+}
+type __VLS_Props = {
+    layers: LayerConfig[];
+    position?: ControlPosition;
+    title?: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "visibility-change": (data: {
+        layerId: string;
+        visible: boolean;
+    }) => any;
+    "opacity-change": (data: {
+        layerId: string;
+        opacity: number;
+    }) => any;
+    "update:layers": (layers: LayerConfig[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onVisibility-change"?: ((data: {
+        layerId: string;
+        visible: boolean;
+    }) => any) | undefined;
+    "onOpacity-change"?: ((data: {
+        layerId: string;
+        opacity: number;
+    }) => any) | undefined;
+    "onUpdate:layers"?: ((layers: LayerConfig[]) => any) | undefined;
+}>, {
+    position: ControlPosition;
+    collapsed: boolean;
+    title: string;
+    collapsible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/controls/layer/events.d.ts

@@ -0,0 +1 @@
+export declare const layerControlEvents: string[];

package/dist/controls/layer/index.d.ts

@@ -0,0 +1,5 @@
+export { default as VControlLayer } from './VControlLayer.vue';
+export { default as VControlLayerGroup } from './VControlLayerGroup.vue';
+export type { LayerControlOptions, LayerType, ControlPosition } from './types';
+export type { LayerConfig } from './VControlLayerGroup.vue';
+export { layerControlEvents } from './events';

package/dist/controls/layer/types.d.ts

@@ -0,0 +1,16 @@
+export type { ControlPosition } from 'maplibre-gl';
+export type LayerType = 'maplibre' | 'deckgl';
+export interface LayerControlOptions {
+    /** Layer ID to control */
+    layerId: string;
+    /** Layer type - auto-detected if not provided */
+    layerType?: LayerType;
+    /** Initial visibility state */
+    visible?: boolean;
+    /** Initial opacity (0-1) */
+    opacity?: number;
+    /** Control title text (default: 'Layer Control') */
+    title?: string;
+    /** Custom CSS class */
+    className?: string;
+}

package/dist/controls/legend/VControlLegend.vue.d.ts

@@ -0,0 +1,54 @@
+import type { ControlPosition, LegendType, LegendItem, FilterState } from './types';
+type __VLS_Props = {
+    layerIds: string[];
+    type?: LegendType;
+    items?: LegendItem[];
+    position?: ControlPosition;
+    property?: string;
+    autoGenerate?: boolean;
+    title?: string;
+    collapsed?: boolean;
+    interactive?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "item-click": (data: {
+        item: LegendItem;
+        index: number;
+        visible: boolean;
+    }) => any;
+    "filter-change": (data: {
+        filter: FilterState;
+        layerIds: string[];
+    }) => any;
+    "update:filter": (filter: FilterState) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onItem-click"?: ((data: {
+        item: LegendItem;
+        index: number;
+        visible: boolean;
+    }) => any) | undefined;
+    "onFilter-change"?: ((data: {
+        filter: FilterState;
+        layerIds: string[];
+    }) => any) | undefined;
+    "onUpdate:filter"?: ((filter: FilterState) => any) | undefined;
+}>, {
+    position: ControlPosition;
+    type: LegendType;
+    collapsed: boolean;
+    title: string;
+    autoGenerate: boolean;
+    interactive: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/controls/legend/events.d.ts

@@ -0,0 +1,2 @@
+export declare const LEGEND_EVENTS: readonly ["item-click", "filter-change", "update:filter"];
+export type LegendEventName = (typeof LEGEND_EVENTS)[number];

package/dist/controls/legend/index.d.ts

@@ -0,0 +1,3 @@
+export { default as VControlLegend } from './VControlLegend.vue';
+export * from './types';
+export * from './events';

package/dist/controls/legend/types.d.ts

@@ -0,0 +1,63 @@
+export type { ControlPosition } from 'maplibre-gl';
+export type LegendType = 'category' | 'gradient' | 'size';
+export type LayerType = 'maplibre' | 'deckgl';
+export interface CategoryLegendItem {
+    value: string | number;
+    label: string;
+    color: string;
+    visible?: boolean;
+    count?: number;
+}
+export interface GradientLegendItem {
+    min: number;
+    max: number;
+    minLabel?: string;
+    maxLabel?: string;
+    colors: string[];
+    stops?: number[];
+}
+export interface SizeLegendItem {
+    value: number;
+    label: string;
+    size: number;
+}
+export type LegendItem = CategoryLegendItem | GradientLegendItem | SizeLegendItem;
+export interface FilterState {
+    visibleValues: (string | number)[];
+    minRange?: number;
+    maxRange?: number;
+}
+export interface LegendControlOptions {
+    layerIds: string[];
+    type: LegendType;
+    items?: LegendItem[];
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    property?: string;
+    autoGenerate?: boolean;
+    title?: string;
+    collapsed?: boolean;
+    interactive?: boolean;
+    className?: string;
+}
+export interface LegendItemClickEventData {
+    item: LegendItem;
+    index: number;
+    visible: boolean;
+}
+export interface LegendFilterChangeEventData {
+    filter: FilterState;
+    layerIds: string[];
+}
+export type ExpressionValue = string | number | boolean | ExpressionValue[];
+export interface DeckLayerWithExtensions {
+    id: string;
+    props?: {
+        extensions?: Array<{
+            constructor?: {
+                name?: string;
+            };
+        }>;
+        filterRange?: [number, number];
+    };
+    clone?: (props: object) => unknown;
+}