react-bkoi-gl 2.0.0 → 2.1.0

package/dist/index.d.ts

@@ -1,2 +1,870 @@
-export * from "./exports-maplibre-gl.js";
-export { default as default } from "./exports-maplibre-gl.js";
+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, 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 = {
+    /** Longitude at map center */
+    longitude: number;
+    /** Latitude at map center */
+    latitude: number;
+    /** Map zoom level */
+    zoom: number;
+    /** Map rotation bearing in degrees counter-clockwise from north */
+    bearing: number;
+    /** Map angle in degrees at which the camera is looking at the ground */
+    pitch: number;
+    /** Dimensions in pixels applied on each side of the viewport for shifting the vanishing point. */
+    padding: PaddingOptions;
+};
+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
+ * Only losely typed for compatibility
+ */
+interface MapLib {
+    supported?: (options: unknown) => boolean;
+    Map: {
+        new (options: MapOptions): Map$1;
+    };
+    Marker: {
+        new (options: MarkerOptions): Marker$1;
+    };
+    Popup: {
+        new (options: PopupOptions): Popup$1;
+    };
+    AttributionControl: {
+        new (options: AttributionControlOptions): AttributionControl$1;
+    };
+    FullscreenControl: {
+        new (options: FullscreenControlOptions): FullscreenControl$1;
+    };
+    GeolocateControl: {
+        new (options: GeolocateControlOptions): GeolocateControl$1;
+    };
+    NavigationControl: {
+        new (options: NavigationControlOptions): NavigationControl$1;
+    };
+    ScaleControl: {
+        new (options: ScaleControlOptions): ScaleControl$1;
+    };
+    TerrainControl: {
+        new (options: TerrainSpecification): TerrainControl$1;
+    };
+    LogoControl: {
+        new (options: LogoControlOptions): LogoControl$1;
+    };
+}
+
+interface MapEvent<SourceT, OriginalEventT = undefined> {
+    type: string;
+    target: SourceT;
+    originalEvent: OriginalEventT;
+}
+type ErrorEvent = MapEvent<Map$1> & {
+    type: 'error';
+    error: Error;
+};
+type MapMouseEvent = MapMouseEvent$1 & {
+    point: Point;
+    lngLat: LngLat;
+    features?: MapGeoJSONFeature[];
+};
+type ViewStateChangeEvent = (MapEvent<Map$1, MouseEvent | TouchEvent | WheelEvent | undefined> & {
+    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';
+    viewState: ViewState;
+});
+type MapCallbacks = {
+    onMouseDown?: (e: MapLayerMouseEvent) => void;
+    onMouseUp?: (e: MapLayerMouseEvent) => void;
+    onMouseOver?: (e: MapLayerMouseEvent) => void;
+    onMouseMove?: (e: MapLayerMouseEvent) => void;
+    onClick?: (e: MapLayerMouseEvent) => void;
+    onDblClick?: (e: MapLayerMouseEvent) => void;
+    onMouseEnter?: (e: MapLayerMouseEvent) => void;
+    onMouseLeave?: (e: MapLayerMouseEvent) => void;
+    onMouseOut?: (e: MapLayerMouseEvent) => void;
+    onContextMenu?: (e: MapLayerMouseEvent) => void;
+    onTouchStart?: (e: MapLayerTouchEvent) => void;
+    onTouchEnd?: (e: MapLayerTouchEvent) => void;
+    onTouchMove?: (e: MapLayerTouchEvent) => void;
+    onTouchCancel?: (e: MapLayerTouchEvent) => void;
+    onMoveStart?: (e: ViewStateChangeEvent) => void;
+    onMove?: (e: ViewStateChangeEvent) => void;
+    onMoveEnd?: (e: ViewStateChangeEvent) => void;
+    onDragStart?: (e: ViewStateChangeEvent) => void;
+    onDrag?: (e: ViewStateChangeEvent) => void;
+    onDragEnd?: (e: ViewStateChangeEvent) => void;
+    onZoomStart?: (e: ViewStateChangeEvent) => void;
+    onZoom?: (e: ViewStateChangeEvent) => void;
+    onZoomEnd?: (e: ViewStateChangeEvent) => void;
+    onRotateStart?: (e: ViewStateChangeEvent) => void;
+    onRotate?: (e: ViewStateChangeEvent) => void;
+    onRotateEnd?: (e: ViewStateChangeEvent) => void;
+    onPitchStart?: (e: ViewStateChangeEvent) => void;
+    onPitch?: (e: ViewStateChangeEvent) => void;
+    onPitchEnd?: (e: ViewStateChangeEvent) => void;
+    onWheel?: (e: MapWheelEvent) => void;
+    onBoxZoomStart?: (e: MapLibreZoomEvent) => void;
+    onBoxZoomEnd?: (e: MapLibreZoomEvent) => void;
+    onBoxZoomCancel?: (e: MapLibreZoomEvent) => void;
+    onResize?: (e: MapLibreEvent) => void;
+    onLoad?: (e: MapLibreEvent) => void;
+    onRender?: (e: MapLibreEvent) => void;
+    onIdle?: (e: MapLibreEvent) => void;
+    onError?: (e: ErrorEvent) => void;
+    onRemove?: (e: MapLibreEvent) => void;
+    onData?: (e: MapStyleDataEvent | MapSourceDataEvent) => void;
+    onStyleData?: (e: MapStyleDataEvent) => void;
+    onSourceData?: (e: MapSourceDataEvent) => void;
+};
+type PopupEvent = {
+    type: 'open' | 'close';
+    target: Popup$1;
+};
+type MarkerEvent<OriginalEventT = undefined> = MapEvent<Marker$1, OriginalEventT>;
+type MarkerDragEvent = MarkerEvent & {
+    type: 'dragstart' | 'drag' | 'dragend';
+    lngLat: LngLat;
+};
+type GeolocateEvent = MapEvent<GeolocateControl$1>;
+type GeolocateResultEvent = GeolocateEvent & GeolocationPosition;
+type GeolocateErrorEvent = GeolocateEvent & GeolocationPositionError;
+
+type MaplibreProps = Partial<ViewState> & MapCallbacks & {
+    /** Camera options used when constructing the Map instance */
+    initialViewState?: Partial<ViewState> & {
+        /** The initial bounds of the map. If bounds is specified, it overrides longitude, latitude and zoom options. */
+        bounds?: LngLatBoundsLike;
+        /** A fitBounds options object to use only when setting the bounds option. */
+        fitBoundsOptions?: {
+            offset?: PointLike;
+            minZoom?: number;
+            maxZoom?: number;
+            padding?: number | PaddingOptions;
+        };
+    };
+    /** If provided, render into an external WebGL context */
+    gl?: WebGLRenderingContext;
+    /** For external controller to override the camera state */
+    viewState?: ViewState & {
+        width: number;
+        height: number;
+    };
+    /** Mapbox style */
+    mapStyle?: string | StyleSpecification | ImmutableLike<StyleSpecification>;
+    /** Enable diffing when the map style changes
+     * @default true
+     */
+    styleDiffing?: boolean;
+    /** The projection property of the style. Must conform to the Projection Style Specification.
+     * @default 'mercator'
+     */
+    projection?: ProjectionSpecification | 'mercator' | 'globe';
+    /** Light properties of the map. */
+    light?: LightSpecification;
+    /** Terrain property of the style. Must conform to the Terrain Style Specification.
+     * If `undefined` is provided, removes terrain from the map. */
+    terrain?: TerrainSpecification;
+    /** Sky properties of the map. Must conform to the Sky Style Specification. */
+    sky?: SkySpecification;
+    /** Default layers to query on pointer events */
+    interactiveLayerIds?: string[];
+    /** CSS cursor */
+    cursor?: string;
+};
+
+/** These methods may break the react binding if called directly */
+declare const skipMethods: readonly ["setMaxBounds", "setMinZoom", "setMaxZoom", "setMinPitch", "setMaxPitch", "setRenderWorldCopies", "setProjection", "setStyle", "addSource", "removeSource", "addLayer", "removeLayer", "setLayerZoomRange", "setFilter", "setPaintProperty", "setLayoutProperty", "setLight", "setTerrain", "setFog", "remove"];
+type MapRef = {
+    getMap(): Map$1;
+} & Omit<Map$1, (typeof skipMethods)[number]>;
+
+type GlobalSettings = {
+    /** The maximum number of images (raster tiles, sprites, icons) to load in parallel.
+     * @default 16
+     */
+    maxParallelImageRequests?: number;
+    /** The map's RTL text plugin. Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left.  */
+    RTLTextPlugin?: string | {
+        pluginUrl: string;
+        lazy?: boolean;
+    };
+    /** The number of web workers instantiated on a page with maplibre-gl maps.
+     * @default 2
+     */
+    workerCount?: number;
+    /** Provides an interface for loading maplibre-gl's WebWorker bundle from a self-hosted URL.
+     * This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment
+     * wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior. */
+    workerUrl?: string;
+};
+
+type MapContextValue = {
+    mapLib: MapLib;
+    map: MapRef;
+};
+type MapInitOptions = Omit<MapOptions, 'style' | 'container' | 'bounds' | 'fitBoundsOptions' | 'center'>;
+type MapProps = MapInitOptions & MaplibreProps & GlobalSettings & {
+    mapLib?: MapLib | Promise<MapLib>;
+    reuseMaps?: boolean;
+    /** Map container id */
+    id?: string;
+    /** Map container CSS style */
+    style?: CSSProperties;
+    children?: React$1.ReactNode;
+} & React$1.RefAttributes<MapRef>;
+declare const Map: React$1.FC<MapProps>;
+
+type MarkerProps = MarkerOptions & {
+    /** Longitude of the anchor location */
+    longitude: number;
+    /** Latitude of the anchor location */
+    latitude: number;
+    popup?: Popup$1;
+    /** CSS style override, applied to the control's container */
+    style?: React$1.CSSProperties;
+    onClick?: (e: MarkerEvent<MouseEvent>) => void;
+    onDragStart?: (e: MarkerDragEvent) => void;
+    onDrag?: (e: MarkerDragEvent) => void;
+    onDragEnd?: (e: MarkerDragEvent) => void;
+    children?: React$1.ReactNode;
+};
+declare const Marker: React$1.FC<MarkerProps>;
+
+type PopupProps = PopupOptions & {
+    /** Longitude of the anchor location */
+    longitude: number;
+    /** Latitude of the anchor location */
+    latitude: number;
+    /** CSS style override, applied to the control's container */
+    style?: React$1.CSSProperties;
+    onOpen?: (e: PopupEvent) => void;
+    onClose?: (e: PopupEvent) => void;
+    children?: React$1.ReactNode;
+};
+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$1.CSSProperties;
+};
+declare const AttributionControl: React$1.FC<AttributionControlProps>;
+
+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$1.CSSProperties;
+};
+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$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. */
+    onError?: (e: GeolocateErrorEvent) => void;
+    /** Called on each Geolocation API position update that returned as success but user position
+     * is out of map `maxBounds`. */
+    onOutOfMaxBounds?: (e: GeolocateResultEvent) => void;
+    /** Called when the GeolocateControl changes to the active lock state. */
+    onTrackUserLocationStart?: (e: GeolocateEvent) => void;
+    /** Called when the GeolocateControl changes to the background state. */
+    onTrackUserLocationEnd?: (e: GeolocateEvent) => void;
+};
+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$1.CSSProperties;
+};
+declare const NavigationControl: React$1.FC<NavigationControlProps>;
+
+type ScaleControlProps = ScaleControlOptions & {
+    unit?: string;
+    maxWidth?: number;
+    /** Placement of the control relative to the map. */
+    position?: ControlPosition;
+    /** CSS style override, applied to the control's container */
+    style?: React$1.CSSProperties;
+};
+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$1.CSSProperties;
+};
+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$1.CSSProperties;
+};
+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 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'> & {
+    id?: string;
+} : T;
+/**
+ * Utility type to make source optional in layer specification.
+ * @private
+ */
+type OptionalSource<T> = T extends {
+    source: string;
+} ? 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;
+};
+/**
+ * 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 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$1.FC<{
+    children?: React$1.ReactNode;
+}>;
+type MapCollection = {
+    [id: string]: MapRef | undefined;
+    current?: MapRef;
+};
+declare function useMap(): MapCollection;
+
+/**
+ * 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 };