gistda-sphere-react 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,1081 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+interface Location {
+    lon: number;
+    lat: number;
+}
+interface Point {
+    x: number;
+    y: number;
+}
+interface Range {
+    min: number;
+    max: number;
+}
+interface Bound {
+    minLon: number;
+    minLat: number;
+    maxLon: number;
+    maxLat: number;
+}
+interface Size {
+    width: number;
+    height: number;
+}
+interface Tile {
+    x: number;
+    y: number;
+    z: number;
+}
+interface Icon {
+    url?: string;
+    urlHD?: string;
+    html?: string;
+    offset?: Point;
+    size?: Size;
+}
+type LayerType = "Vector" | "XYZ" | "WMS" | "WMTS" | "WMTS_REST" | "TMS" | "Tiles3D" | "I3S";
+type BuiltInLayer$1 = "SIMPLE" | "STREETS" | "STREETS_NIGHT" | "HYBRID" | "TRAFFIC" | "IMAGES" | "PM25" | "HOTSPOT" | "FLOOD" | "DROUGHT";
+type FilterType = "Dark" | "Light" | "Protanopia" | "Deuteranopia" | "None";
+type LineStyleType = "Solid" | "Dashed" | "Dot";
+type UiComponentMode = "Full" | "Mobile" | "None";
+type RouteMode = "Traffic" | "Cost" | "Distance" | "Fly";
+type RouteType = "Road" | "Ferry" | "Tollway" | "All";
+type RouteLabelType = "Distance" | "Time" | "Hide";
+type TagType = "WFS" | "OGC";
+interface MapOptions {
+    layer?: SphereLayer | string;
+    zoom?: number;
+    zoomRange?: Range;
+    location?: Location;
+    placeholder?: HTMLElement;
+    ui?: UiComponentMode;
+    input?: boolean;
+    lastView?: boolean;
+    language?: string;
+    [key: string]: SphereLayer | string | number | boolean | Range | Location | HTMLElement | UiComponentMode | undefined;
+}
+interface LayerOptions {
+    type?: LayerType;
+    url?: string;
+    zoomRange?: Range;
+    source?: Range;
+    opacity?: number;
+    zIndex?: number;
+    bound?: Bound;
+    attribution?: string;
+    extraQuery?: string;
+    id?: string;
+    format?: string;
+    srs?: string;
+    tileMatrixPrefix?: string;
+    styles?: string;
+    version?: string;
+    refresh?: number;
+    zoomOffset?: number;
+}
+interface MarkerOptions {
+    icon?: Icon;
+    title?: string;
+    detail?: string;
+    popup?: PopupOptions;
+    visibleRange?: Range;
+    clickable?: boolean;
+    draggable?: boolean;
+    zIndex?: number;
+    rotate?: number;
+}
+interface PopupOptions {
+    title?: string;
+    detail?: string;
+    loadDetail?: (element: HTMLElement) => void;
+    html?: string;
+    loadHtml?: (element: HTMLElement) => void;
+    size?: Size;
+    closable?: boolean;
+}
+interface GeometryOptions {
+    title?: string;
+    detail?: string;
+    label?: string;
+    labelOptions?: MarkerOptions;
+    popup?: PopupOptions;
+    visibleRange?: Range;
+    lineWidth?: number;
+    lineColor?: string;
+    fillColor?: string;
+    lineStyle?: LineStyleType;
+    pivot?: Location | (() => Location);
+    clickable?: boolean;
+    draggable?: boolean;
+    pointer?: boolean;
+    zIndex?: number;
+    editable?: boolean;
+}
+interface TagOptions {
+    source?: string;
+    type?: TagType;
+    icon?: Icon | "big" | "small";
+    visibleRange?: Range;
+    label?: Range;
+    area?: string;
+    dataset?: string;
+    name?: string;
+    extraQuery?: string;
+    version?: string;
+}
+interface SearchOptions {
+    area?: string;
+    tag?: string;
+    span?: string;
+    offset?: number;
+    limit?: number;
+    dataset?: string;
+}
+interface SuggestOptions {
+    area?: string;
+    offset?: number;
+    limit?: number;
+    dataset?: string;
+}
+interface AddressOptions {
+    limit?: number;
+    dataset?: string;
+}
+interface NearPoiOptions {
+    span?: number;
+    zoom?: number;
+    limit?: number;
+}
+type EventName = "ready" | "resize" | "repaint" | "zoom" | "zoomRange" | "location" | "fullscreen" | "rotate" | "pitch" | "toolbarChange" | "drawCreate" | "drawDelete" | "tooltipChange" | "beforeContextmenu" | "contextmenu" | "mousemove" | "click" | "doubleClick" | "wheel" | "drag" | "drop" | "idle" | "layerChange" | "tileLoading" | "tileLoaded" | "overlayChange" | "overlayUpdate" | "overlayClick" | "overlayLoad" | "overlayDrag" | "overlayDrop" | "overlayHover" | "overlayLeave" | "popupClose" | "routeError" | "routeComplete" | "error";
+type EventHandler<T = void> = (data: T) => void | undefined | boolean;
+interface SphereEvent {
+    bind<T = unknown>(eventName: EventName, handler: EventHandler<T>): this;
+    unbind<T = unknown>(eventName: EventName, handler: EventHandler<T>): this;
+}
+interface SphereLayer {
+    name(): string;
+    options(): LayerOptions;
+}
+interface SphereLayerCollection {
+    language(value?: string): string | this;
+    setBase(layer: SphereLayer | object | string): this;
+    add(layer: SphereLayer | object, beforeId?: string): this;
+    remove(layer: SphereLayer | object): this;
+    clear(): this;
+    list(): object[];
+    size(): number;
+}
+interface SphereOverlay {
+    location(geojson?: Location | Location[] | object, animate?: boolean): Location | Location[] | this;
+    visibleRange(): Range;
+    active(): boolean;
+    shift(vector: Location): this;
+    distance(overlay: Location | SphereOverlay, language?: string): number | string;
+    intersects(overlay: Location | SphereOverlay): boolean;
+    contains(overlay: Location | SphereOverlay): boolean;
+    within(overlay: Location | SphereOverlay): boolean;
+    toJSON(key?: string): object;
+}
+interface SphereMarker extends SphereOverlay {
+    popup(): SpherePopup;
+    element(): HTMLElement;
+    pop(mode?: boolean): this;
+    update(newOptions: MarkerOptions): this;
+}
+interface SpherePopup extends SphereOverlay {
+    element(): HTMLElement;
+    title(value?: string): HTMLElement | this;
+    detail(value?: string): HTMLElement | this;
+}
+interface SpherePolyline extends SphereOverlay {
+    popup(): SpherePopup;
+    pop(mode?: boolean, location?: Location): this;
+    pivot(): Location;
+    centroid(): Location;
+    bound(): Bound;
+    update(newOptions: GeometryOptions): this;
+    rotate(angle: number): this;
+    size(language?: string): number | string;
+    union(overlay: SpherePolyline, options?: GeometryOptions): SpherePolyline;
+}
+interface SpherePolygon extends SpherePolyline {
+    intersection(overlay: SpherePolygon, options?: GeometryOptions): SpherePolygon;
+    difference(overlay: SpherePolygon, options?: GeometryOptions): SpherePolygon;
+    split(splitter: SpherePolygon, options?: GeometryOptions): SpherePolygon[];
+}
+interface SphereCircle extends SpherePolyline {
+    radius(language?: string): number | string;
+}
+interface SphereDot extends SpherePolyline {
+}
+interface SphereRectangle extends SpherePolygon {
+}
+interface SphereOverlayCollection {
+    add(overlay: SphereOverlay): this;
+    remove(overlay: SphereOverlay): this;
+    load(mode: object): this;
+    unload(mode: object): this;
+    clear(): this;
+    list(): SphereOverlay[];
+    size(): number;
+    lastOpenPopup(): SpherePopup;
+}
+interface SphereUiControl {
+    visible(state?: boolean): boolean | SphereUiControl;
+}
+interface SphereContextMenu {
+    enableNearPoi(state?: boolean): boolean | SphereContextMenu;
+    enableAddress(state?: boolean): boolean | SphereContextMenu;
+}
+interface SphereKeyboard {
+    enable(state?: boolean): boolean | SphereKeyboard;
+}
+interface SphereMouse {
+    enable(state?: boolean): boolean | SphereMouse;
+    enableClick(state?: boolean): boolean | SphereMouse;
+    enableDrag(state?: boolean): boolean | SphereMouse;
+    enableWheel(state?: boolean): boolean | SphereMouse;
+}
+interface SphereUiCollection {
+    DPad: SphereUiControl;
+    Geolocation: SphereUiControl;
+    Zoombar: SphereUiControl;
+    Toolbar: SphereUiControl;
+    LayerSelector: SphereUiControl;
+    Fullscreen: SphereUiControl;
+    Crosshair: SphereUiControl;
+    Scale: SphereUiControl;
+    ContextMenu: SphereContextMenu;
+    Keyboard: SphereKeyboard;
+    Mouse: SphereMouse;
+    language(value?: string): string | SphereUiCollection;
+    add(control: object): SphereUiCollection;
+    remove(control: object): SphereUiCollection;
+    lockMap(options?: object): SphereUiCollection;
+}
+interface SphereSearch {
+    language(value?: string): string | this;
+    placeholder(value?: HTMLElement, options?: object): HTMLElement | this;
+    suggest(keyword: string, options?: SuggestOptions): Promise<object>;
+    search(keyword: string, options?: SearchOptions): Promise<object>;
+    address(location: Location, options?: AddressOptions): Promise<object>;
+    nearPoi(location: Location, options?: NearPoiOptions): Promise<object>;
+    clear(): this;
+    enablePopup(state?: boolean): boolean | this;
+}
+interface SphereTagCollection {
+    language(value?: string): string | this;
+    set(tag: string | ((tile: Tile) => object[]), options?: TagOptions): this;
+    add(tag: string | ((tile: Tile) => object[]), options?: TagOptions): this;
+    remove(tag: string): this;
+    clear(): this;
+    list(): string[];
+    size(): number;
+    enablePopup(state?: boolean): boolean | this;
+}
+interface SphereRoute {
+    language(value?: string): string | this;
+    placeholder(value?: HTMLElement): HTMLElement | this;
+    enableContextMenu(): this;
+    line(type: string, value?: GeometryOptions): GeometryOptions | this;
+    auto(state?: boolean): boolean | this;
+    mode(value?: RouteMode): RouteMode | this;
+    modeOf(index: number, value?: RouteMode): RouteMode | this;
+    enableRoute(routeType: RouteType, state?: boolean): boolean | this;
+    enableRestrict(routeRestrict: string, state?: boolean): boolean | this;
+    label(value?: RouteLabelType): RouteLabelType | this;
+    add(destination: SphereMarker | Location, mode?: RouteMode): this;
+    insert(index: number, destination: SphereMarker | Location, mode?: RouteMode): this;
+    remove(destination: SphereMarker): this;
+    removeAt(index: number): this;
+    clearDestination(): this;
+    clearPath(): this;
+    clear(): this;
+    list(): SphereMarker[];
+    size(): number;
+    reverse(): this;
+    search(): this;
+    distance(format?: boolean): number | string;
+    interval(format?: boolean): number | string;
+    guide(format?: boolean): object[] | HTMLElement;
+    exportRouteLine(options?: GeometryOptions): SpherePolyline;
+}
+interface FlyToOptions {
+    center?: Location;
+    zoom?: number;
+    bearing?: number;
+    pitch?: number;
+    padding?: {
+        top?: number;
+        bottom?: number;
+        left?: number;
+        right?: number;
+    };
+}
+interface SphereMap$1 {
+    Event: SphereEvent;
+    Layers: SphereLayerCollection;
+    Overlays: SphereOverlayCollection;
+    Ui: SphereUiCollection;
+    Search: SphereSearch;
+    Tags: SphereTagCollection;
+    Route: SphereRoute;
+    Renderer: {
+        on(event: string, handler: () => void): void;
+    };
+    id(): number;
+    resize(): this;
+    repaint(): this;
+    placeholder(): HTMLElement;
+    zoom(value?: number | boolean, animate?: boolean): number | this;
+    zoomRange(value?: Range): Range | this;
+    location(value?: Location, animate?: boolean): Location | this;
+    bound(value?: Bound, options?: object): Bound | this;
+    move(offset: Point, animate?: boolean): this;
+    language(value?: string): string | this;
+    rotate(angle?: number, animate?: boolean): number | this;
+    pitch(angle?: number): number | this;
+    enableFilter(filter?: FilterType | false): FilterType | false | this;
+    goTo(target: FlyToOptions, animate?: boolean): this;
+}
+interface SphereNamespace {
+    Map: new (options?: MapOptions) => SphereMap$1;
+    Marker: new (location: Location | object, options?: MarkerOptions) => SphereMarker;
+    Popup: new (location: Location | object, options?: PopupOptions) => SpherePopup;
+    Polyline: new (locationList: Location[] | object, options?: GeometryOptions) => SpherePolyline;
+    Polygon: new (locationList: Location[] | object, options?: GeometryOptions) => SpherePolygon;
+    Circle: new (location: Location | object, radius: number, options?: GeometryOptions) => SphereCircle;
+    Dot: new (location: Location | object, options?: GeometryOptions) => SphereDot;
+    Rectangle: new (location: Location, size: Size | Location, options?: GeometryOptions) => SphereRectangle;
+    Layer: new (name: string, options?: LayerOptions) => SphereLayer;
+    Layers: {
+        SIMPLE: SphereLayer;
+        STREETS: SphereLayer;
+        STREETS_NIGHT: SphereLayer;
+        HYBRID: SphereLayer;
+        TRAFFIC: SphereLayer;
+        IMAGES: SphereLayer;
+        PM25: SphereLayer;
+        HOTSPOT: SphereLayer;
+        FLOOD: SphereLayer;
+        DROUGHT: SphereLayer;
+    };
+    LayerType: {
+        Vector: string;
+        XYZ: string;
+        WMS: string;
+        WMTS: string;
+        WMTS_REST: string;
+        TMS: string;
+        Tiles3D: string;
+        I3S: string;
+    };
+    LineStyle: {
+        Solid: string;
+        Dashed: string;
+        Dot: string;
+    };
+    Filter: {
+        Dark: FilterType;
+        Light: FilterType;
+        Protanopia: FilterType;
+        Deuteranopia: FilterType;
+        None: FilterType;
+    };
+    EventName: Record<EventName, EventName>;
+    TagType: {
+        WFS: string;
+        OGC: string;
+    };
+    RouteMode: {
+        Traffic: string;
+        Cost: string;
+        Distance: string;
+        Fly: string;
+    };
+    RouteType: {
+        Road: string;
+        Ferry: string;
+        Tollway: string;
+        All: string;
+    };
+    RouteLabel: {
+        Distance: string;
+        Time: string;
+        Hide: string;
+    };
+    Util: {
+        append(element: HTMLElement, childName: string, propertyMap?: object): HTMLElement;
+        prepend(element: HTMLElement, childName: string, propertyMap?: object, beforeElement?: HTMLElement): HTMLElement;
+        empty(element: HTMLElement): HTMLElement;
+        loadStyle(url: string, media?: string): void;
+        loadScript(url: string, callback?: (isLoad: boolean) => void): void;
+        getJson(url: string): Promise<object>;
+        isHD(): number;
+        validateLocation(location: Location): boolean;
+        sameLocation(a: Location, b: Location): boolean;
+        longitudeLength(lat: number): number;
+        latitudeLength(lat: number): number;
+        isAbsInRange(value: number, range: number): boolean;
+        bound(value: number, min: number, max: number): number;
+        formatDate(date: string, language: string): string;
+        formatTime(time: string): string;
+        formatDateTimeRange(startDatetime: string, stopDatetime: string, language: string): string;
+        formatInterval(interval: number, language: string): string;
+        formatDistance(distance: number, language: string): string;
+        formatArea(area: number, language: string): string;
+        formatThaiArea(area: number, language: string): string;
+        initLibrary(library: string): Promise<void>;
+        project(fromProjection: string | undefined, toProjection: string, coordinates: object | unknown[]): object;
+        WKTToGeoJSON(text: string): object;
+        EsriJSONToGeoJSON(json: object): object;
+        TopoJSONToGeoJSON(json: object, obj: object | string): object;
+        GMLToGeoJSON(doc: Document | string): object;
+        GPXToGeoJSON(doc: Document | string): object;
+        KMLToGeoJSON(doc: Document | string): object;
+        formatPoi?: (poi: object, lang: string) => HTMLElement;
+        poiPopupOptions?: (source: string, id: string, name: string, language: string) => PopupOptions;
+    };
+    Math: {
+        distance(dx: number, dy: number): number;
+        closestPointOnLine(x: number, y: number, x1: number, y1: number, x2: number, y2: number): Point;
+        lineIntersectPoint(x1: number, y1: number, x2: number, y2: number, u1: number, v1: number, u2: number, v2: number, skipOverlap?: boolean): Point | number[] | null;
+    };
+    Overlays: {
+        cameras: {
+            popup?: boolean;
+            motion?: boolean;
+        };
+        events: {
+            popup?: boolean;
+        };
+        aqi: {
+            popup?: boolean;
+        };
+        Object: new (id: string, dataset?: string, options?: object) => SphereOverlay;
+    };
+}
+declare global {
+    interface Window {
+        sphere?: SphereNamespace;
+    }
+}
+
+interface CircleProps {
+    center: Location;
+    radius: number;
+    title?: string;
+    detail?: string;
+    popup?: PopupOptions;
+    visibleRange?: Range;
+    lineWidth?: number;
+    lineColor?: string;
+    fillColor?: string;
+    lineStyle?: LineStyleType;
+    clickable?: boolean;
+    draggable?: boolean;
+    zIndex?: number;
+    onClick?: (circle: SphereCircle) => void;
+    onDrag?: (circle: SphereCircle) => void;
+    onDrop?: (circle: SphereCircle) => void;
+}
+interface CircleRef {
+    getCircle(): SphereCircle | null;
+    togglePopup(show?: boolean, location?: Location): void;
+    getCenter(): Location | null;
+    getBound(): Bound | null;
+    getArea(language?: string): number | string | null;
+    getRadius(language?: string): number | string | null;
+    updateStyle(options: Partial<GeometryOptions>): void;
+}
+declare const Circle: react.ForwardRefExoticComponent<CircleProps & react.RefAttributes<CircleRef>>;
+
+interface DotProps {
+    position: Location;
+    title?: string;
+    detail?: string;
+    visibleRange?: Range;
+    lineWidth?: number;
+    lineColor?: string;
+    clickable?: boolean;
+    draggable?: boolean;
+    zIndex?: number;
+    onClick?: (dot: SphereDot) => void;
+    onDrag?: (dot: SphereDot) => void;
+    onDrop?: (dot: SphereDot, location: Location) => void;
+}
+interface DotRef {
+    getDot(): SphereDot | null;
+    setPosition(location: Location): void;
+    getPosition(): Location | null;
+}
+declare const Dot: react.ForwardRefExoticComponent<DotProps & react.RefAttributes<DotRef>>;
+
+interface LayerProps {
+    name?: string;
+    preset?: BuiltInLayer$1;
+    isBase?: boolean;
+    type?: LayerType;
+    url?: string;
+    zoomRange?: Range;
+    source?: Range;
+    opacity?: number;
+    zIndex?: number;
+    bound?: Bound;
+    attribution?: string;
+    extraQuery?: string;
+    id?: string;
+    format?: string;
+    srs?: string;
+    tileMatrixPrefix?: string;
+    styles?: string;
+    version?: string;
+    refresh?: number;
+    zoomOffset?: number;
+    beforeId?: string;
+}
+declare function Layer({ name, preset, isBase, type, url, zoomRange, source, opacity, zIndex, bound, attribution, extraQuery, id, format, srs, tileMatrixPrefix, styles, version, refresh, zoomOffset, beforeId, }: LayerProps): null;
+
+interface MarkerProps {
+    position: Location;
+    icon?: Icon;
+    title?: string;
+    detail?: string;
+    popup?: PopupOptions;
+    visibleRange?: Range;
+    clickable?: boolean;
+    draggable?: boolean;
+    zIndex?: number;
+    rotate?: number;
+    onClick?: (marker: SphereMarker) => void;
+    onDrag?: (marker: SphereMarker) => void;
+    onDrop?: (marker: SphereMarker, location: Location) => void;
+    onHover?: (marker: SphereMarker) => void;
+    onLeave?: (marker: SphereMarker) => void;
+}
+interface MarkerRef {
+    getMarker(): SphereMarker | null;
+    togglePopup(show?: boolean): void;
+    setPosition(location: Location, animate?: boolean): void;
+    setRotation(angle: number): void;
+}
+declare const Marker: react.ForwardRefExoticComponent<MarkerProps & react.RefAttributes<MarkerRef>>;
+
+interface PolygonProps {
+    positions: Location[];
+    title?: string;
+    detail?: string;
+    label?: string;
+    labelOptions?: MarkerOptions;
+    popup?: PopupOptions;
+    visibleRange?: Range;
+    lineWidth?: number;
+    lineColor?: string;
+    fillColor?: string;
+    lineStyle?: LineStyleType;
+    pivot?: Location;
+    clickable?: boolean;
+    draggable?: boolean;
+    pointer?: boolean;
+    zIndex?: number;
+    editable?: boolean;
+    onClick?: (polygon: SpherePolygon) => void;
+    onDrag?: (polygon: SpherePolygon) => void;
+    onDrop?: (polygon: SpherePolygon) => void;
+}
+interface PolygonRef {
+    getPolygon(): SpherePolygon | null;
+    togglePopup(show?: boolean, location?: Location): void;
+    getPivot(): Location | null;
+    getCentroid(): Location | null;
+    getBound(): Bound | null;
+    getArea(language?: string): number | string | null;
+    rotate(angle: number): void;
+    updateStyle(options: Partial<GeometryOptions>): void;
+    toGeoJSON(): object | null;
+}
+declare const Polygon: react.ForwardRefExoticComponent<PolygonProps & react.RefAttributes<PolygonRef>>;
+
+interface PolylineProps {
+    positions: Location[];
+    title?: string;
+    detail?: string;
+    label?: string;
+    labelOptions?: MarkerOptions;
+    popup?: PopupOptions;
+    visibleRange?: Range;
+    lineWidth?: number;
+    lineColor?: string;
+    lineStyle?: LineStyleType;
+    pivot?: Location;
+    clickable?: boolean;
+    draggable?: boolean;
+    pointer?: boolean;
+    zIndex?: number;
+    onClick?: (polyline: SpherePolyline) => void;
+    onDrag?: (polyline: SpherePolyline) => void;
+    onDrop?: (polyline: SpherePolyline) => void;
+}
+interface PolylineRef {
+    getPolyline(): SpherePolyline | null;
+    togglePopup(show?: boolean, location?: Location): void;
+    getPivot(): Location | null;
+    getCentroid(): Location | null;
+    getBound(): Bound | null;
+    getLength(language?: string): number | string | null;
+    rotate(angle: number): void;
+    updateStyle(options: Partial<GeometryOptions>): void;
+}
+declare const Polyline: react.ForwardRefExoticComponent<PolylineProps & react.RefAttributes<PolylineRef>>;
+
+interface PopupProps {
+    position: Location;
+    title?: string;
+    detail?: string;
+    loadDetail?: (element: HTMLElement) => void;
+    html?: string;
+    loadHtml?: (element: HTMLElement) => void;
+    size?: Size;
+    closable?: boolean;
+    onClose?: (popup: SpherePopup) => void;
+}
+interface PopupRef {
+    getPopup(): SpherePopup | null;
+    setPosition(location: Location): void;
+    setTitle(title: string): void;
+    setDetail(detail: string): void;
+    getElement(): HTMLElement | null;
+}
+declare const Popup: react.ForwardRefExoticComponent<PopupProps & react.RefAttributes<PopupRef>>;
+
+interface RectangleProps {
+    position: Location;
+    size: Size | Location;
+    title?: string;
+    detail?: string;
+    popup?: PopupOptions;
+    visibleRange?: Range;
+    lineWidth?: number;
+    lineColor?: string;
+    fillColor?: string;
+    lineStyle?: LineStyleType;
+    clickable?: boolean;
+    draggable?: boolean;
+    editable?: boolean;
+    zIndex?: number;
+    onClick?: (rectangle: SphereRectangle) => void;
+    onDrag?: (rectangle: SphereRectangle) => void;
+    onDrop?: (rectangle: SphereRectangle) => void;
+}
+interface RectangleRef {
+    getRectangle(): SphereRectangle | null;
+    togglePopup(show?: boolean, location?: Location): void;
+    getBound(): Bound | null;
+    getArea(language?: string): number | string | null;
+    updateStyle(options: Partial<GeometryOptions>): void;
+}
+declare const Rectangle: react.ForwardRefExoticComponent<RectangleProps & react.RefAttributes<RectangleRef>>;
+
+interface SphereMapProps {
+    children?: ReactNode;
+    zoom?: number;
+    zoomRange?: Range;
+    center?: Location;
+    language?: string;
+    input?: boolean;
+    lastView?: boolean;
+    ui?: "Full" | "Mobile" | "None";
+    filter?: FilterType;
+    rotate?: number;
+    pitch?: number;
+    className?: string;
+    style?: CSSProperties;
+    id?: string;
+    onReady?: (map: SphereMap$1) => void;
+    onZoom?: (zoom: number) => void;
+    onLocation?: (location: Location) => void;
+    onClick?: (location: Location) => void;
+    onDoubleClick?: (location: Location) => void;
+    onRotate?: (angle: number) => void;
+    onPitch?: (angle: number) => void;
+    onDrag?: () => void;
+    onDrop?: () => void;
+    onIdle?: () => void;
+    onMouseMove?: (location: Location) => void;
+    onError?: (error: Error) => void;
+}
+interface SphereMapRef {
+    getMap(): SphereMap$1 | null;
+    setZoom(zoom: number, animate?: boolean): void;
+    setCenter(location: Location, animate?: boolean): void;
+    setBound(bound: Bound, options?: object): void;
+    goTo(target: FlyToOptions, animate?: boolean): void;
+    setRotate(angle: number, animate?: boolean): void;
+    setPitch(angle: number): void;
+    setFilter(filter: FilterType): void;
+    resize(): void;
+    repaint(): void;
+}
+declare const SphereMap: react.ForwardRefExoticComponent<SphereMapProps & react.RefAttributes<SphereMapRef>>;
+
+interface MapContextValue {
+    map: SphereMap$1 | null;
+    isReady: boolean;
+}
+interface MapProviderProps {
+    map: SphereMap$1 | null;
+    isReady: boolean;
+    children: ReactNode;
+}
+declare function MapProvider({ map, isReady, children, }: MapProviderProps): ReactNode;
+declare function useMapContext(): MapContextValue;
+
+type BuiltInLayer = "SIMPLE" | "STREETS" | "STREETS_NIGHT" | "HYBRID" | "TRAFFIC" | "IMAGES" | "PM25" | "HOTSPOT" | "FLOOD" | "DROUGHT";
+interface MapControls {
+    isReady: boolean;
+    goTo: (options: FlyToOptions, animate?: boolean) => void;
+    setCenter: (location: Location, animate?: boolean) => void;
+    setZoom: (zoom: number, animate?: boolean) => void;
+    setBound: (bound: Bound, options?: object) => void;
+    setRotate: (angle: number, animate?: boolean) => void;
+    setPitch: (angle: number) => void;
+    setFilter: (filter: FilterType | false) => void;
+    setLanguage: (language: string) => void;
+    setBaseLayer: (layer: BuiltInLayer) => void;
+    addLayer: (layer: BuiltInLayer) => void;
+    removeLayer: (layer: BuiltInLayer) => void;
+    resize: () => void;
+    repaint: () => void;
+}
+interface SphereContextValue {
+    isLoaded: boolean;
+    error: Error | null;
+    sphere: SphereNamespace | null;
+    apiKey: string;
+    map: SphereMap$1 | null;
+    isMapReady: boolean;
+    controls: MapControls;
+    registerMap: (map: SphereMap$1) => void;
+    unregisterMap: () => void;
+}
+interface SphereProviderProps {
+    apiKey: string;
+    children: ReactNode;
+    scriptUrl?: string;
+    onLoad?: () => void;
+    onError?: (error: Error) => void;
+}
+declare function SphereProvider({ apiKey, children, scriptUrl, onLoad, onError, }: SphereProviderProps): ReactNode;
+declare function useSphereContext(): SphereContextValue;
+declare function useMap(): {
+    map: SphereMap$1 | null;
+    sphere: SphereNamespace | null;
+    isReady: boolean;
+};
+declare function useMapControls(): MapControls;
+
+declare function useMapEvent<T = unknown>(eventName: EventName, handler: EventHandler<T>): void;
+declare function useMapReady(handler: () => void): void;
+declare function useMapClick(handler: EventHandler<{
+    lon: number;
+    lat: number;
+}>): void;
+declare function useMapZoom(handler: EventHandler<void>): void;
+declare function useMapLocation(handler: EventHandler<void>): void;
+declare function useOverlayClick(handler: EventHandler<{
+    overlay: SphereOverlay;
+    location: Location;
+}>): void;
+
+interface BaseOverlay {
+    id: string;
+}
+interface MarkerData extends BaseOverlay {
+    position: Location;
+    icon?: Icon;
+    title?: string;
+    detail?: string;
+    popup?: PopupOptions;
+    visibleRange?: Range;
+    clickable?: boolean;
+    draggable?: boolean;
+    zIndex?: number;
+    rotate?: number;
+}
+interface PolygonData extends BaseOverlay {
+    positions: Location[];
+    title?: string;
+    detail?: string;
+    lineWidth?: number;
+    lineColor?: string;
+    fillColor?: string;
+    lineStyle?: "Solid" | "Dashed" | "Dot";
+    popup?: PopupOptions;
+    visibleRange?: Range;
+    clickable?: boolean;
+    draggable?: boolean;
+    editable?: boolean;
+    zIndex?: number;
+}
+interface PolylineData extends BaseOverlay {
+    positions: Location[];
+    title?: string;
+    detail?: string;
+    lineWidth?: number;
+    lineColor?: string;
+    lineStyle?: "Solid" | "Dashed" | "Dot";
+    popup?: PopupOptions;
+    visibleRange?: Range;
+    clickable?: boolean;
+    draggable?: boolean;
+    editable?: boolean;
+    zIndex?: number;
+}
+interface CircleData extends BaseOverlay {
+    center: Location;
+    radius: number;
+    title?: string;
+    detail?: string;
+    lineWidth?: number;
+    lineColor?: string;
+    fillColor?: string;
+    lineStyle?: "Solid" | "Dashed" | "Dot";
+    popup?: PopupOptions;
+    visibleRange?: Range;
+    clickable?: boolean;
+    draggable?: boolean;
+    zIndex?: number;
+}
+type OverlayInput<T extends BaseOverlay> = Omit<T, "id"> & {
+    id?: string;
+};
+interface UseOverlaysResult<T extends BaseOverlay> {
+    items: T[];
+    add: (data: OverlayInput<T>) => string;
+    update: (id: string, data: Partial<Omit<T, "id">>) => void;
+    remove: (id: string) => void;
+    clear: () => void;
+    get: (id: string) => T | undefined;
+}
+/**
+ * Hook to manage markers with add/update/remove functionality.
+ *
+ * @example
+ * ```tsx
+ * function DrawingPanel() {
+ *   const { items: markers, add, remove, clear } = useMarkers();
+ *
+ *   const handleMapClick = (location: Location) => {
+ *     add({ position: location, title: `Marker ${markers.length + 1}` });
+ *   };
+ *
+ *   return (
+ *     <>
+ *       {markers.map((m) => (
+ *         <Marker
+ *           key={m.id}
+ *           position={m.position}
+ *           title={m.title}
+ *           onClick={() => remove(m.id)}
+ *         />
+ *       ))}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function useMarkers(): UseOverlaysResult<MarkerData>;
+/**
+ * Hook to manage polygons with add/update/remove functionality.
+ *
+ * @example
+ * ```tsx
+ * function DrawingPanel() {
+ *   const { items: polygons, add, clear } = usePolygons();
+ *
+ *   const handleFinishDrawing = (positions: Location[]) => {
+ *     add({ positions, fillColor: 'rgba(255, 0, 0, 0.3)' });
+ *   };
+ *
+ *   return (
+ *     <>
+ *       {polygons.map((p) => (
+ *         <Polygon key={p.id} positions={p.positions} fillColor={p.fillColor} />
+ *       ))}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function usePolygons(): UseOverlaysResult<PolygonData>;
+/**
+ * Hook to manage polylines with add/update/remove functionality.
+ *
+ * @example
+ * ```tsx
+ * function DrawingPanel() {
+ *   const { items: polylines, add } = usePolylines();
+ *
+ *   return (
+ *     <>
+ *       {polylines.map((p) => (
+ *         <Polyline key={p.id} positions={p.positions} lineColor={p.lineColor} />
+ *       ))}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function usePolylines(): UseOverlaysResult<PolylineData>;
+/**
+ * Hook to manage circles with add/update/remove functionality.
+ *
+ * @example
+ * ```tsx
+ * function DrawingPanel() {
+ *   const { items: circles, add } = useCircles();
+ *
+ *   const handleAddCircle = (center: Location, radius: number) => {
+ *     add({ center, radius, fillColor: 'rgba(0, 0, 255, 0.3)' });
+ *   };
+ *
+ *   return (
+ *     <>
+ *       {circles.map((c) => (
+ *         <Circle key={c.id} center={c.center} radius={c.radius} fillColor={c.fillColor} />
+ *       ))}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function useCircles(): UseOverlaysResult<CircleData>;
+/**
+ * Hook that combines all overlay types into a single manager.
+ *
+ * @example
+ * ```tsx
+ * function DrawingPanel() {
+ *   const overlays = useOverlays();
+ *
+ *   const handleClearAll = () => {
+ *     overlays.markers.clear();
+ *     overlays.polygons.clear();
+ *     overlays.polylines.clear();
+ *     overlays.circles.clear();
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <button onClick={handleClearAll}>Clear All</button>
+ *       {overlays.markers.items.map((m) => <Marker key={m.id} {...m} />)}
+ *       {overlays.polygons.items.map((p) => <Polygon key={p.id} {...p} />)}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function useOverlays(): {
+    markers: UseOverlaysResult<MarkerData>;
+    polygons: UseOverlaysResult<PolygonData>;
+    polylines: UseOverlaysResult<PolylineData>;
+    circles: UseOverlaysResult<CircleData>;
+    clearAll: () => void;
+};
+
+interface RouteGuideStep {
+    instruction: string;
+    distance: number | string;
+    duration: number | string;
+    location: Location;
+}
+interface UseRouteReturn {
+    isReady: boolean;
+    addDestination: (destination: SphereMarker | Location, mode?: RouteMode) => void;
+    insertDestination: (index: number, destination: SphereMarker | Location, mode?: RouteMode) => void;
+    removeDestination: (destination: SphereMarker) => void;
+    removeDestinationAt: (index: number) => void;
+    clearDestinations: () => void;
+    clearPath: () => void;
+    clear: () => void;
+    reverse: () => void;
+    search: () => void;
+    getDistance: (format?: boolean) => number | string;
+    getInterval: (format?: boolean) => number | string;
+    getGuide: (format?: boolean) => RouteGuideStep[] | HTMLElement;
+    exportRouteLine: (options?: GeometryOptions) => SpherePolyline | null;
+    listDestinations: () => SphereMarker[];
+    size: () => number;
+    setMode: (mode: RouteMode) => void;
+    setModeAt: (index: number, mode: RouteMode) => void;
+    enableRouteType: (routeType: RouteType, state: boolean) => void;
+    setLabel: (label: RouteLabelType) => void;
+    setAuto: (state: boolean) => void;
+    setLanguage: (lang: string) => void;
+}
+declare function useRoute(): UseRouteReturn;
+
+interface SearchResult {
+    data: object[];
+    total?: number;
+}
+interface AddressResult {
+    address?: string;
+    subdistrict?: string;
+    district?: string;
+    province?: string;
+    postcode?: string;
+    geocode?: string;
+}
+interface PoiResult {
+    id: string;
+    name: string;
+    location: Location;
+    category?: string;
+    distance?: number;
+}
+interface UseSearchReturn {
+    isReady: boolean;
+    suggest: (keyword: string, options?: SuggestOptions) => Promise<SearchResult>;
+    search: (keyword: string, options?: SearchOptions) => Promise<SearchResult>;
+    address: (location: Location, options?: AddressOptions) => Promise<AddressResult>;
+    nearPoi: (location: Location, options?: NearPoiOptions) => Promise<PoiResult[]>;
+    clear: () => void;
+    enablePopup: (state: boolean) => void;
+    setLanguage: (lang: string) => void;
+}
+declare function useSearch(): UseSearchReturn;
+
+declare function useSphere(): {
+    sphere: SphereNamespace | null;
+    isLoaded: boolean;
+    error: Error | null;
+    apiKey: string;
+};
+
+type TagDataFunction = (tile: Tile) => object[];
+interface UseTagsReturn {
+    isReady: boolean;
+    set: (tag: string | TagDataFunction, options?: TagOptions) => void;
+    add: (tag: string | TagDataFunction, options?: TagOptions) => void;
+    remove: (tag: string) => void;
+    clear: () => void;
+    list: () => string[];
+    size: () => number;
+    enablePopup: (state: boolean) => void;
+    setLanguage: (lang: string) => void;
+}
+interface TagDefinition {
+    id: string;
+    label: string;
+}
+interface TagCategory {
+    name: string;
+    tags: TagDefinition[];
+}
+declare const TAG_CATEGORIES: TagCategory[];
+declare function useTags(): UseTagsReturn;
+
+export { type AddressOptions, type AddressResult, type BaseOverlay, type Bound, type BuiltInLayer, Circle, type CircleData, type CircleProps, type CircleRef, Dot, type DotProps, type DotRef, type EventHandler, type EventName, type FilterType, type FlyToOptions, type GeometryOptions, type Icon, Layer, type LayerOptions, type LayerProps, type LayerType, type LineStyleType, type Location, SphereMap as Map, type MapContextValue, type MapControls, type MapOptions, MapProvider, Marker, type MarkerData, type MarkerOptions, type MarkerProps, type MarkerRef, type NearPoiOptions, type OverlayInput, type PoiResult, type Point, Polygon, type PolygonData, type PolygonProps, type PolygonRef, Polyline, type PolylineData, type PolylineProps, type PolylineRef, Popup, type PopupOptions, type PopupProps, type PopupRef, type Range, Rectangle, type RectangleProps, type RectangleRef, type RouteGuideStep, type RouteLabelType, type RouteMode, type RouteType, type SearchOptions, type SearchResult, type Size, type SphereCircle, type SphereContextValue, type SphereDot, type SphereLayer, SphereMap, type SphereMap$1 as SphereMapInstance, type SphereMapProps, type SphereMapRef, type SphereMarker, type SphereNamespace, type SphereOverlay, type SpherePolygon, type SpherePolyline, type SpherePopup, SphereProvider, type SphereProviderProps, type SphereRectangle, type SuggestOptions, TAG_CATEGORIES, type TagCategory, type TagDataFunction, type TagDefinition, type TagOptions, type TagType, type Tile, type UiComponentMode, type UseOverlaysResult, type UseRouteReturn, type UseSearchReturn, type UseTagsReturn, useCircles, useMap, useMapClick, useMapContext, useMapControls, useMapEvent, useMapLocation, useMapReady, useMapZoom, useMarkers, useOverlayClick, useOverlays, usePolygons, usePolylines, useRoute, useSearch, useSphere, useSphereContext, useTags };