maplibre-react-components/index.d.ts

React components for MapLibre GL JS

import * as react from 'react';
import { ReactNode, CSSProperties, Dispatch, SetStateAction, MutableRefObject } from 'react';
import maplibregl, { TerrainSpecification, LayerSpecification, CustomLayerInterface, MapLayerMouseEvent, MapLayerTouchEvent, Source, SourceSpecification, PaddingOptions, StyleSpecification, StyleSwapOptions, Map, MapWheelEvent, MapLibreEvent, MapLibreZoomEvent, MapContextEvent, MapDataEvent, MapStyleDataEvent, MapSourceDataEvent, MapStyleImageMissingEvent, MapTerrainEvent, MapOptions, TransformStyleFunction, Marker, MarkerOptions, Popup, PopupOptions, LngLat, ControlPosition, AttributionControlOptions, IControl, FullscreenControlOptions, GeolocateControlOptions, LogoControlOptions, NavigationControlOptions, ScaleControlOptions, LngLatLike, PointLike, Offset } from 'maplibre-gl';
import * as react_jsx_runtime from 'react/jsx-runtime';

type RTerrainProps = TerrainSpecification;
declare const RTerrain: (props: RTerrainProps) => null;

type LayerOptions = LayerSpecification | CustomLayerInterface;
type LayerCallbacks = {
    onMouseDown?: (e: MapLayerMouseEvent) => void;
    onMouseUp?: (e: MapLayerMouseEvent) => void;
    onMouseOver?: (e: MapLayerMouseEvent) => void;
    onMouseOut?: (e: MapLayerMouseEvent) => void;
    onMouseMove?: (e: MapLayerMouseEvent) => void;
    onMouseEnter?: (e: MapLayerMouseEvent) => void;
    onMouseLeave?: (e: MapLayerMouseEvent) => void;
    onClick?: (e: MapLayerMouseEvent) => void;
    onDblClick?: (e: MapLayerMouseEvent) => void;
    onContextMenu?: (e: MapLayerMouseEvent) => void;
    onTouchStart?: (e: MapLayerTouchEvent) => void;
    onTouchEnd?: (e: MapLayerTouchEvent) => void;
    onTouchCancel?: (e: MapLayerTouchEvent) => void;
    onTouchMove?: (e: MapLayerTouchEvent) => void;
};
type LayerProps = LayerOptions & LayerCallbacks;
type RLayerProps = LayerProps & {
    beforeId?: string;
};
declare const RLayer: react.MemoExoticComponent<react.ForwardRefExoticComponent<RLayerProps & react.RefAttributes<unknown>>>;

type RSourceProps = SourceSpecification & {
    readonly id: string;
};
declare const RSource: react.MemoExoticComponent<react.ForwardRefExoticComponent<RSourceProps & react.RefAttributes<Source | null>>>;

type MapEvent = MapLayerMouseEvent | MapLayerTouchEvent | MapWheelEvent | MapLibreEvent | MapLibreZoomEvent | MapContextEvent | ErrorEvent | MapDataEvent | MapStyleDataEvent | MapSourceDataEvent | MapStyleImageMissingEvent | MapTerrainEvent;
type MapCallbacks = {
    /** Compatible with `layerId` */
    onMouseDown?: (e: MapLayerMouseEvent) => void;
    onMouseUp?: (e: MapLayerMouseEvent) => void;
    onMouseOver?: (e: MapLayerMouseEvent) => void;
    onMouseOut?: (e: MapLayerMouseEvent) => void;
    onMouseMove?: (e: MapLayerMouseEvent) => void;
    onMouseEnter?: (e: MapLayerMouseEvent) => void;
    onMouseLeave?: (e: MapLayerMouseEvent) => void;
    onClick?: (e: MapLayerMouseEvent) => void;
    onDblClick?: (e: MapLayerMouseEvent) => void;
    onContextMenu?: (e: MapLayerMouseEvent) => void;
    onTouchStart?: (e: MapLayerTouchEvent) => void;
    onTouchEnd?: (e: MapLayerTouchEvent) => void;
    onTouchCancel?: (e: MapLayerTouchEvent) => void;
    onTouchMove?: (e: MapLayerTouchEvent) => void;
    /** Not compatible with `layerId` */
    onWheel?: (e: MapWheelEvent) => void;
    onResize?: (e: MapLibreEvent) => void;
    onRemove?: (e: MapLibreEvent) => void;
    onMoveStart?: (e: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => void;
    onMove?: (e: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => void;
    onMoveEnd?: (e: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => void;
    onDragStart?: (e: MapLibreEvent<MouseEvent | TouchEvent | undefined>) => void;
    onDrag?: (e: MapLibreEvent<MouseEvent | TouchEvent | undefined>) => void;
    onDragEnd?: (e: MapLibreEvent<MouseEvent | TouchEvent | undefined>) => void;
    onZoomStart?: (e: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => void;
    onZoom?: (e: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => void;
    onZoomEnd?: (e: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => void;
    onRotateStart?: (e: MapLibreEvent<MouseEvent | TouchEvent | undefined>) => void;
    onRotate?: (e: MapLibreEvent<MouseEvent | TouchEvent | undefined>) => void;
    onRotateEnd?: (e: MapLibreEvent<MouseEvent | TouchEvent | undefined>) => void;
    onPitchStart?: (e: MapLibreEvent<MouseEvent | TouchEvent | undefined>) => void;
    onPitch?: (e: MapLibreEvent<MouseEvent | TouchEvent | undefined>) => void;
    onPitchEnd?: (e: MapLibreEvent<MouseEvent | TouchEvent | undefined>) => void;
    onBoxZoomStart?: (e: MapLibreZoomEvent) => void;
    onBoxZoomEnd?: (e: MapLibreZoomEvent) => void;
    onBoxZoomCancel?: (e: MapLibreZoomEvent) => void;
    onWebglContextLost?: (e: MapContextEvent) => void;
    onWebglContextRestored?: (e: MapContextEvent) => void;
    onLoad?: (e: MapLibreEvent) => void;
    onRender?: (e: MapLibreEvent) => void;
    onIdle?: (e: MapLibreEvent) => void;
    onError?: (e: ErrorEvent) => void;
    onData?: (e: MapDataEvent) => void;
    onStyleData?: (e: MapStyleDataEvent) => void;
    onSourceData?: (e: MapSourceDataEvent) => void;
    onDataLoading?: (e: MapDataEvent) => void;
    onStyleDataLoading?: (e: MapStyleDataEvent) => void;
    onSourceDataLoading?: (e: MapSourceDataEvent) => void;
    onTileDataLoading?: (e: MapDataEvent) => void;
    onStyleImageMissing?: (e: MapStyleImageMissingEvent) => void;
    onDataAbort?: (e: MapDataEvent) => void;
    onSourceDataAbort?: (e: MapSourceDataEvent) => void;
    onTerrain?: (e: MapTerrainEvent) => void;
};
declare const mapReactiveOptionNames: readonly ["maxBounds", "minZoom", "maxZoom", "minPitch", "maxPitch", "renderWorldCopies", "pixelRatio", "centerClampedToGround"];
type MapReactiveOptionName = (typeof mapReactiveOptionNames)[number];
type MapReactiveOptions = {
    [key in MapReactiveOptionName]?: MapOptions[key];
};
declare const mapNonReactiveOptionNames: readonly ["hash", "interactive", "bearingSnap", "attributionControl", "maplibreLogo", "logoPosition", "canvasContextAttributes", "refreshExpiredTiles", "trackResize", "center", "elevation", "zoom", "bearing", "pitch", "roll", "maxTileCacheSize", "maxTileCacheZoomLevels", "transformRequest", "transformCameraUpdate", "locale", "fadeDuration", "crossSourceCollisions", "collectResourceTiming", "clickTolerance", "bounds", "fitBoundsOptions", "localIdeographFontFamily", "pitchWithRotate", "rollEnabled", "validateStyle", "maxCanvasSize", "cancelPendingTileRequestsWhileZooming"];
type MapNonReactiveOptionName = (typeof mapNonReactiveOptionNames)[number];
type MapInitialOptions = {
    [key in MapNonReactiveOptionName as `initial${Capitalize<key>}`]?: MapOptions[key];
};
declare const mapHandlerNames: readonly ["scrollZoom", "boxZoom", "dragRotate", "dragPan", "keyboard", "doubleClickZoom", "touchZoomRotate", "touchPitch", "cooperativeGestures"];
type MapHandlerOptionName = (typeof mapHandlerNames)[number];
type MapHandlerOptions = {
    [key in MapHandlerOptionName]?: MapOptions[key];
};
type ManagerOptions = {
    mapStyle?: StyleSpecification | string;
    padding?: PaddingOptions;
    styleDiffing?: boolean;
    styleTransformStyle?: TransformStyleFunction;
};
type MapProps = MapReactiveOptions & MapHandlerOptions & MapInitialOptions & MapCallbacks;
declare class MapManager {
    reactiveOptions: MapReactiveOptions;
    handlerOptions: MapHandlerOptions;
    eventNames: string[];
    callbacks: MapCallbacks;
    private _map;
    padding?: PaddingOptions;
    mapStyle: string | StyleSpecification;
    controlledSources: {
        [key: string]: RSourceProps;
    };
    controlledLayers: {
        [key: string]: RLayerProps;
    };
    controlledTerrain: RTerrainProps | null;
    constructor({ mapStyle, padding }: ManagerOptions, mapProps: MapProps, container: HTMLDivElement);
    setProps({ mapStyle, styleDiffing, styleTransformStyle, padding }: ManagerOptions, mapProps: MapProps): void;
    getControlledTerrain(): RTerrainProps | null;
    setControlledTerrain(terrainProps: RTerrainProps | null): void;
    getControlledLayer(id: string): RLayerProps | null;
    setControlledLayer(id: string, layerProps: RLayerProps | null): void;
    getControlledSource(id: string): RSourceProps | null;
    setControlledSource(id: string, layerProps: RSourceProps | null): void;
    _updateStyle(nextStyle: StyleSpecification | string, options: StyleSwapOptions): void;
    _updateReactiveOptions(nextReactiveOptions: MapReactiveOptions, { padding }: {
        padding?: PaddingOptions;
    }): void;
    _updateCallbacks(callbacks?: MapCallbacks): void;
    _updateHandlers(nextHandlers: MapHandlerOptions): void;
    _onStyleError: (event: ErrorEvent) => void;
    _onMapEvent: (e: MapEvent) => void;
    get map(): Map;
    destroy(): void;
}

type RMapComponentProps = {
    children?: ReactNode;
    style?: CSSProperties;
    id?: string;
    className?: string;
    onMounted?: (map: Map) => void;
};
declare const RMap: react.ForwardRefExoticComponent<MapReactiveOptions & MapHandlerOptions & MapInitialOptions & MapCallbacks & ManagerOptions & RMapComponentProps & react.RefAttributes<Map | null>>;

interface Event<T> {
  readonly type: string;
  target: T;
}

type MarkerCallbacks = {
    /**
     * Event type is duckTyping of Maplibre Event class
     * https://github.com/maplibre/maplibre-gl-js/blob/0a04d2af96e14e063eade6c33c695ec89058d4aa/src/util/evented.ts#L30
     * we don't import class from maplibre-gl-js because not directly exported
     */
    onDragStart?: (e: Event<Marker>) => void;
    onDrag?: (e: Event<Marker>) => void;
    onDragEnd?: (e: Event<Marker>) => void;
    onClick?: (e: MouseEvent) => void;
};
declare const markerReactiveOptionNames: readonly ["className", "offset", "draggable", "clickTolerance", "rotation", "rotationAlignment", "pitchAlignment", "opacity", "opacityWhenCovered", "subpixelPositioning"];
type MarkerReactiveOptionName = (typeof markerReactiveOptionNames)[number];
type MarkerReactiveOptions = {
    [key in MarkerReactiveOptionName]?: MarkerOptions[key];
};
declare const markerNonReactiveOptionNames$1: readonly ["anchor", "color", "scale"];
type MarkerNonReactiveOptionName = (typeof markerNonReactiveOptionNames$1)[number];
type MarkerInitialOptions = {
    [key in MarkerNonReactiveOptionName as `initial${Capitalize<key>}`]?: MarkerOptions[key];
};
declare const RMarker: react.MemoExoticComponent<react.ForwardRefExoticComponent<MarkerInitialOptions & MarkerReactiveOptions & MarkerCallbacks & {
    longitude: number;
    latitude: number;
    children?: ReactNode;
} & react.RefAttributes<Marker>>>;

type PopupCallbacks = {
    onMapClick?: (e: MapLayerMouseEvent) => void;
    onMapMove?: (e: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>) => void;
};
declare const popupReactiveOptionNames: readonly ["className", "offset", "maxWidth"];
type PopupReactiveOptionName = (typeof popupReactiveOptionNames)[number];
type PopupReactiveOptions = {
    [key in PopupReactiveOptionName]?: PopupOptions[key];
};
declare const popupNonReactiveOptionNames: readonly ["focusAfterOpen", "anchor", "subpixelPositioning"];
type PopupNonReactiveOptionName = (typeof popupNonReactiveOptionNames)[number];
type PopupInitialOptions = {
    [key in PopupNonReactiveOptionName as `initial${Capitalize<key>}`]?: PopupOptions[key];
};
declare const RPopup: react.MemoExoticComponent<react.ForwardRefExoticComponent<PopupInitialOptions & PopupReactiveOptions & PopupCallbacks & {
    longitude?: number;
    latitude?: number;
    children?: ReactNode;
} & react.RefAttributes<Popup>>>;

type MarkerShape = "pin" | "circle";
interface GradientMarkerOptions extends MarkerOptions {
    /**
     * when interactive
     * cursor pointer
     * hover effect
     * we add .active class when clicking
     * @default true
     */
    interactive?: boolean;
    shape?: MarkerShape;
    icon?: string | HTMLElement | SVGSVGElement | (() => HTMLElement | SVGSVGElement);
    text?: string;
    className?: string;
}
declare class GradientMarker extends maplibregl.Marker {
    _interactive: boolean | "pending";
    _shape: MarkerShape;
    _icon?: string | HTMLElement | SVGSVGElement | (() => HTMLElement | SVGSVGElement);
    _height: number;
    _text?: string;
    _circleElement: HTMLElement | null;
    _iconElement: HTMLElement | SVGSVGElement | null;
    _textElement: HTMLDivElement | null;
    _markerElement?: HTMLElement;
    constructor(options?: GradientMarkerOptions);
    _onActive: () => void;
    _onInactive: () => void;
    addTo(map: Map): this;
    setInteractive(interactive?: boolean): void;
    getInteractive(): boolean | "pending";
    remove(): this;
    setIcon(icon?: string | HTMLElement | SVGSVGElement | (() => HTMLElement | SVGSVGElement)): this;
    getIcon(): string | HTMLElement | SVGSVGElement | (() => HTMLElement | SVGSVGElement) | undefined;
    resetIconText(): void;
    setText(text?: string): this;
    getText(): string | undefined;
    setColor(color?: string): this;
    getColor(): string;
    setScale(scale?: number, markerHeight?: number): this;
    getScale(): number;
    setShape(shape?: MarkerShape): this;
    getShape(): MarkerShape;
    setDraggable(shouldBeDraggable?: boolean | undefined): this;
}

type GradientMarkerCallbacks = {
    onDragStart?: (e: Event<GradientMarker>) => void;
    onDrag?: (e: Event<GradientMarker>) => void;
    onDragEnd?: (e: Event<GradientMarker>) => void;
    onClick?: (e: MouseEvent) => void;
};
declare const gradientMarkerReactiveOptionNames: readonly ["className", "clickTolerance", "rotation", "rotationAlignment", "pitchAlignment", "opacity", "opacityWhenCovered", "subpixelPositioning", "color", "draggable", "icon", "interactive", "scale", "shape", "text"];
type GradientMarkerReactiveOptionName = (typeof gradientMarkerReactiveOptionNames)[number];
type GradientMarkerReactiveOptions = {
    [key in GradientMarkerReactiveOptionName]?: GradientMarkerOptions[key];
};
declare const markerNonReactiveOptionNames: readonly [];
type GradientMarkerNonReactiveOptionName = (typeof markerNonReactiveOptionNames)[number];
type GradientMarkerInitialOptions = {
    [key in GradientMarkerNonReactiveOptionName as `initial${Capitalize<key>}`]?: GradientMarkerOptions[key];
};
declare const RGradientMarker: react.MemoExoticComponent<react.ForwardRefExoticComponent<GradientMarkerInitialOptions & GradientMarkerReactiveOptions & GradientMarkerCallbacks & {
    longitude: number;
    latitude: number;
} & react.RefAttributes<GradientMarker>>>;

type Point = ReturnType<InstanceType<typeof Map>["project"]>;
interface MaplibreContextmenuEventDetail {
    originalEvent: MouseEvent;
    point: Point;
    lngLat: LngLat;
    emulated: boolean;
}
interface Props {
    customEventName?: string;
    enabled?: boolean;
}
declare function ContextMenuEventAdapter({ customEventName, enabled, }: Props): null;

type MountedState = [boolean, Dispatch<SetStateAction<boolean>>];
declare class MapManagers {
    private _maps;
    private _listeners;
    add(id: string, mapManager: MapManager): void;
    remove(id: string): void;
    get(id: string | null): MapManager | null;
    addListener(id: string, mountedState: MountedState): void;
    removeListener(id: string, [, callback]: MountedState): void;
}

declare const RMapContext: react.Context<MutableRefObject<MapManagers> | null>;
interface RMapContextProviderProps {
    children: ReactNode;
}
declare const RMapContextProvider: ({ children }: RMapContextProviderProps) => react_jsx_runtime.JSX.Element;

declare const CurrentMapIdContext: react.Context<string | null>;

interface MapLibreReactLogoProps {
    height?: number;
}
declare function MapLibreReactLogo({ height }: MapLibreReactLogoProps): react_jsx_runtime.JSX.Element;
interface MrcLogoControlProps {
    position?: ControlPosition;
}
declare const MrcLogoControl: react.NamedExoticComponent<MrcLogoControlProps>;

declare const RAttributionControl: react.MemoExoticComponent<react.ForwardRefExoticComponent<AttributionControlOptions & {
    position?: ControlPosition;
} & react.RefAttributes<IControl>>>;

declare const RFullscreenControl: react.MemoExoticComponent<react.ForwardRefExoticComponent<FullscreenControlOptions & {
    position?: ControlPosition;
} & react.RefAttributes<IControl>>>;

declare const RGeolocateControl: react.MemoExoticComponent<react.ForwardRefExoticComponent<GeolocateControlOptions & {
    position?: ControlPosition;
} & react.RefAttributes<IControl>>>;

type RGlobeControlProps = {
    position?: ControlPosition;
};
declare const RGlobeControl: react.MemoExoticComponent<react.ForwardRefExoticComponent<RGlobeControlProps & react.RefAttributes<IControl>>>;

declare const RLogoControl: react.MemoExoticComponent<react.ForwardRefExoticComponent<LogoControlOptions & {
    position?: ControlPosition;
} & react.RefAttributes<IControl>>>;

declare const RNavigationControl: react.MemoExoticComponent<react.ForwardRefExoticComponent<NavigationControlOptions & {
    position?: ControlPosition;
} & react.RefAttributes<IControl>>>;

declare const RScaleControl: react.MemoExoticComponent<react.ForwardRefExoticComponent<ScaleControlOptions & {
    position?: ControlPosition;
} & react.RefAttributes<IControl>>>;

declare const RTerrainControl: react.MemoExoticComponent<react.ForwardRefExoticComponent<TerrainSpecification & {
    position?: ControlPosition;
} & react.RefAttributes<IControl>>>;

declare function useMap(): Map;
declare function useMap(id: string): Map | null;

declare function filterMapProps(options: MapProps): readonly [MapReactiveOptions, MapCallbacks, MapHandlerOptions];
declare function transformPropsToOptions(props: {
    [k: string]: unknown;
}, optionKeyWhiteList?: string[]): readonly [{
    [k: string]: unknown;
}, {
    [k: string]: unknown;
}];
declare function prepareEventDep(eventNameToCallbackName: {
    [k: string]: string;
}, callbacks: {
    [eventName: string]: unknown;
}): string[];
/**
 * from : react-map-gl/src/utils/deep-equal.ts
 * Compare any two objects
 * @param a
 * @param b
 * @returns true if the objects are deep equal
 */
declare function deepEqual(a: any, b: any): boolean;
interface LngLatObj {
    lng: number;
    lat: number;
}
declare function areLngLatClose(lngLat1?: LngLatObj, lngLat2?: LngLatObj): boolean;
declare function areCoordsClose(coords1?: LngLatLike, coords2?: LngLatLike): boolean;
declare function lngLatClassToObj(lngLat: LngLat): {
    lng: number;
    lat: number;
};
declare function arePointsEqual(a?: PointLike, b?: PointLike): boolean;
declare function updateClassNames(elt: HTMLElement, prevClassNames: string[], nextClassNames: string[]): void;
declare function updateListeners(prevEventTypes: string[], nextEventTypes: string[], onSubscribe: (eventName: string) => void, onUnsubscribe: (eventName: string) => void): void;
declare const markerPopupOffset: Offset;
declare const gradientMarkerPopupOffset: Offset;
declare const emptyStyle: StyleSpecification;
declare function uniqueId(): string;

declare function useMapManager(): MapManager;
declare function useMapManager(id: string): MapManager | null;

type RControlHookOptions<T extends string = ControlPosition> = {
    position: T;
    className?: string;
};
type RControlHookReturn = {
    container: HTMLDivElement;
};
declare function useRControl<T extends string = ControlPosition>({ position, className, }: RControlHookOptions<T>): RControlHookReturn;

type ControlHookOptions = {
    position: ControlPosition;
    factory: (map: Map) => IControl;
    onRemove?: (map: Map) => void;
};
type ControlHookReturn = IControl;
declare function useControl({ position, factory, onRemove, }: ControlHookOptions): ControlHookReturn;

type useMapAndCanvasRefsReturn = {
    mapRef: MutableRefObject<Map>;
    canvasRef: MutableRefObject<HTMLElement>;
    setMapAndCanvasRef: (map: Map) => void;
};
declare const useMapAndCanvasRefs: () => useMapAndCanvasRefsReturn;

declare const useCanvasRef: () => react.MutableRefObject<HTMLElement>;

export { ContextMenuEventAdapter, CurrentMapIdContext, type Event, GradientMarker, MapLibreReactLogo, MapManager, type MaplibreContextmenuEventDetail, MrcLogoControl, RAttributionControl, RFullscreenControl, RGeolocateControl, RGlobeControl, RGradientMarker, RLayer, RLogoControl, RMap, RMapContext, RMapContextProvider, RMarker, RNavigationControl, RPopup, RScaleControl, RSource, RTerrain, RTerrainControl, areCoordsClose, areLngLatClose, arePointsEqual, deepEqual, emptyStyle, filterMapProps, gradientMarkerPopupOffset, lngLatClassToObj, markerPopupOffset, prepareEventDep, transformPropsToOptions, uniqueId, updateClassNames, updateListeners, useCanvasRef, useControl, useMap, useMapAndCanvasRefs, useMapManager, useRControl };