react-bkoi-gl 2.0.1 → 2.1.0

package/dist/index.d.cts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 import { CSSProperties } from 'react';
-import { PaddingOptions, MapOptions, Map as Map$1, MarkerOptions, Marker as Marker$1, PopupOptions, Popup as Popup$1, AttributionControlOptions, AttributionControl as AttributionControl$1, FullscreenControlOptions, FullscreenControl as FullscreenControl$1, GeolocateControlOptions, GeolocateControl as GeolocateControl$1, NavigationControlOptions, NavigationControl as NavigationControl$1, ScaleControlOptions, ScaleControl as ScaleControl$1, TerrainSpecification, TerrainControl as TerrainControl$1, LogoControlOptions, LogoControl as LogoControl$1, MapLayerMouseEvent, MapLayerTouchEvent, MapWheelEvent, MapLibreZoomEvent, MapLibreEvent, MapStyleDataEvent, MapSourceDataEvent, LngLat, MapMouseEvent as MapMouseEvent$1, Point, MapGeoJSONFeature, LngLatBoundsLike, PointLike, StyleSpecification, ProjectionSpecification, LightSpecification, SkySpecification, ControlPosition, SourceSpecification, LayerSpecification, CustomLayerInterface, IControl } from 'maplibre-gl';
-export { AttributionControlOptions, BackgroundLayerSpecification, CanvasSourceSpecification, CircleLayerSpecification, ControlPosition, CustomLayerInterface, FillExtrusionLayerSpecification, FillLayerSpecification, FullscreenControlOptions, GeoJSONSourceSpecification, GeolocateControlOptions, HeatmapLayerSpecification, HillshadeLayerSpecification, IControl, ImageSourceSpecification, LayerSpecification, LightSpecification, LineLayerSpecification, LngLat, LngLatBounds, LngLatBoundsLike, LngLatLike, LogoControlOptions, MapLibreZoomEvent as MapBoxZoomEvent, MapLibreEvent as MapEvent, MapGeoJSONFeature, MapLayerMouseEvent, MapLayerTouchEvent, MapOptions, MapSourceDataEvent, MapStyleDataEvent, MapTouchEvent, MapWheelEvent, MarkerOptions, NavigationControlOptions, PaddingOptions, Point, PointLike, PopupOptions, ProjectionSpecification, RasterDEMSourceSpecification, RasterLayerSpecification, RasterSourceSpecification, ScaleControlOptions, SkySpecification, SourceSpecification, StyleSpecification, SymbolLayerSpecification, TerrainSpecification, VectorSourceSpecification, VideoSourceSpecification } from 'maplibre-gl';
+import { PaddingOptions, MapOptions, Map as Map$1, MarkerOptions, Marker as Marker$1, PopupOptions, Popup as Popup$1, AttributionControlOptions, AttributionControl as AttributionControl$1, FullscreenControlOptions, FullscreenControl as FullscreenControl$1, GeolocateControlOptions, GeolocateControl as GeolocateControl$1, NavigationControlOptions, NavigationControl as NavigationControl$1, ScaleControlOptions, ScaleControl as ScaleControl$1, TerrainSpecification, TerrainControl as TerrainControl$1, LogoControlOptions, LogoControl as LogoControl$1, MapLayerMouseEvent, MapLayerTouchEvent, MapWheelEvent, MapLibreZoomEvent, MapLibreEvent, MapStyleDataEvent, MapSourceDataEvent, MapMouseEvent as MapMouseEvent$1, Point, LngLat, MapGeoJSONFeature, LngLatBoundsLike, PointLike, StyleSpecification, ProjectionSpecification, LightSpecification, SkySpecification, ControlPosition, SourceSpecification, Source as Source$1, LayerSpecification, CustomLayerInterface, IControl } from 'maplibre-gl';
+export { AttributionControlOptions, BackgroundLayerSpecification, CanvasSourceSpecification, CircleLayerSpecification, ControlPosition, CustomLayerInterface, FillExtrusionLayerSpecification, FillLayerSpecification, FullscreenControlOptions, GeoJSONSourceSpecification, GeolocateControlOptions, HeatmapLayerSpecification, HillshadeLayerSpecification, IControl, ImageSourceSpecification, LayerSpecification, LightSpecification, LineLayerSpecification, LngLat, LngLatBounds, LngLatBoundsLike, LngLatLike, LogoControlOptions, MapLibreZoomEvent as MapBoxZoomEvent, MapLibreEvent as MapEvent, MapGeoJSONFeature, MapLayerMouseEvent, MapLayerTouchEvent, MapMouseEvent as MapMouseEventBase, MapOptions, MapSourceDataEvent, MapStyleDataEvent, MapTouchEvent, MapWheelEvent, MarkerOptions, NavigationControlOptions, PaddingOptions, Point, PointLike, PopupOptions, ProjectionSpecification, RasterDEMSourceSpecification, RasterLayerSpecification, RasterSourceSpecification, ScaleControlOptions, SkySpecification, SourceSpecification, StyleSpecification, SymbolLayerSpecification, TerrainSpecification, VectorSourceSpecification, VideoSourceSpecification } from 'maplibre-gl';
 
 /** Describes the camera's state */
 type ViewState = {
@@ -22,6 +22,16 @@ interface ImmutableLike<T> {
     toJS: () => T;
 }
 
+/**
+ * A relaxed control interface that accepts both MapLibre IControl implementations
+ * and third-party controls (e.g. @deck.gl/mapbox MapboxOverlay) that may use
+ * different Map type definitions.
+ */
+interface MapControl {
+    onAdd?(map: unknown): unknown;
+    onRemove?(map: unknown): unknown;
+    getDefaultPosition?(): string;
+}
 /**
  * A user-facing type that represents the minimal intersection between Mapbox and Maplibre
  * User provided `mapLib` is supposed to implement this interface
@@ -67,7 +77,7 @@ interface MapEvent<SourceT, OriginalEventT = undefined> {
     originalEvent: OriginalEventT;
 }
 type ErrorEvent = MapEvent<Map$1> & {
-    type: "error";
+    type: 'error';
     error: Error;
 };
 type MapMouseEvent = MapMouseEvent$1 & {
@@ -76,10 +86,10 @@ type MapMouseEvent = MapMouseEvent$1 & {
     features?: MapGeoJSONFeature[];
 };
 type ViewStateChangeEvent = (MapEvent<Map$1, MouseEvent | TouchEvent | WheelEvent | undefined> & {
-    type: "movestart" | "move" | "moveend" | "zoomstart" | "zoom" | "zoomend";
+    type: 'movestart' | 'move' | 'moveend' | 'zoomstart' | 'zoom' | 'zoomend';
     viewState: ViewState;
 }) | (MapEvent<Map$1, MouseEvent | TouchEvent | undefined> & {
-    type: "rotatestart" | "rotate" | "rotateend" | "dragstart" | "drag" | "dragend" | "pitchstart" | "pitch" | "pitchend";
+    type: 'rotatestart' | 'rotate' | 'rotateend' | 'dragstart' | 'drag' | 'dragend' | 'pitchstart' | 'pitch' | 'pitchend';
     viewState: ViewState;
 });
 type MapCallbacks = {
@@ -127,12 +137,12 @@ type MapCallbacks = {
     onSourceData?: (e: MapSourceDataEvent) => void;
 };
 type PopupEvent = {
-    type: "open" | "close";
+    type: 'open' | 'close';
     target: Popup$1;
 };
 type MarkerEvent<OriginalEventT = undefined> = MapEvent<Marker$1, OriginalEventT>;
 type MarkerDragEvent = MarkerEvent & {
-    type: "dragstart" | "drag" | "dragend";
+    type: 'dragstart' | 'drag' | 'dragend';
     lngLat: LngLat;
 };
 type GeolocateEvent = MapEvent<GeolocateControl$1>;
@@ -168,7 +178,7 @@ type MaplibreProps = Partial<ViewState> & MapCallbacks & {
     /** The projection property of the style. Must conform to the Projection Style Specification.
      * @default 'mercator'
      */
-    projection?: ProjectionSpecification | "mercator" | "globe";
+    projection?: ProjectionSpecification | 'mercator' | 'globe';
     /** Light properties of the map. */
     light?: LightSpecification;
     /** Terrain property of the style. Must conform to the Terrain Style Specification.
@@ -212,7 +222,7 @@ type MapContextValue = {
     mapLib: MapLib;
     map: MapRef;
 };
-type MapInitOptions = Omit<MapOptions, "style" | "container" | "bounds" | "fitBoundsOptions" | "center">;
+type MapInitOptions = Omit<MapOptions, 'style' | 'container' | 'bounds' | 'fitBoundsOptions' | 'center'>;
 type MapProps = MapInitOptions & MaplibreProps & GlobalSettings & {
     mapLib?: MapLib | Promise<MapLib>;
     reuseMaps?: boolean;
@@ -220,13 +230,9 @@ type MapProps = MapInitOptions & MaplibreProps & GlobalSettings & {
     id?: string;
     /** Map container CSS style */
     style?: CSSProperties;
-    children?: React.ReactNode;
-    /** Show Barikoi logo (default: true) */
-    showBarikoiLogo?: boolean;
-    /** Show Attribution (default: true) */
-    showAttribution?: boolean;
-} & React.RefAttributes<MapRef>;
-declare const Map: React.FC<MapProps>;
+    children?: React$1.ReactNode;
+} & React$1.RefAttributes<MapRef>;
+declare const Map: React$1.FC<MapProps>;
 
 type MarkerProps = MarkerOptions & {
     /** Longitude of the anchor location */
@@ -235,14 +241,14 @@ type MarkerProps = MarkerOptions & {
     latitude: number;
     popup?: Popup$1;
     /** CSS style override, applied to the control's container */
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
     onClick?: (e: MarkerEvent<MouseEvent>) => void;
     onDragStart?: (e: MarkerDragEvent) => void;
     onDrag?: (e: MarkerDragEvent) => void;
     onDragEnd?: (e: MarkerDragEvent) => void;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
 };
-declare const Marker: React.FC<MarkerProps>;
+declare const Marker: React$1.FC<MarkerProps>;
 
 type PopupProps = PopupOptions & {
     /** Longitude of the anchor location */
@@ -250,37 +256,37 @@ type PopupProps = PopupOptions & {
     /** Latitude of the anchor location */
     latitude: number;
     /** CSS style override, applied to the control's container */
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
     onOpen?: (e: PopupEvent) => void;
     onClose?: (e: PopupEvent) => void;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
 };
-declare const Popup: React.FC<PopupProps>;
+declare const Popup: React$1.FC<PopupProps>;
 
 type AttributionControlProps = AttributionControlOptions & {
     /** Placement of the control relative to the map. */
     position?: ControlPosition;
     /** CSS style override, applied to the control's container */
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
 };
-declare const AttributionControl: React.FC<AttributionControlProps>;
+declare const AttributionControl: React$1.FC<AttributionControlProps>;
 
-type FullscreenControlProps = Omit<FullscreenControlOptions, "container"> & {
+type FullscreenControlProps = Omit<FullscreenControlOptions, 'container'> & {
     /** Id of the DOM element which should be made full screen. By default, the map container
      * element will be made full screen. */
     containerId?: string;
     /** Placement of the control relative to the map. */
     position?: ControlPosition;
     /** CSS style override, applied to the control's container */
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
 };
-declare const FullscreenControl: React.FC<FullscreenControlProps>;
+declare const FullscreenControl: React$1.FC<FullscreenControlProps>;
 
 type GeolocateControlProps = GeolocateControlOptions & {
     /** Placement of the control relative to the map. */
     position?: ControlPosition;
     /** CSS style override, applied to the control's container */
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
     /** Called on each Geolocation API position update that returned as success. */
     onGeolocate?: (e: GeolocateResultEvent) => void;
     /** Called on each Geolocation API position update that returned as an error. */
@@ -293,15 +299,15 @@ type GeolocateControlProps = GeolocateControlOptions & {
     /** Called when the GeolocateControl changes to the background state. */
     onTrackUserLocationEnd?: (e: GeolocateEvent) => void;
 };
-declare const GeolocateControl: React.FC<GeolocateControlProps>;
+declare const GeolocateControl: React$1.FC<GeolocateControlProps>;
 
 type NavigationControlProps = NavigationControlOptions & {
     /** Placement of the control relative to the map. */
     position?: ControlPosition;
     /** CSS style override, applied to the control's container */
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
 };
-declare const NavigationControl: React.FC<NavigationControlProps>;
+declare const NavigationControl: React$1.FC<NavigationControlProps>;
 
 type ScaleControlProps = ScaleControlOptions & {
     unit?: string;
@@ -309,57 +315,307 @@ type ScaleControlProps = ScaleControlOptions & {
     /** Placement of the control relative to the map. */
     position?: ControlPosition;
     /** CSS style override, applied to the control's container */
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
 };
-declare const ScaleControl: React.FC<ScaleControlProps>;
+declare const ScaleControl: React$1.FC<ScaleControlProps>;
 
 type TerrainControlProps = TerrainSpecification & {
     /** Placement of the control relative to the map. */
     position?: ControlPosition;
     /** CSS style override, applied to the control's container */
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
 };
-declare const TerrainControl: React.FC<TerrainControlProps>;
+declare const TerrainControl: React$1.FC<TerrainControlProps>;
 
 type LogoControlProps = LogoControlOptions & {
     /** Placement of the control relative to the map. */
     position?: ControlPosition;
     /** CSS style override, applied to the control's container */
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
 };
-declare const LogoControl: React.FC<LogoControlProps>;
+declare const LogoControl: React$1.FC<LogoControlProps>;
 
+/**
+ * @fileoverview Source component for adding data sources to a MapLibre GL map.
+ *
+ * Sources define the data that layers can render. This component supports all
+ * MapLibre GL source types including GeoJSON, vector tiles, raster tiles. image. and video.
+ *
+ * @module components/source
+ * @see {@link https://maplibre.org/maplibre-gl-js/docs/sources/}
+ */
+
+/**
+ * Props for the Source component.
+ *
+ * @typedef {Object} SourceProps
+ * @property {string} [id] - Unique identifier for the source. If not provided. one will be generated automatically.
+ * @property {React.ReactNode} [children] - Child Layer components that will use this source.
+ * @extends {SourceSpecification}
+ *
+ * @example
+ * ```tsx
+ * // GeoJSON source with a layer
+ * <Source id="my-data" type="geojson" data={geojsonData}>
+ *   <Layer id="points-layer" type="circle" paint={{ 'circle-radius': 8 }} />
+ * </Source>
+ *
+ * // Vector tile source
+ * <Source id="streets" type="vector" url="mapbox://streets-v11" />
+ *
+ * // Raster source
+ * <Source id="satellite" type="raster" tiles={['https://example.com/tiles/{z}/{x}/{y}.png']} tileSize={256} />
+ * ```
+ */
 type SourceProps = SourceSpecification & {
+    /** Unique identifier for the source. If not provided. one will be generated automatically. */
     id?: string;
+    /** Child Layer components that will use this source. */
     children?: any;
 };
-declare function Source(props: SourceProps): any;
+declare const Source: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<SourceProps & React$1.RefAttributes<Source$1>>>;
+
+/**
+ * @fileoverview CanvasSource component for adding canvas-based data sources to a MapLibre GL map.
+ *
+ * Canvas sources allow rendering custom HTML canvas elements as map layers.
+ * This is useful for dynamic, animated, or custom-rendered data overlays.
+ *
+ * @module components/canvas-source
+ * @see {@link https://maplibre.org/maplibre-gl-js/docs/sources/}
+ */
+
+/**
+ * Coordinates for the canvas corners [top-left, top-right, bottom-right, bottom-left]
+ */
+type CanvasCoordinates = [
+    [
+        number,
+        number
+    ],
+    [
+        number,
+        number
+    ],
+    [
+        number,
+        number
+    ],
+    [
+        number,
+        number
+    ]
+];
+/**
+ * Props for the CanvasSource component.
+ *
+ * @typedef {Object} CanvasSourceProps
+ * @property {string} [id] - Unique identifier for the source.
+ * @property {CanvasCoordinates} coordinates - Corner coordinates of the canvas.
+ * @property {HTMLCanvasElement} canvas - The canvas element to render.
+ * @property {boolean} [animate] - Whether to animate the canvas (re-render on each frame).
+ * @property {number} [width] - Width of the canvas context.
+ * @property {number} [height] - Height of the canvas context.
+ * @property {React.ReactNode} [children] - Child Layer components.
+ *
+ * @example
+ * ```tsx
+ * // Canvas source with dynamic content
+ * const canvasRef = useRef<HTMLCanvasElement>(null);
+ * const [canvasEl, setCanvasEl] = useState<HTMLCanvasElement | null>(null);
+ *
+ * useEffect(() => {
+ *   const canvas = canvasRef.current;
+ *   if (!canvas) return;
+ *   const ctx = canvas.getContext('2d');
+ *   if (ctx) {
+ *     ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+ *     ctx.fillRect(0, 0, 100, 100);
+ *   }
+ *   setCanvasEl(canvas);
+ * }, []);
+ *
+ * {canvasEl && (
+ *   <CanvasSource
+ *     id="canvas-source"
+ *     coordinates={[
+ *       [90.39, 23.83], // top-left
+ *       [90.41, 23.83], // top-right
+ *       [90.41, 23.81], // bottom-right
+ *       [90.39, 23.81]  // bottom-left
+ *     ]}
+ *     canvas={canvasEl}
+ *   >
+ *     <Layer type="raster" paint={{ 'raster-opacity': 0.8 }} />
+ *   </CanvasSource>
+ * )}
+ * ```
+ */
+type CanvasSourceProps = {
+    /** Unique identifier for the source */
+    id?: string;
+    /** Corner coordinates of the canvas [top-left, top-right, bottom-right, bottom-left] */
+    coordinates: CanvasCoordinates;
+    /** The canvas element to render */
+    canvas: HTMLCanvasElement;
+    /** Whether to animate the canvas (re-render on each frame) */
+    animate?: boolean;
+    /** Width of the canvas context */
+    width?: number;
+    /** Height of the canvas context */
+    height?: number;
+    /** Child Layer components */
+    children?: React$1.ReactNode;
+};
+declare const CanvasSource: React$1.NamedExoticComponent<CanvasSourceProps>;
 
+/**
+ * Utility type to make id optional in layer specification.
+ * @private
+ */
 type OptionalId<T> = T extends {
     id: string;
-} ? Omit<T, "id"> & {
+} ? Omit<T, 'id'> & {
     id?: string;
 } : T;
+/**
+ * Utility type to make source optional in layer specification.
+ * @private
+ */
 type OptionalSource<T> = T extends {
     source: string;
-} ? Omit<T, "source"> & {
+} ? Omit<T, 'source'> & {
     source?: string;
 } : T;
+/**
+ * Props for the Layer component.
+ *
+ * @typedef {Object} LayerProps
+ * @property {string} [id] - Unique identifier for the layer. If not provided, one will be generated automatically.
+ * @property {string} [source] - The source ID this layer should use (inherited from parent Source component).
+ * @property {string} [beforeId] - If set, the layer will be inserted before the specified layer.
+ * @property {function} [onClick] - Called when the layer is clicked.
+ * @property {function} [onMouseEnter] - Called when the mouse enters the layer.
+ * @property {function} [onMouseLeave] - Called when the mouse leaves the layer.
+ * @property {function} [onMouseMove] - Called when the mouse moves over the layer.
+ * @property {function} [onMouseDown] - Called when mouse button is pressed on the layer.
+ * @property {function} [onMouseUp] - Called when mouse button is released on the layer.
+ * @property {function} [onContextMenu] - Called on right-click context menu.
+ * @property {function} [onDoubleClick] - Called on double click.
+ * @extends {LayerSpecification | CustomLayerInterface}
+ *
+ * @example
+ * ```tsx
+ * // Circle layer with paint properties
+ * <Layer
+ *   id="points-layer"
+ *   type="circle"
+ *   paint={{
+ *     'circle-radius': 8,
+ *     'circle-color': '#007cbf'
+ *   }}
+ * />
+ *
+ * // Line layer with filter
+ * <Layer
+ *   id="roads-layer"
+ *   type="line"
+ *   source="streets"
+ *   source-layer="road"
+ *   filter={['==', ['get', 'type'], 'primary']}
+ *   paint={{ 'line-width': 2 }}
+ * />
+ *
+ * // Interactive layer with events
+ * <Layer
+ *   id="interactive-layer"
+ *   type="fill"
+ *   paint={{ 'fill-color': '#088' }}
+ *   onClick={(e) => console.log('Clicked:', e.features)}
+ *   onMouseEnter={(e) => console.log('Hover:', e.features)}
+ *   onMouseLeave={() => console.log('Left layer')}
+ * />
+ *
+ * // Custom layer
+ * <Layer
+ *   type="custom"
+ *   renderingMode="2d"
+ *   onAdd={(map) => { ... }}
+ *   render={(gl, matrix) => { ... }}
+ * />
+ * ```
+ */
 type LayerProps = (OptionalSource<OptionalId<LayerSpecification>> | CustomLayerInterface) & {
     /** If set, the layer will be inserted before the specified layer */
     beforeId?: string;
+    /** Called when the layer is clicked */
+    onClick?: (e: MapLayerMouseEvent) => void;
+    /** Called when the mouse enters the layer */
+    onMouseEnter?: (e: MapLayerMouseEvent) => void;
+    /** Called when the mouse leaves the layer */
+    onMouseLeave?: () => void;
+    /** Called when the mouse moves over the layer */
+    onMouseMove?: (e: MapLayerMouseEvent) => void;
+    /** Called when mouse button is pressed on the layer */
+    onMouseDown?: (e: MapLayerMouseEvent) => void;
+    /** Called when mouse button is released on the layer */
+    onMouseUp?: (e: MapLayerMouseEvent) => void;
+    /** Called on right-click context menu */
+    onContextMenu?: (e: MapLayerMouseEvent) => void;
+    /** Called on double click */
+    onDoubleClick?: (e: MapLayerMouseEvent) => void;
 };
-declare function Layer(props: LayerProps): any;
+/**
+ * Layer component for adding visual layers to a MapLibre GL map.
+ *
+ * Layers define how data from sources is rendered on the map. Supports all
+ * MapLibre GL layer types including fill, line, circle, symbol, raster,
+ * hillshade, heatmap, and custom layers.
+ *
+ * Must be a child of a Source component (for data layers) or used standalone
+ * with a source prop for pre-existing sources.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Circle layer with paint properties
+ * <Layer
+ *   id="points-layer"
+ *   type="circle"
+ *   paint={{
+ *     'circle-radius': 8,
+ *     'circle-color': '#007cbf'
+ *   }}
+ * />
+ *
+ * // Line layer with filter
+ * <Layer
+ *   id="roads-layer"
+ *   type="line"
+ *   source="streets"
+ *   source-layer="road"
+ *   filter={['==', ['get', 'type'], 'primary']}
+ *   paint={{ 'line-width': 2 }}
+ * />
+ *
+ * // Inside a Source component
+ * <Source id="geojson" type="geojson" data={data}>
+ *   <Layer type="circle" paint={{ 'circle-radius': 6 }} />
+ * </Source>
+ * ```
+ */
+declare function _Layer(props: LayerProps): any;
+declare const Layer: React$1.MemoExoticComponent<typeof _Layer>;
 
 type ControlOptions = {
     position?: ControlPosition;
 };
-declare function useControl<T extends IControl>(onCreate: (context: MapContextValue) => T, opts?: ControlOptions): T;
-declare function useControl<T extends IControl>(onCreate: (context: MapContextValue) => T, onRemove: (context: MapContextValue) => void, opts?: ControlOptions): T;
-declare function useControl<T extends IControl>(onCreate: (context: MapContextValue) => T, onAdd: (context: MapContextValue) => void, onRemove: (context: MapContextValue) => void, opts?: ControlOptions): T;
+declare function useControl<T extends MapControl>(onCreate: (context: MapContextValue) => T, opts?: ControlOptions): T;
+declare function useControl<T extends MapControl>(onCreate: (context: MapContextValue) => T, onRemove: (context: MapContextValue) => void, opts?: ControlOptions): T;
+declare function useControl<T extends MapControl>(onCreate: (context: MapContextValue) => T, onAdd: (context: MapContextValue) => void, onRemove: (context: MapContextValue) => void, opts?: ControlOptions): T;
 
-declare const MapProvider: React.FC<{
-    children?: React.ReactNode;
+declare const MapProvider: React$1.FC<{
+    children?: React$1.ReactNode;
 }>;
 type MapCollection = {
     [id: string]: MapRef | undefined;
@@ -367,4 +623,248 @@ type MapCollection = {
 };
 declare function useMap(): MapCollection;
 
-export { AttributionControl, type AttributionControlProps, type ErrorEvent, FullscreenControl, type FullscreenControlProps, GeolocateControl, type GeolocateControlProps, type GeolocateErrorEvent, type GeolocateEvent, type GeolocateResultEvent, type ImmutableLike, Layer, type LayerProps, LogoControl, type LogoControlProps, Map, type MapCallbacks, type MapLib, type MapMouseEvent, type MapProps, MapProvider, type MapRef, Marker, type MarkerDragEvent, type MarkerEvent, type MarkerProps, NavigationControl, type NavigationControlProps, Popup, type PopupEvent, type PopupProps, ScaleControl, type ScaleControlProps, Source, type SourceProps, TerrainControl, type TerrainControlProps, type ViewState, type ViewStateChangeEvent, Map as default, useControl, useMap };
+/**
+ * Draw event types
+ */
+interface DrawEvent {
+    type: string;
+    features?: GeoJSON.Feature<GeoJSON.Geometry>[];
+    featureIds?: string[];
+    mode?: string;
+    originalEvent?: unknown;
+}
+/**
+ * Draw control options - extends maplibre-gl-draw options
+ */
+interface DrawControlOptions {
+    /** Whether controls are displayed by default */
+    displayControlsDefault?: boolean;
+    /** Control configuration */
+    controls?: {
+        point?: boolean;
+        line_string?: boolean;
+        polygon?: boolean;
+        trash?: boolean;
+        combine_features?: boolean;
+        uncombine_features?: boolean;
+    };
+    /** Custom styles for draw layers */
+    styles?: unknown[];
+    /** Available modes */
+    modes?: Record<string, unknown>;
+    /** Default mode */
+    defaultMode?: string;
+}
+type DrawControlProps = DrawControlOptions & {
+    /** Placement of the control relative to the map. */
+    position?: ControlPosition;
+    /** CSS style override, applied to the control's container */
+    style?: React$1.CSSProperties;
+    /** Callback fired when a feature is created */
+    onDrawCreate?: (e: DrawEvent) => void;
+    /** Callback fired when a feature is deleted */
+    onDrawDelete?: (e: DrawEvent) => void;
+    /** Callback fired when a feature is updated */
+    onDrawUpdate?: (e: DrawEvent) => void;
+    /** Callback fired when the selection changes */
+    onDrawSelectionChange?: (e: DrawEvent) => void;
+    /** Callback fired when the draw mode changes */
+    onDrawModeChange?: (e: DrawEvent) => void;
+    /** Callback fired when features are combined */
+    onDrawCombine?: (e: DrawEvent) => void;
+    /** Callback fired when features are uncombined */
+    onDrawUncombine?: (e: DrawEvent) => void;
+    /** Callback fired when rendering */
+    onDrawRender?: (e: DrawEvent) => void;
+};
+declare function _DrawControl(props: DrawControlProps): any;
+declare const DrawControl: React$1.MemoExoticComponent<typeof _DrawControl>;
+
+/**
+ * Options for the GlobeControl
+ */
+interface GlobeControlOptions {
+    /** Custom button element */
+    buttonElement?: HTMLElement;
+    /** Custom button class name */
+    buttonClassName?: string;
+    /** Button title/tooltip text */
+    buttonTitle?: string;
+    /** Custom CSS for the button */
+    buttonStyle?: React.CSSProperties;
+}
+type GlobeControlProps = GlobeControlOptions & {
+    /** Position of the control on the map */
+    position?: ControlPosition;
+    /** Called when projection changes */
+    onProjectionChange?: (isGlobe: boolean) => void;
+};
+/**
+ * GlobeControl component for toggling between 3D globe and 2D map views.
+ *
+ * This control works with MapLibre GL 3.x+ which supports globe projection.
+ * Adds a button to the map that toggles between mercator (flat) and globe (3D) projections.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Map, GlobeControl } from 'react-bkoi-gl';
+ * import "react-bkoi-gl/styles";
+ *
+ * function GlobeExample() {
+ *   const handleProjectionChange = (isGlobe) => {
+ *     console.log('Globe view:', isGlobe);
+ *   };
+ *
+ *   return (
+ *     <Map
+ *       mapStyle={`https://map.barikoi.com/styles/osm-liberty/style.json?key=${API_KEY}`}
+ *       initialViewState={{
+ *         longitude: 90.3938,
+ *         latitude: 23.8216,
+ *         zoom: 12
+ *       }}
+ *     >
+ *       <GlobeControl
+ *         position="top-right"
+ *         onProjectionChange={handleProjectionChange}
+ *       />
+ *     </Map>
+ *   );
+ * }
+ * ```
+ */
+declare function _GlobeControl(props: GlobeControlProps): any;
+declare const GlobeControl: React$1.MemoExoticComponent<typeof _GlobeControl>;
+
+type MapLibreMap = Map$1;
+/**
+ * Map interaction types that can be disabled/enabled
+ */
+type MapInteractions = 'dragPan' | 'scrollZoom' | 'boxZoom' | 'dragRotate' | 'keyboard' | 'doubleClickZoom' | 'touchZoomRotate';
+/**
+ * Configuration for minimap interactions
+ */
+type MinimapInteractions = Record<MapInteractions, boolean>;
+/**
+ * Configuration for the parent rectangle overlay
+ */
+interface ParentRectConfig {
+    /** Layout properties for the line layer */
+    lineLayout?: Record<string, unknown>;
+    /** Paint properties for the line layer */
+    linePaint?: Record<string, unknown>;
+    /** Paint properties for the fill layer */
+    fillPaint?: Record<string, unknown>;
+}
+/**
+ * Configuration for the toggle button
+ */
+interface ToggleButtonConfig {
+    /** Custom SVG icon */
+    icon?: string;
+    /** Custom CSS class */
+    className?: string;
+    /** Custom inline styles */
+    style?: Record<string, string>;
+    /** Background color of the icon */
+    iconBackgroundColor?: string;
+    /** Hover color */
+    hoverColor?: string;
+    /** Enable rotation based on position */
+    enableRotation?: boolean;
+    /** Custom rotation angle */
+    rotationAngle?: number;
+}
+/**
+ * Minimap control options
+ */
+interface MinimapControlOptions {
+    /** Initial center coordinates */
+    center?: [number, number];
+    /** Barikoi API access token */
+    accessToken?: string;
+    /** Map style for the minimap */
+    style?: string | StyleSpecification;
+    /** Zoom level difference from parent */
+    zoomAdjust?: number;
+    /** Lock to specific zoom level */
+    lockZoom?: number;
+    /** Sync pitch with parent */
+    pitchAdjust?: boolean;
+    /** Custom container styles */
+    containerStyle?: Record<string, string>;
+    /** Position on map */
+    position?: ControlPosition;
+    /** Parent rectangle configuration */
+    parentRect?: ParentRectConfig;
+    /** Whether minimap can be toggled */
+    toggleable?: boolean;
+    /** Toggle button configuration */
+    toggleButton?: ToggleButtonConfig;
+    /** Start minimized */
+    initialMinimized?: boolean;
+    /** Width when minimized */
+    collapsedWidth?: string;
+    /** Height when minimized */
+    collapsedHeight?: string;
+    /** Border radius */
+    borderRadius?: string;
+    /** Interaction configuration */
+    interactions?: Partial<MinimapInteractions>;
+    /** Toggle callback */
+    onToggle?: (isMinimized: boolean) => void;
+    /** Hide tooltip text */
+    hideText?: string;
+    /** Show tooltip text */
+    showText?: string;
+    /** Enable responsive sizing */
+    responsive?: boolean;
+    /** Responsive width */
+    responsiveWidth?: string;
+    /** Responsive height */
+    responsiveHeight?: string;
+    /** Minimum width */
+    minWidth?: string;
+    /** Minimum height */
+    minHeight?: string;
+    /** Maximum width */
+    maxWidth?: string;
+    /** Maximum height */
+    maxHeight?: string;
+}
+type MinimapControlProps = MinimapControlOptions;
+/**
+ * Minimap class - wraps MapLibre Map as a control
+ */
+declare class Minimap implements IControl {
+    private options;
+    private map;
+    private parentMap;
+    private container;
+    private readonly id;
+    private parentRect?;
+    private differentStyle;
+    private desync?;
+    private toggleButtonCleanup?;
+    private isMinimized;
+    private resizeHandler?;
+    constructor(options?: MinimapControlOptions);
+    onAdd(parentMap: MapLibreMap): HTMLElement;
+    onRemove(): void;
+    private createContainer;
+    private getContainerStyles;
+    private validateContainerStyle;
+    private configureInteractions;
+    private setupToggleButton;
+    private setupResponsiveSizing;
+    toggle(): void;
+    isMinimizedState(): boolean;
+    private addParentRect;
+    private setParentBounds;
+    private syncMaps;
+}
+declare function _MinimapControl(props: MinimapControlProps): any;
+declare const MinimapControl: React$1.MemoExoticComponent<typeof _MinimapControl>;
+
+export { AttributionControl, type AttributionControlProps, type CanvasCoordinates, CanvasSource, type CanvasSourceProps, DrawControl, type DrawControlOptions, type DrawControlProps, type ErrorEvent, FullscreenControl, type FullscreenControlProps, GeolocateControl, type GeolocateControlProps, type GeolocateErrorEvent, type GeolocateEvent, type GeolocateResultEvent, GlobeControl, type GlobeControlOptions, type GlobeControlProps, type ImmutableLike, Layer, type LayerProps, LogoControl, type LogoControlProps, Map, type MapCallbacks, type MapControl, type MapInteractions, type MapLib, type MapMouseEvent, type MapProps, MapProvider, type MapRef, Marker, type MarkerDragEvent, type MarkerEvent, type MarkerProps, Minimap, MinimapControl, type MinimapControlOptions, type MinimapControlProps, type MinimapInteractions, NavigationControl, type NavigationControlProps, type ParentRectConfig, Popup, type PopupEvent, type PopupProps, ScaleControl, type ScaleControlProps, Source, type SourceProps, TerrainControl, type TerrainControlProps, type ToggleButtonConfig, type ViewState, type ViewStateChangeEvent, Map as default, useControl, useMap };