@geoql/v-maplibre 1.1.2 → 1.2.0

package/README.md

@@ -14,36 +14,36 @@
 - 🎨 **Reactive Components** - Reactive and composable map components
 - 🚀 **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
 
 ## Installation
 
-### From npm
-
 ```bash
-# pnpm
-pnpm add @geoql/v-maplibre maplibre-gl
+# bun
+bun add @geoql/v-maplibre maplibre-gl
 
 # npm
 npm install @geoql/v-maplibre maplibre-gl
 
 # yarn
 yarn add @geoql/v-maplibre maplibre-gl
-```
 
-### From JSR
+# pnpm
+pnpm add @geoql/v-maplibre maplibre-gl
+```
 
-```bash
-# deno
-deno add @geoql/v-maplibre
+### deck.gl Layers (Optional)
 
-# npm (using JSR)
-npx jsr add @geoql/v-maplibre
+For deck.gl visualization layers, install the required packages:
 
-# yarn
-yarn dlx jsr add @geoql/v-maplibre
+```bash
+# Core deck.gl packages
+bun add @deck.gl/core @deck.gl/layers @deck.gl/mapbox
 
-# pnpm
-pnpm dlx jsr add @geoql/v-maplibre
+# 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
 ```
 
 ## Quick Start
@@ -76,7 +76,7 @@ pnpm dlx jsr add @geoql/v-maplibre
 - **`VMarker`** - Interactive markers
 - **`VPopup`** - Popups and tooltips
 
-### Layer Components
+### MapLibre Layer Components
 
 - **`VLayerMaplibreGeojson`** - GeoJSON layers
 - **`VLayerMaplibreVector`** - Vector tile layers
@@ -87,6 +87,46 @@ pnpm dlx jsr add @geoql/v-maplibre
 - **`VLayerMaplibreCluster`** - Clustered point layers
 - **`VLayerMaplibrePmtile`** - PMTiles layers
 
+### deck.gl Layer Components
+
+High-performance WebGL visualization layers powered by deck.gl:
+
+**Core Layers**
+
+- `VLayerDeckglScatterplot` - Circles/points
+- `VLayerDeckglArc` - Origin-destination arcs
+- `VLayerDeckglLine` - Flat lines
+- `VLayerDeckglPath` - Polylines/routes
+- `VLayerDeckglPolygon` - Filled polygons
+- `VLayerDeckglGeojson` - GeoJSON features
+- `VLayerDeckglIcon` - Custom markers
+- `VLayerDeckglText` - Text labels
+- `VLayerDeckglColumn` - 3D columns
+- `VLayerDeckglBitmap` - Georeferenced images
+
+**Aggregation Layers**
+
+- `VLayerDeckglHeatmap` - Density heatmap
+- `VLayerDeckglHexagon` - Hexagonal binning
+- `VLayerDeckglGrid` - Square grid aggregation
+- `VLayerDeckglContour` - Contour/isolines
+- `VLayerDeckglScreenGrid` - Screen-space grid
+
+**Geo Layers**
+
+- `VLayerDeckglTrips` - Animated paths
+- `VLayerDeckglMVT` - Mapbox Vector Tiles
+- `VLayerDeckglTile` - Generic tiles
+- `VLayerDeckglTile3D` - 3D Tiles (Cesium)
+- `VLayerDeckglTerrain` - Terrain mesh
+- `VLayerDeckglH3Hexagon` - H3 hexagons
+- `VLayerDeckglGreatCircle` - Great circle arcs
+
+**Mesh Layers**
+
+- `VLayerDeckglSimpleMesh` - 3D meshes
+- `VLayerDeckglScenegraph` - glTF/GLB models
+
 ### Control Components
 
 - **`VControlNavigation`** - Navigation controls (zoom, rotate)
@@ -95,6 +135,40 @@ pnpm dlx jsr add @geoql/v-maplibre
 - **`VControlFullscreen`** - Fullscreen toggle
 - **`VControlAttribution`** - Attribution control
 
+## deck.gl Example
+
+```vue
+<script setup lang="ts">
+  import { VMap, VLayerDeckglScatterplot } from '@geoql/v-maplibre';
+
+  const mapOptions = {
+    style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
+    center: [-122.4, 37.8],
+    zoom: 11,
+  };
+
+  const data = [
+    { coordinates: [-122.4, 37.8], size: 100 },
+    { coordinates: [-122.5, 37.7], size: 200 },
+  ];
+</script>
+
+<template>
+  <VMap :options="mapOptions" style="height: 500px">
+    <VLayerDeckglScatterplot
+      id="points"
+      :data="data"
+      :get-position="(d) => d.coordinates"
+      :get-radius="(d) => d.size"
+      :get-fill-color="[255, 140, 0]"
+      :radius-min-pixels="5"
+      :pickable="true"
+      @click="(info) => console.log('Clicked:', info.object)"
+    ></VLayerDeckglScatterplot>
+  </VMap>
+</template>
+```
+
 ## Usage with Nuxt
 
 For Nuxt applications, wrap the map component with `ClientOnly`:
@@ -120,7 +194,6 @@ For Nuxt applications, wrap the map component with `ClientOnly`:
 Add styles to your `nuxt.config.ts`:
 
 ```typescript
-// nuxt.config.ts
 export default defineNuxtConfig({
   css: [
     'maplibre-gl/dist/maplibre-gl.css',
@@ -129,123 +202,29 @@ export default defineNuxtConfig({
 });
 ```
 
-Or create a Nuxt plugin to import styles:
-
-```typescript
-// plugins/maplibre.client.ts
-import 'maplibre-gl/dist/maplibre-gl.css';
-import '@geoql/v-maplibre/dist/v-maplibre.css';
-
-export default defineNuxtPlugin(() => {
-  // Plugin loaded
-});
-```
-
-## Examples
-
-### GeoJSON Layer
-
-```vue
-<script setup lang="ts">
-  import { VMap, VLayerMaplibreGeojson } from '@geoql/v-maplibre';
-  import type { GeoJSONSourceSpecification } from 'maplibre-gl';
-
-  const geojsonSource: GeoJSONSourceSpecification = {
-    type: 'geojson',
-    data: {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          geometry: {
-            type: 'Point',
-            coordinates: [-74.5, 40],
-          },
-          properties: { name: 'Example Point' },
-        },
-      ],
-    },
-  };
-
-  const layerOptions = {
-    id: 'points',
-    type: 'circle' as const,
-    paint: {
-      'circle-radius': 8,
-      'circle-color': '#007cbf',
-    },
-  };
-</script>
-
-<template>
-  <VMap :options="mapOptions" style="height: 500px">
-    <VLayerMaplibreGeojson
-      :source="geojsonSource"
-      :layer="layerOptions"
-    ></VLayerMaplibreGeojson>
-  </VMap>
-</template>
-```
-
-### PMTiles Support
-
-```vue
-<script setup lang="ts">
-  import { VMap, VLayerMaplibrePmtile } from '@geoql/v-maplibre';
-
-  const pmtilesUrl = 'https://example.com/tiles.pmtiles';
-
-  const layerOptions = {
-    id: 'pmtiles-layer',
-    type: 'fill' as const,
-    paint: {
-      'fill-color': '#088',
-      'fill-opacity': 0.5,
-    },
-  };
-</script>
-
-<template>
-  <VMap :options="mapOptions" support-pmtiles style="height: 500px">
-    <VLayerMaplibrePmtile
-      :url="pmtilesUrl"
-      :layer="layerOptions"
-    ></VLayerMaplibrePmtile>
-  </VMap>
-</template>
-```
-
-## Documentation
-
-Visit our [documentation site](#) for:
-
-- Complete API reference
-- Detailed component guides
-- Interactive examples
-- Migration guides
-
 ## TypeScript Support
 
-All components are fully typed. Import types from `maplibre-gl`:
+All components are fully typed. Import types as needed:
 
 ```typescript
-import type { MapOptions, LngLatLike, GeoJSONSource } from 'maplibre-gl';
+import type { MapOptions, LngLatLike } from 'maplibre-gl';
+import type { Color, PickingInfo } from '@deck.gl/core';
 ```
 
 ## Development
 
 ```bash
 # Install dependencies
-pnpm install
+bun install
 
 # Build the library
-pnpm build
+bun run build
 
-# Run documentation
-pnpm docs:dev
+# Run tests
+bun run test
 
-# Build documentation
-pnpm docs:build
+# Lint
+bun run lint
 ```
 
 ## License
@@ -257,6 +236,7 @@ MIT License - see [LICENSE](LICENSE) for details
 Built with:
 
 - [MapLibre GL JS](https://maplibre.org/)
+- [deck.gl](https://deck.gl/)
 - [Vue 3](https://vuejs.org/)
 - [Vite](https://vitejs.dev/)
 - [PMTiles](https://github.com/protomaps/PMTiles)

package/dist/constants/events/index.d.ts

@@ -0,0 +1,4 @@
+export { mapLayerEvents } from './layer';
+export { mapEvents } from './map';
+export { markerDOMEvents, markerMapEvents } from './marker';
+export { popupEvents } from './popup';

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

@@ -0,0 +1,2 @@
+import type { MapLayerEventType } from 'maplibre-gl';
+export declare const mapLayerEvents: Array<keyof MapLayerEventType>;

package/dist/constants/events/map.d.ts

@@ -0,0 +1,2 @@
+import type { MapEventType } from 'maplibre-gl';
+export declare const mapEvents: Array<keyof MapEventType>;

package/dist/constants/events/marker.d.ts

@@ -0,0 +1,2 @@
+export declare const markerMapEvents: string[];
+export declare const markerDOMEvents: string[];

package/dist/constants/events/popup.d.ts

@@ -0,0 +1 @@
+export declare const popupEvents: Array<"open" | "close">;

package/dist/controls/attribution/VControlAttribution.vue.d.ts

@@ -0,0 +1,21 @@
+import type { AttributionControlOptions, ControlPosition } from './types';
+type __VLS_Props = {
+    options?: AttributionControlOptions;
+    position?: ControlPosition;
+};
+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, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    options: AttributionControlOptions;
+    position: ControlPosition;
+}, {}, {}, {}, 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/attribution/index.d.ts

@@ -0,0 +1 @@
+export { default as AttributionControl } from './VControlAttribution.vue';

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

@@ -0,0 +1 @@
+export type { AttributionControlOptions, ControlPosition } from 'maplibre-gl';

package/dist/controls/fullscreen/VControlFullscreen.vue.d.ts

@@ -0,0 +1,11 @@
+import type { ControlPosition, FullscreenControlOptions } from './types';
+type __VLS_Props = {
+    options?: FullscreenControlOptions;
+    position?: ControlPosition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    options: FullscreenControlOptions;
+    position: ControlPosition;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1 @@
+export { default as FullscreenControl } from './VControlFullscreen.vue';

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

@@ -0,0 +1 @@
+export type { FullscreenControlOptions, ControlPosition } from 'maplibre-gl';

package/dist/controls/geolocate/VControlGeolocate.vue.d.ts

@@ -0,0 +1,11 @@
+import type { ControlPosition, GeolocateControlOptions } from './types';
+type __VLS_Props = {
+    options?: GeolocateControlOptions;
+    position?: ControlPosition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    options: GeolocateControlOptions;
+    position: ControlPosition;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

@@ -0,0 +1 @@
+export { default as GeolocateControl } from './VControlGeolocate.vue';

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

@@ -0,0 +1 @@
+export type { GeolocateControlOptions, ControlPosition } from 'maplibre-gl';

package/dist/controls/index.d.ts

@@ -0,0 +1,5 @@
+export { AttributionControl as VControlAttribution } from './attribution';
+export { FullscreenControl as VControlFullscreen } from './fullscreen';
+export { GeolocateControl as VControlGeolocate } from './geolocate';
+export { NavigationControl as VControlNavigation } from './navigation';
+export { ScaleControl as VControlScale } from './scale';

package/dist/controls/navigation/VControlNavigation.vue.d.ts

@@ -0,0 +1,11 @@
+import type { ControlPosition, NavigationOptions } from './types';
+type __VLS_Props = {
+    options?: NavigationOptions;
+    position?: ControlPosition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    options: NavigationOptions;
+    position: ControlPosition;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1 @@
+export { default as NavigationControl } from './VControlNavigation.vue';

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

@@ -0,0 +1,6 @@
+export type { ControlPosition } from 'maplibre-gl';
+export interface NavigationOptions {
+    showCompass?: boolean;
+    showZoom?: boolean;
+    visualizePitch?: boolean;
+}

package/dist/controls/scale/VControlScale.vue.d.ts

@@ -0,0 +1,21 @@
+import type { ControlPosition, ScaleControlOptions } from './types';
+type __VLS_Props = {
+    options?: ScaleControlOptions;
+    position?: ControlPosition;
+};
+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, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    options: ScaleControlOptions;
+    position: ControlPosition;
+}, {}, {}, {}, 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/scale/index.d.ts

@@ -0,0 +1 @@
+export { default as ScaleControl } from './VControlScale.vue';

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

@@ -0,0 +1 @@
+export type { ControlPosition, ScaleControlOptions } from 'maplibre-gl';