import 'leaflet/dist/leaflet.css';
import L, { type ControlPosition, type LatLngLiteral } from 'leaflet';
import React, { type PropsWithChildren } from 'react';
import { type MapContainerProps } from 'react-leaflet';
import { type ThemedClassName } from '@dxos/react-ui';
import { type GeoMarker } from '../../types';
import { type ControlProps } from '../Toolbar';
type MapController = {
    getCenter: () => LatLngLiteral | undefined;
    getZoom: () => number | undefined;
    setCenter: (center: LatLngLiteral, zoom?: number) => void;
    setZoom: (cb: (zoom: number) => number) => void;
};
type MapContextValue = {
    attention?: boolean;
    onChange?: (ev: {
        center: LatLngLiteral;
        zoom: number;
    }) => void;
    /** Called by Map.Viewport to register/unregister the leaflet map with the controller owned by Map.Root. */
    registerMap: (map: L.Map | null) => void;
};
type MapRootProps = PropsWithChildren<Pick<MapContextValue, 'onChange'>>;
type MapViewportProps = ThemedClassName<Omit<MapContainerProps, 'children'> & PropsWithChildren>;
/** Default OpenStreetMap raster tile template. */
export declare const DEFAULT_TILE_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
type MapTilesProps = {
    /** Leaflet tile URL template (e.g. a MapTiler style endpoint with an API key). Defaults to OpenStreetMap. */
    url?: string;
};
declare function MapTiles({ url }: MapTilesProps): React.JSX.Element;
declare namespace MapTiles {
    var displayName: string;
}
type MapMarkersProps = {
    markers?: GeoMarker[];
    /** Connecting lines (e.g. a route). Used here only to extend the viewport fit; drawn by `Map.Lines`. */
    lines?: MapLine[];
    selected?: string[];
    /** Invoked with the marker id when a marker is clicked. */
    onSelect?: (id: string) => void;
};
declare function MapMarkers({ selected, markers, lines, onSelect }: MapMarkersProps): React.JSX.Element;
declare namespace MapMarkers {
    var displayName: string;
}
/** A connecting line between two points (e.g. a route leg). `color` is any CSS/Leaflet stroke color. */
export type MapLine = {
    source: LatLngLiteral;
    target: LatLngLiteral;
    color?: string;
};
type MapLinesProps = {
    lines?: MapLine[];
};
declare function MapLines({ lines }: MapLinesProps): React.JSX.Element;
declare namespace MapLines {
    var displayName: string;
}
type MapControlProps = {
    position?: ControlPosition;
} & Pick<ControlProps, 'onAction'>;
export declare const Map: {
    Root: React.ForwardRefExoticComponent<Pick<MapContextValue, "onChange"> & {
        children?: React.ReactNode | undefined;
    } & React.RefAttributes<MapController>>;
    Viewport: React.ForwardRefExoticComponent<Omit<MapViewportProps, "className"> & {
        classNames?: import("@dxos/ui-types").ClassNameValue;
    } & Pick<React.HTMLAttributes<Element>, "children" | "className" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
    Tiles: {
        ({ url }: MapTilesProps): React.JSX.Element;
        displayName: string;
    };
    Markers: {
        ({ selected, markers, lines, onSelect }: MapMarkersProps): React.JSX.Element;
        displayName: string;
    };
    Lines: {
        ({ lines }: MapLinesProps): React.JSX.Element;
        displayName: string;
    };
    Zoom: ({ onAction, position, ...props }: MapControlProps) => React.JSX.Element;
    Action: ({ onAction, position, ...props }: MapControlProps) => React.JSX.Element;
};
export { type MapController, type MapRootProps, type MapViewportProps, type MapTilesProps, type MapMarkersProps, type MapLinesProps, type MapControlProps, };
//# sourceMappingURL=Map.d.ts.map