vue3-maplibre-gl 3.2.0 → 3.2.1

package/README.md

@@ -1,19 +1,21 @@
-# Vue MapLibre GL
+# Vue3 MapLibre GL
 
 [![npm](https://img.shields.io/npm/v/vue3-maplibre-gl)](https://www.npmjs.com/package/vue3-maplibre-gl) [![Downloads](https://img.shields.io/npm/dt/vue3-maplibre-gl)](https://www.npmjs.com/package/vue3-maplibre-gl) [![Stars](https://img.shields.io/github/stars/danh121097/vue-mapbox-gl?style=flat-square)](https://github.com/danh121097/vue-mapbox-gl/stargazers) [![License](https://img.shields.io/npm/l/vue3-maplibre-gl)](https://github.com/danh121097/vue-mapbox-gl/blob/main/LICENSE)
 
-> Vue 3 components and composables for MapLibre GL JS - Build interactive maps with ease
+> **The most comprehensive Vue 3 library for MapLibre GL JS** - Build interactive maps with 10+ components and 15+ composables
 
-A comprehensive Vue 3 component library for MapLibre GL JS that provides an intuitive, reactive way to build interactive maps in your Vue applications.
+A powerful, feature-rich Vue 3 component library that provides an intuitive, reactive way to build interactive maps in your Vue applications using MapLibre GL JS.
 
 ## ✨ Features
 
-- 🗺️ **Interactive Maps** - Create beautiful, interactive maps with MapLibre GL JS
-- 🧩 **Component-Based** - Use Vue components for markers, layers, controls, and more
-- 🎯 **TypeScript Support** - Full TypeScript support with comprehensive type definitions
-- 🚀 **Performance** - Optimized for performance with efficient rendering
-- 🔧 **Composables** - Powerful composables for map interactions and state management
-- 📱 **Responsive** - Mobile-friendly maps that work across all devices
+- 🗺️ **Interactive Maps** - High-performance vector maps with WebGL rendering
+- 🧩 **10+ Vue Components** - Mapbox, GeoJsonSource, FillLayer, CircleLayer, LineLayer, SymbolLayer, Marker, PopUp, Image, GeolocateControls
+- 🔧 **15+ Composables** - Complete map management, animations, events, and utilities
+- 🎯 **Full TypeScript Support** - Comprehensive type definitions and interfaces
+- ⚡ **High Performance** - Optimized rendering with automatic resource cleanup
+- 📱 **Mobile-Friendly** - Touch controls and responsive design for all devices
+- 🌐 **Self-Contained** - Bundled CSS and automatic dependency management
+- 🔄 **Reactive Data Binding** - Seamless integration with Vue 3's reactivity system
 
 ## 📦 Installation
 
@@ -39,32 +41,237 @@ pnpm add vue3-maplibre-gl
 
 ```vue
 <template>
-  <MapLibreMap
-    :map-style="mapStyle"
-    :center="[0, 0]"
-    :zoom="2"
-    style="height: 400px"
-  >
-    <MapLibreMarker :lng-lat="[0, 0]">
+  <Mapbox :options="mapOptions" style="height: 500px" @load="onMapLoad">
+    <!-- GeoJSON Data Source -->
+    <GeoJsonSource :data="geoJsonData">
+      <FillLayer :style="fillStyle" />
+      <CircleLayer :style="circleStyle" />
+    </GeoJsonSource>
+
+    <!-- Interactive Marker -->
+    <Marker :lnglat="[0, 0]" :draggable="true">
       <div class="marker">📍</div>
-    </MapLibreMarker>
-  </MapLibreMap>
+    </Marker>
+
+    <!-- Popup -->
+    <PopUp :lnglat="[0, 0]" :show="true">
+      <div class="popup-content">
+        <h3>Welcome to Vue3 MapLibre GL!</h3>
+        <p>Interactive maps made easy with Vue 3</p>
+      </div>
+    </PopUp>
+
+    <!-- Geolocation Control -->
+    <GeolocateControls position="top-right" />
+  </Mapbox>
 </template>
 
 <script setup>
-import { MapLibreMap, MapLibreMarker } from 'vue3-maplibre-gl';
+import { ref } from 'vue';
+import {
+  Mapbox,
+  GeoJsonSource,
+  FillLayer,
+  CircleLayer,
+  Marker,
+  PopUp,
+  GeolocateControls,
+} from 'vue3-maplibre-gl';
 import 'vue3-maplibre-gl/dist/style.css';
 
-const mapStyle = 'https://demotiles.maplibre.org/style.json';
+const mapOptions = ref({
+  style: 'https://demotiles.maplibre.org/style.json',
+  center: [0, 0],
+  zoom: 2,
+});
+
+const geoJsonData = ref({
+  type: 'FeatureCollection',
+  features: [
+    {
+      type: 'Feature',
+      geometry: { type: 'Point', coordinates: [0, 0] },
+      properties: { name: 'Sample Point' },
+    },
+  ],
+});
+
+const fillStyle = ref({
+  'fill-color': '#088',
+  'fill-opacity': 0.8,
+});
+
+const circleStyle = ref({
+  'circle-radius': 6,
+  'circle-color': '#007cbf',
+});
+
+function onMapLoad(map) {
+  console.log('Map loaded:', map);
+}
+</script>
+
+<style>
+.marker {
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.popup-content {
+  padding: 10px;
+  max-width: 200px;
+}
+</style>
+```
+
+## 🧩 Components
+
+Vue3 MapLibre GL provides 10+ reactive Vue components:
+
+| Component             | Description                                                   |
+| --------------------- | ------------------------------------------------------------- |
+| **Mapbox**            | Main map container with comprehensive event handling          |
+| **GeoJsonSource**     | Reactive data source for GeoJSON data with clustering support |
+| **FillLayer**         | Render filled polygons with customizable styling              |
+| **CircleLayer**       | Display point data as circles with dynamic sizing             |
+| **LineLayer**         | Render linear features like routes and boundaries             |
+| **SymbolLayer**       | Display icons and text labels                                 |
+| **Marker**            | HTML markers with drag support and custom content             |
+| **PopUp**             | Interactive popup windows with custom HTML                    |
+| **Image**             | Manage and load images for map styles                         |
+| **GeolocateControls** | User location tracking with comprehensive events              |
+
+## 🔧 Composables
+
+15+ powerful composables for advanced map functionality:
+
+### Map Management
+
+- `useCreateMapbox` - Enhanced map creation with error handling
+- `useMapbox` - Simplified map state management
+
+### Layer Management
+
+- `useCreateFillLayer` - Fill layer creation and management
+- `useCreateCircleLayer` - Circle layer for point visualization
+- `useCreateLineLayer` - Line layer for linear features
+- `useCreateSymbolLayer` - Symbol layer for icons and text
+
+### Source Management
+
+- `useCreateGeoJsonSource` - GeoJSON source with reactive data
+- `useGeoJsonSource` - Simplified source management
+
+### Controls
+
+- `useGeolocateControl` - User location tracking
+
+### Events
+
+- `useMapEventListener` - Map event handling
+- `useLayerEventListener` - Layer-specific events
+
+### Utilities
+
+- `useFlyTo` - Smooth map animations
+- `useEaseTo` - Easing animations
+- `useJumpTo` - Instant position changes
+- `useBounds` - Bounds management
+- `useZoom` - Zoom controls
+- `useLogger` - Consistent logging
+
+## 🎯 TypeScript Support
+
+Vue3 MapLibre GL includes comprehensive TypeScript support:
+
+```typescript
+import { ref } from 'vue';
+import {
+  Mapbox,
+  GeoJsonSource,
+  FillLayer,
+  type MapboxProps,
+  type FillLayerStyle,
+  type GeoJSONSourceSpecification,
+} from 'vue3-maplibre-gl';
+
+const mapOptions = ref<MapboxProps['options']>({
+  style: 'https://demotiles.maplibre.org/style.json',
+  center: [0, 0],
+  zoom: 2,
+});
+
+const fillStyle = ref<FillLayerStyle>({
+  'fill-color': '#088',
+  'fill-opacity': 0.8,
+});
+
+const geoJsonData = ref<GeoJSONSourceSpecification['data']>({
+  type: 'FeatureCollection',
+  features: [],
+});
+```
+
+## 🌟 Advanced Example with Composables
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import {
+  useCreateMapbox,
+  useFlyTo,
+  useMapEventListener,
+  useCreateGeoJsonSource,
+} from 'vue3-maplibre-gl';
+
+const mapContainer = ref();
+const mapStyle = ref('https://demotiles.maplibre.org/style.json');
+
+// Create map with enhanced error handling
+const { mapInstance, setCenter, setZoom } = useCreateMapbox(
+  mapContainer,
+  mapStyle,
+  {
+    onLoad: (map) => console.log('Map loaded:', map),
+    onError: (error) => console.error('Map error:', error),
+    debug: true,
+  },
+);
+
+// Add smooth animations
+const { flyTo } = useFlyTo({ map: mapInstance });
+
+// Create reactive data source
+const { setData } = useCreateGeoJsonSource({
+  map: mapInstance,
+  id: 'my-source',
+  data: { type: 'FeatureCollection', features: [] },
+});
+
+// Listen to map events
+useMapEventListener({
+  map: mapInstance,
+  event: 'click',
+  handler: (event) => {
+    flyTo({
+      center: event.lngLat,
+      zoom: 12,
+      duration: 2000,
+    });
+  },
+});
 </script>
 ```
 
 ## 📚 Documentation
 
-- **[Getting Started](https://danh121097.github.io/vue-mapbox-gl/guide/getting-started)** - Learn the basics
+- **[Getting Started](https://danh121097.github.io/vue-mapbox-gl/guide/getting-started)** - Learn the basics and see examples
 - **[Installation Guide](https://danh121097.github.io/vue-mapbox-gl/guide/installation)** - Detailed setup instructions
-- **[API Reference](https://danh121097.github.io/vue-mapbox-gl/api/components)** - Complete component documentation
-- **[Examples](https://danh121097.github.io/vue-mapbox-gl/examples/)** - Live examples and demos
+- **[Configuration](https://danh121097.github.io/vue-mapbox-gl/guide/configuration)** - Advanced configuration options
+- **[Components API](https://danh121097.github.io/vue-mapbox-gl/api/components)** - Complete component documentation
+- **[Composables API](https://danh121097.github.io/vue-mapbox-gl/api/composables)** - Composables reference
+- **[TypeScript Types](https://danh121097.github.io/vue-mapbox-gl/api/types)** - Type definitions
+- **[Live Examples](https://danh121097.github.io/vue-mapbox-gl/examples/)** - Interactive demos
 
 ## 🛠️ Development
 
@@ -86,21 +293,61 @@ yarn build
 yarn docs:dev
 ```
 
+## 🌟 Why Choose Vue3 MapLibre GL?
+
+- **🎯 Vue 3 Native** - Built specifically for Vue 3 with Composition API support
+- **🗺️ MapLibre GL JS** - Uses the open-source MapLibre GL JS for high-performance rendering
+- **🧩 Component-Based** - 10+ Vue components for maps, layers, sources, markers, and controls
+- **🔧 Powerful Composables** - 15+ composables for map management, animations, and utilities
+- **📚 Comprehensive Documentation** - Detailed guides, API references, and examples
+- **⚡ High Performance** - Optimized for performance with automatic resource cleanup
+- **🌐 Open Source** - MIT licensed with active community support
+- **📱 Mobile Ready** - Touch-friendly controls and responsive design
+
 ## 🤝 Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
 
+### Development Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/danh121097/vue-mapbox-gl.git
+cd vue-mapbox-gl
+
+# Install dependencies
+yarn install
+
+# Start development server
+yarn dev
+
+# Run tests
+yarn test
+
+# Build the library
+yarn build
+
+# Run documentation
+yarn docs:dev
+```
+
 ## 📄 License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
 ## 🙏 Acknowledgments
 
-- Built on top of [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/)
+- Built on top of [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) - The open-source mapping library
 - Inspired by the Vue.js ecosystem and community
+- Thanks to all contributors and users who make this project better
 
 ## 📞 Support
 
-- 📖 [Documentation](https://danh121097.github.io/vue-mapbox-gl/)
-- 🐛 [Issues](https://github.com/danh121097/vue-mapbox-gl/issues)
-- 💬 [Discussions](https://github.com/danh121097/vue-mapbox-gl/discussions)
+- 📖 [Documentation](https://danh121097.github.io/vue-mapbox-gl/) - Comprehensive guides and API reference
+- 🐛 [Issues](https://github.com/danh121097/vue-mapbox-gl/issues) - Bug reports and feature requests
+- 💬 [Discussions](https://github.com/danh121097/vue-mapbox-gl/discussions) - Community discussions and questions
+- ⭐ [GitHub](https://github.com/danh121097/vue-mapbox-gl) - Star the project if you find it useful!
+
+---
+
+**Made with ❤️ for the Vue.js community**

package/dist/components/CircleLayer.vue.d.ts

@@ -0,0 +1,98 @@
+import { CreateLayerActions, CircleLayerStyle } from '../types';
+import { Map, MapLayerMouseEvent, MapLayerTouchEvent, FilterSpecification, CircleLayerSpecification } from 'maplibre-gl';
+
+/**
+ * Props interface for CircleLayer component
+ * Defines all configurable properties for a MapLibre GL Circle Layer
+ */
+interface LayerProps {
+    /** Unique identifier for the layer */
+    id: string;
+    /** Filter expression to apply to the layer */
+    filter: FilterSpecification;
+    /** Style configuration for the circle layer */
+    style: CircleLayerStyle;
+    /** Maximum zoom level for layer visibility */
+    maxzoom: number;
+    /** Minimum zoom level for layer visibility */
+    minzoom: number;
+    /** Arbitrary metadata for the layer */
+    metadata: object;
+    /** Data source for the layer */
+    source: string | object;
+    /** Source layer name for vector sources */
+    sourceLayer: string;
+    /** ID of layer before which to insert this layer */
+    beforeId: string;
+    /** Whether the layer is visible */
+    visible: boolean;
+    /** Enable debug logging */
+    debug: boolean;
+    /** Callback function to register layer actions */
+    register: (actions: CreateLayerActions<CircleLayerSpecification>, map: Map) => void;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Partial<LayerProps>>, {
+    visible: boolean;
+    debug: boolean;
+    filter: () => FilterSpecification;
+    style: () => CircleLayerStyle;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    touchcancel: ((ev: any) => void) & ((ev: MapLayerTouchEvent) => void);
+    touchend: ((ev: any) => void) & ((ev: MapLayerTouchEvent) => void);
+    touchstart: ((ev: any) => void) & ((ev: MapLayerTouchEvent) => void);
+    click: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    contextmenu: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    dblclick: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    mousemove: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    mouseup: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    mousedown: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    mouseout: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    mouseover: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    mouseenter: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    mouseleave: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    register: (actions: CreateLayerActions<CircleLayerSpecification>, map: Map) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Partial<LayerProps>>, {
+    visible: boolean;
+    debug: boolean;
+    filter: () => FilterSpecification;
+    style: () => CircleLayerStyle;
+}>>> & Readonly<{
+    onTouchcancel?: ((ev: MapLayerTouchEvent) => any) | undefined;
+    onTouchend?: ((ev: MapLayerTouchEvent) => any) | undefined;
+    onTouchstart?: ((ev: MapLayerTouchEvent) => any) | undefined;
+    onClick?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onContextmenu?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onDblclick?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onMousemove?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onMouseup?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onMousedown?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onMouseout?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onMouseover?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onMouseenter?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onMouseleave?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onRegister?: ((actions: CreateLayerActions<CircleLayerSpecification>, map: Map) => any) | undefined;
+}>, {
+    visible: boolean;
+    filter: FilterSpecification;
+    debug: boolean;
+    style: CircleLayerStyle;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+//# sourceMappingURL=CircleLayer.vue.d.ts.map

package/dist/components/CircleLayer.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircleLayer.vue.d.ts","sourceRoot":"","sources":["../../libs/components/CircleLayer.vue"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,kBAAkB,EAElB,gBAAgB,EACjB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EACV,GAAG,EAEH,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,EACzB,MAAM,aAAa,CAAC;AAIrB;;;GAGG;AACH,UAAU,UAAU;IAClB,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,MAAM,EAAE,mBAAmB,CAAC;IAC5B,+CAA+C;IAC/C,KAAK,EAAE,gBAAgB,CAAC;IACxB,8CAA8C;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,mCAAmC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,kDAAkD;IAClD,QAAQ,EAAE,CACR,OAAO,EAAE,kBAAkB,CAAC,wBAAwB,CAAC,EACrD,GAAG,EAAE,GAAG,KACL,IAAI,CAAC;CACX;;;;kBA+I0B,mBAAmB;iBACvB,gBAAgB;;;;;;;;;;;;;;;;;;;kBADZ,mBAAmB;iBACvB,gBAAgB;;;;;;;;;;;;;;;;;aAxJ5B,OAAO;YAhBR,mBAAmB;WAkBpB,OAAO;WAhBP,gBAAgB;;AAyMzB,wBAOG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/FillLayer.vue.d.ts

@@ -0,0 +1,87 @@
+import { CreateLayerActions, FillLayerStyle } from '../types';
+import { Map, MapLayerMouseEvent, MapLayerTouchEvent, FilterSpecification, FillLayerSpecification } from 'maplibre-gl';
+
+/**
+ * Props interface for FillLayer component
+ * Defines all configurable properties for a MapLibre GL Fill Layer
+ */
+interface LayerProps {
+    /** Unique identifier for the layer */
+    id: string;
+    /** Filter expression to apply to the layer */
+    filter: FilterSpecification;
+    /** Style configuration for the fill layer */
+    style: FillLayerStyle;
+    /** Maximum zoom level for layer visibility */
+    maxzoom: number;
+    /** Minimum zoom level for layer visibility */
+    minzoom: number;
+    /** Arbitrary metadata for the layer */
+    metadata: object;
+    /** Data source for the layer */
+    source: string | object;
+    /** Source layer name for vector sources */
+    sourceLayer: string;
+    /** ID of layer before which to insert this layer */
+    beforeId: string;
+    /** Whether the layer is visible */
+    visible: boolean;
+    /** Callback function to register layer actions */
+    register: (actions: CreateLayerActions<FillLayerSpecification>, map: Map) => void;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Partial<LayerProps>>, {
+    visible: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    touchcancel: ((ev: any) => void) & ((ev: MapLayerTouchEvent) => void);
+    touchend: ((ev: any) => void) & ((ev: MapLayerTouchEvent) => void);
+    touchstart: ((ev: any) => void) & ((ev: MapLayerTouchEvent) => void);
+    click: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    contextmenu: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    dblclick: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    mousemove: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    mouseup: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    mousedown: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    mouseout: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    mouseover: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    mouseenter: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    mouseleave: ((ev: any) => void) & ((ev: MapLayerMouseEvent) => void);
+    register: (actions: CreateLayerActions<FillLayerSpecification>, map: Map) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Partial<LayerProps>>, {
+    visible: boolean;
+}>>> & Readonly<{
+    onTouchcancel?: ((ev: MapLayerTouchEvent) => any) | undefined;
+    onTouchend?: ((ev: MapLayerTouchEvent) => any) | undefined;
+    onTouchstart?: ((ev: MapLayerTouchEvent) => any) | undefined;
+    onClick?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onContextmenu?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onDblclick?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onMousemove?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onMouseup?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onMousedown?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onMouseout?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onMouseover?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onMouseenter?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onMouseleave?: ((ev: MapLayerMouseEvent) => any) | undefined;
+    onRegister?: ((actions: CreateLayerActions<FillLayerSpecification>, map: Map) => any) | undefined;
+}>, {
+    visible: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+//# sourceMappingURL=FillLayer.vue.d.ts.map

package/dist/components/FillLayer.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FillLayer.vue.d.ts","sourceRoot":"","sources":["../../libs/components/FillLayer.vue"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,kBAAkB,EAElB,cAAc,EACf,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EACV,GAAG,EAEH,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,sBAAsB,EACvB,MAAM,aAAa,CAAC;AAIrB;;;GAGG;AACH,UAAU,UAAU;IAClB,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,MAAM,EAAE,mBAAmB,CAAC;IAC5B,6CAA6C;IAC7C,KAAK,EAAE,cAAc,CAAC;IACtB,8CAA8C;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,mCAAmC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,kDAAkD;IAClD,QAAQ,EAAE,CACR,OAAO,EAAE,kBAAkB,CAAC,sBAAsB,CAAC,EACnD,GAAG,EAAE,GAAG,KACL,IAAI,CAAC;CACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aANU,OAAO;;AAkLlB,wBAOG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/GeoJsonSource.vue.d.ts

@@ -0,0 +1,107 @@
+import { CreateGeoJsonSourceActions } from '../composables';
+import { GeoJSONSource, GeoJSONSourceSpecification } from 'maplibre-gl';
+
+/**
+ * Enhanced GeoJsonSource component props with comprehensive configuration options
+ */
+interface GeoJsonSourceProps {
+    /** Unique identifier for the source */
+    id?: string;
+    /** GeoJSON data for the source */
+    data?: GeoJSONSourceSpecification['data'];
+    /** Additional source configuration options */
+    options?: Partial<GeoJSONSourceSpecification>;
+    /** Callback for registering source actions */
+    register?: (actions: CreateGeoJsonSourceActions) => void;
+    /** Enable debug logging */
+    debug?: boolean;
+    /** Automatically cleanup resources on unmount */
+    autoCleanup?: boolean;
+    /** Error handling callback */
+    onError?: (error: any) => void;
+    /** Source load success callback */
+    onLoad?: (source: GeoJSONSource) => void;
+    /** Data update callback */
+    onDataUpdate?: (data: GeoJSONSourceSpecification['data']) => void;
+}
+/**
+ * Enhanced data setter with validation and error handling
+ * @param newData - New GeoJSON data to set
+ */
+declare function handleSetData(newData: GeoJSONSourceSpecification['data']): void;
+/**
+ * Enhanced cleanup function for disposing resources
+ */
+declare function cleanup(): void;
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<GeoJsonSourceProps>, {
+    data: () => {
+        type: string;
+        features: never[];
+    };
+    options: () => {};
+    debug: boolean;
+    autoCleanup: boolean;
+}>>, {
+    sourceId: string;
+    getSource: import('vue').ShallowRef<import('..').Nullable<GeoJSONSource>>;
+    setData: typeof handleSetData;
+    removeSource: () => void;
+    refreshSource: () => void;
+    sourceStatus: Readonly<import('../composables').SourceStatus>;
+    isSourceReady: boolean;
+    isSourceRegistered: import('vue').Ref<boolean, boolean>;
+    isDataValid: import('vue').ComputedRef<boolean>;
+    lastDataUpdate: import('vue').Ref<string | import('geojson').GeoJSON<import('geojson').Geometry, import('geojson').GeoJsonProperties> | undefined, string | import('geojson').GeoJSON<import('geojson').Geometry, import('geojson').GeoJsonProperties> | undefined>;
+    cleanup: typeof cleanup;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    register: (actions: CreateGeoJsonSourceActions) => void;
+    error: (error: any) => void;
+    load: (source: any) => void;
+    "data-update": (data: string | import('geojson').GeoJSON<import('geojson').Geometry, import('geojson').GeoJsonProperties>) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<GeoJsonSourceProps>, {
+    data: () => {
+        type: string;
+        features: never[];
+    };
+    options: () => {};
+    debug: boolean;
+    autoCleanup: boolean;
+}>>> & Readonly<{
+    onError?: ((error: any) => any) | undefined;
+    onLoad?: ((source: any) => any) | undefined;
+    onRegister?: ((actions: CreateGeoJsonSourceActions) => any) | undefined;
+    "onData-update"?: ((data: string | import('geojson').GeoJSON<import('geojson').Geometry, import('geojson').GeoJsonProperties>) => any) | undefined;
+}>, {
+    data: GeoJSONSourceSpecification["data"];
+    debug: boolean;
+    autoCleanup: boolean;
+    options: Partial<GeoJSONSourceSpecification>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=GeoJsonSource.vue.d.ts.map

package/dist/components/GeoJsonSource.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeoJsonSource.vue.d.ts","sourceRoot":"","sources":["../../libs/components/GeoJsonSource.vue"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAI7E;;GAEG;AACH,UAAU,kBAAkB;IAC1B,uCAAuC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kCAAkC;IAClC,IAAI,CAAC,EAAE,0BAA0B,CAAC,MAAM,CAAC,CAAC;IAC1C,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC,0BAA0B,CAAC,CAAC;IAC9C,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,0BAA0B,KAAK,IAAI,CAAC;IACzD,2BAA2B;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,mCAAmC;IACnC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,2BAA2B;IAC3B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;CACnE;AAuDD;;;GAGG;AACH,iBAAS,aAAa,CAAC,OAAO,EAAE,0BAA0B,CAAC,MAAM,CAAC,GAAG,IAAI,CAuBxE;AA4ED;;GAEG;AACH,iBAAS,OAAO,IAAI,IAAI,CAevB;AA6CD,iBAAS,cAAc;qBA0BM,GAAG;EAG/B;AASD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAlRZ,0BAA0B,CAAC,MAAM,CAAC;WAMjC,OAAO;iBAED,OAAO;aANX,OAAO,CAAC,0BAA0B,CAAC;4EAwR7C,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}