@yandex/ymaps3-types

import type { BehaviorType, LngLat, MapMode, Margin, PixelCoordinates, Projection, ReadonlyLngLat, LngLatBounds, ZoomRange, ZoomRounding, WorldOptions, ZoomStrategy, EasingFunctionDescription, TiltRange } from "../../common/types"; import type { YMapEntity } from "../YMapEnities"; import { GenericRootEntity } from "../Entities"; import { YMapCopyrightsPosition } from "../YMapCopyrights"; import { Config } from "../config"; import { YMapTheme } from "../ThemeContext"; import { overrideKeyReactify } from "../wrappers"; /** * Sets map center. In this case, the zoom of the map remains unchanged. * ```javascript * map.update({ * location: {center: [-0.118092, 51.509865]} * }); * ``` */ export type YMapCenterLocation = { center: LngLat; }; /** * Sets map zoom. In this case, the center of the map remains unchanged. * ```javascript * map.update({ * location: {zoom: 10} * }); * ``` */ export type YMapZoomLocation = { zoom: number; }; /** * Calculate the center and zoom by specifying the coordinates of the top left and bottom right corners of the map. * In this case, the center of the map will be in the center of the rectangle described at the given coordinates. * If the map have an aspect ratio different from this rectangle, the rectangle will be inscribed in height and the map will be centered in width. * ```javascript * map.update({ * location: {bounds: [[-0.118092, 51.509865], [-0.118092, 51.509865]]} * }); * ``` */ export type YMapBoundsLocation = { bounds: LngLatBounds; }; /** * Sets map center and zoom. Combination of YMapCenterLocation and YMapZoomLocation * ```javascript * map.update({ * location: {center: [-0.118092, 51.509865], zoom: 10} * }); * ``` */ export type YMapCenterZoomLocation = YMapCenterLocation & YMapZoomLocation; /** * Union type for describing the position of the map through the center and zoom or through the bounds of the map */ export type YMapLocation = YMapCenterZoomLocation & Partial<YMapBoundsLocation>; /** * Observer camera position */ export type YMapCamera = { /** Map tilt in radians. Can take values from 0 to 50 degrees (degrees * (Math.PI / 180)) */ tilt?: number; /** Map rotation in radians. Can take values from -Math.PI to Math.PI */ azimuth?: number; }; /** * Describes how to change current map location. Change can be instantaneous or animated if duration property is set. * ```javascript * map.update({ * location: { * center: [-0.118092, 51.509865], // Center of the map * zoom: 10, // Zoom level * duration: 200, // Animation of moving map will take 200 milliseconds * easing: 'ease-in-out' // Animation easing function * } * }); * ``` * or just change center of the map * ```javascript * map.update({ * location: { * center: [-0.118092, 51.509865], // Center of the map * duration: 200, // Animation of moving map will take 200 milliseconds * easing: 'linear' // Animation easing function * } * })'; * ``` */ export type YMapLocationRequest = (YMapBoundsLocation | YMapCenterLocation | YMapZoomLocation | YMapCenterZoomLocation) & { /** Animation duration */ duration?: number; /** Animation easing function */ easing?: EasingFunctionDescription; }; /** * Describes how to change current camera position. Change can be instantaneous or animated if duration property is set. * ```javascript * map.update({camera: { * tilt: 45 * (Math.PI / 180), // 45 degrees * azimuth: 30 * (Math.PI / 180) // 30 degrees * duration: 200, // Animation of moving camera will take 200 milliseconds * easing: 'ease-in-out' * }}); * ``` */ export type YMapCameraRequest = YMapCamera & { /** Animation duration */ duration?: number; /** Animation easing function */ easing?: EasingFunctionDescription; }; /** * Map settings. Allow to set map mode, behaviors, margin, zoom rounding, zoom range, restrict map area, theme and other settings. * ```javascript * const map = new YMap(document.getElementById('map-root'), { * className: 'custom-map', * location: {center: [-0.118092, 51.509865], zoom: 10}, * camera: {tilt: 45 * (Math.PI / 180), azimuth: 30 * (Math.PI / 180)} * mode: 'raster', * behaviors: ['drag', 'scrollZoom', 'dblClick', 'mouseRotate', 'mouseTilt'], * margin: [0, 100, 0, 0], * theme: 'light' * }); * ``` * But required only `location` prop. * ```javascript * const map = new YMap(document.getElementById('map-root'), { * location: {center: [-0.118092, 51.509865], zoom: 10} * }); * ``` */ export type YMapProps = { /** Map container css class name */ className?: string; /** Initial location or request to change location with duration */ location: YMapLocationRequest; /** Initial camera or request to change camera with duration */ camera?: YMapCameraRequest; /** Map mode, 'auto' (default. Show raster tiles while vector tiles are loading), 'raster' or 'vector' (without raster preloading). */ mode?: MapMode; /** Active behaviors */ behaviors?: BehaviorType[]; /** Sets the map view area so that the user cannot move outside of this area. */ restrictMapArea?: LngLatBounds | false; /** Restrict min and max map zoom */ zoomRange?: ZoomRange; /** Zoom strategy describes if map center is bound to the zoom point or not */ zoomStrategy?: ZoomStrategy; /** Set rounding for zoom. If `auto` is selected, zoom will be `snap` for `raster` and `smooth` for `vector` `MapMode`. Default is `auto`.*/ zoomRounding?: ZoomRounding; /** Map margins */ margin?: Margin; /** Other configs */ config?: Config; /** Strategy for fetching hotspots, for whole viewport or for tiles that pointer is hovering at */ hotspotsStrategy?: "forViewport" | "forPointerPosition"; /** Position of copyright on the page. Default is 'bottom right' */ copyrightsPosition?: YMapCopyrightsPosition; /** Show the map scale next to copyright */ showScaleInCopyrights?: boolean; /** * Projection used in map */ projection?: Projection; /** * Whether to repeat the world in X and Y */ worldOptions?: WorldOptions; /** Theme applied to the scheme */ theme?: YMapTheme; }; declare const defaultProps: Readonly<{ className: ""; camera: { tilt: number; azimuth: number; }; mode: "auto"; zoomRounding: "auto"; hotspotsStrategy: "forViewport" | "forPointerPosition"; zoomRange: ZoomRange; zoomStrategy: "zoomToPointer"; behaviors: string[]; margin: Margin | undefined; copyrights: true; copyrightsPosition: "bottom right"; showScaleInCopyrights: false; worldOptions: { cycledX: boolean; cycledY: boolean; }; restrictMapArea: false; readonly config: Config; projection: Projection; theme: "light"; }>; type DefaultProps = typeof defaultProps; /** * Main API class. Create a map container. * * @example * ```javascript * const map = new YMap( * document.getElementById('map-root'), * {location: {center: [-0.118092, 51.509865], zoom: 10}} * ); * // add default Yandex scheme layer * map.addChild(new YMapDefaultSchemeLayer()); * // relocate map to another point with animation in 200 milliseconds * map.setLocation({center: [48.707067, 44.516975], duration: 200}); * // change mode from default `auto` to `raster` * map.setMode('raster'); * // get map zoom for some calculations * const zoom = map.zoom; * ``` */ declare class YMap extends GenericRootEntity<YMapProps, DefaultProps> { #private; static defaultProps: Readonly<{ className: ""; camera: { tilt: number; azimuth: number; }; mode: "auto"; zoomRounding: "auto"; hotspotsStrategy: "forViewport" | "forPointerPosition"; zoomRange: ZoomRange; zoomStrategy: "zoomToPointer"; behaviors: string[]; margin: Margin | undefined; copyrights: true; copyrightsPosition: "bottom right"; showScaleInCopyrights: false; worldOptions: { cycledX: boolean; cycledY: boolean; }; restrictMapArea: false; readonly config: Config; projection: Projection; theme: "light"; }>; static [overrideKeyReactify]: import("../../reactify/reactify").CustomReactify<YMap, import("react").ForwardRefExoticComponent<{ className?: string | undefined; location: YMapLocationRequest; camera?: YMapCameraRequest | undefined; mode?: MapMode | undefined; behaviors?: BehaviorType[] | undefined; restrictMapArea?: false | LngLatBounds | undefined; zoomRange?: ZoomRange | undefined; zoomStrategy?: ZoomStrategy | undefined; zoomRounding?: ZoomRounding | undefined; margin?: Margin | undefined; config?: Config | undefined; hotspotsStrategy?: "forViewport" | "forPointerPosition" | undefined; copyrights?: boolean | undefined; copyrightsPosition?: YMapCopyrightsPosition | undefined; showScaleInCopyrights?: boolean | undefined; projection?: Projection | undefined; worldOptions?: WorldOptions | undefined; theme?: YMapTheme | undefined; tiltRange?: TiltRange | undefined; children?: import("react").ReactNode; ref?: import("react").Ref<YMap> | undefined; key?: import("react").Key | null | undefined; }>>; private readonly _rootContainer; private readonly _container; private readonly _resizeObserver; private _vectorInitFailed; private __abortVectorLoad?; private _layers; private _copyrights; private _isDestroyed; private _isVectorLoading; constructor(rootContainer: HTMLElement, props: YMapProps, children?: YMapEntity<unknown>[]); readonly children: YMapEntity<unknown>[]; addChild(child: YMapEntity<unknown>, index?: number): this; removeChild(child: YMapEntity<unknown>): this; private _canBeMainLayer; private _prepareLayersToSet; private _filterLayers; private _upsertLayer; private _removeLayer; /** * Main map container */ get container(): HTMLElement; /** * getter for {@link YMapProps}.location.center prop */ get center(): ReadonlyLngLat; /** * getter for {@link YMapProps}.location.zoom prop */ get zoom(): number; get tilt(): number; get azimuth(): number; /** * getter for {@link YMapProps}.location.bounds prop */ get bounds(): LngLatBounds; /** * getter for {@link YMapProps}.zoomRange prop */ get zoomRange(): Readonly<ZoomRange>; get tiltRange(): Readonly<TiltRange>; /** * getter for {@link YMapProps}.projection prop */ get projection(): Projection; /** * getter for map size */ get size(): PixelCoordinates; /** * getter for {@link YMapProps}.behaviors prop */ get behaviors(): Readonly<BehaviorType[]>; /** * getter for {@link YMapProps}.config prop */ get config(): Readonly<Config>; /** * getter for {@link YMapProps}.restrictMapArea prop */ get restrictMapArea(): Readonly<LngLatBounds | false>; /** * getter for {@link YMapProps}.theme prop */ get theme(): "light" | "dark"; /** * setter for {@link YMapProps}.location prop * @param location */ setLocation(location: YMapLocationRequest): void; /** * setter for {@link YMapProps}.camera prop * @param camera */ setCamera(camera: YMapCameraRequest): void; private __setLocation; /** * setter for {@link YMapProps}.mode prop * @param {MapMode} mode */ setMode(mode: MapMode): void; /** * setter for {@link YMapProps}.zoomRange prop * @param {ZoomRange} zoomRange */ setZoomRange(zoomRange: ZoomRange): void; /** * setter for {@link YMapProps}.behaviors prop * @param {BehaviorType[]} behaviors */ setBehaviors(behaviors: BehaviorType[]): void; /** * setter for {@link YMapProps}.zoomRounding prop * @param {ZoomRounding} zoomRounding */ setZoomRounding(zoomRounding: ZoomRounding): void; /** * setter for {@link YMapProps}.margin prop * @param {Margin} margin */ setMargin(margin: Margin): void; /** * setter for {@link YMapProps}.config prop * @param {Config} config */ setConfig(config: Config): void; /** * setter for {@link YMapProps}.projection prop * @param {Projection} projection */ setProjection(projection: Projection): void; /** * setter for {@link YMapProps}.config prop * @param {LngLatBounds} restrictMapArea */ setRestrictMapArea(restrictMapArea: LngLatBounds): void; /** * Destroy map and remove it from user DOM-element */ destroy(): void; private _createMap; private get _correctMode(); protected _onUpdate(propsDiff: Partial<YMapProps>): void; private _loadVector; private __onVectorInitFailed; private __loadVectorEngine; private __toggleCopyrights; private setTheme; } export { YMap };