@yandex/ymaps3-types
Version:
Types for ymaps3 maps library
156 lines (155 loc) • 7.04 kB
TypeScript
import type { HideOutsideRule, LngLat } from "../../common/types";
import type { BlockingProps, DraggableProps, FeatureClickEvents } from "../YMapFeature/types";
import { YMapGroupEntity } from "../YMapEnities";
import { overrideKeyReactify } from "../wrappers";
/**
* YMapMarker events handler
*/
type YMapMarkerEventHandler = (coordinates: LngLat) => void | false;
/**
* YMapMarker props
*/
type YMapMarkerProps = {
/** Coordinates of the marker */
coordinates: LngLat;
source?: string;
/** z index of the marker, defaults to 0 */
zIndex?: number;
properties?: Record<string, unknown>;
id?: string;
/** Do not round coordinates */
disableRoundCoordinates?: boolean;
/**
* Hide the marker if it goes beyond the edge of the viewport.
* Two modes of operation are supported true and {extent: number}
* ```js
* const marker = new YMapMarker({
* //...,
* hideOutsideViewport: true
* })
* ```
* A point element will be removed from the map to optimize DOM size if its coordinates are 100px outside the visible area of the map.
* For most markers, this is sufficient.
* But for very large markers, this can cause an unpleasant blinking effect.
*
* ```js
* const marker = new YMapMarker({
* //...,
* hideOutsideViewport: {
* extent: 1000
* }
* })
* ```
* A point will be removed from the map if its coordinates are 1000px outside the visible area of the map.
*/
hideOutsideViewport?: HideOutsideRule;
} & DraggableProps<YMapMarkerEventHandler> & BlockingProps & FeatureClickEvents;
declare const defaultProps: Readonly<{
draggable: false;
mapFollowsOnDrag: false;
blockEvents: false;
blockBehaviors: false;
hideOutsideViewport: false;
zIndex: 0;
source: "ymaps3x0-default-feature";
}>;
type DefaultProps = typeof defaultProps;
/**
* The marker component on the map. Allows you to insert your own DOM implementation of the marker.
* > Does not provide a default implementation. See `YMapDefaultMarker` from [@yandex/ymaps3-default-ui-theme](https://www.npmjs.com/package/@yandex/ymaps3-default-ui-theme)
*
* @example
* ```javascript
* const content = document.createElement('div');
* content.innerHTML = '<p>Draggable paragraph</p>';
* map.addChild(new YMapDefaultFeaturesLayer({zIndex: 1800}))
* map.addChild(new YMapMarker({
* coordinates: [37, 55],
* draggable: true
* }, content));
*```
* > Note: to insert a marker on the map, you need a [[YMapLayer]] layer with type 'markers'.
* The example above uses [[YMapDefaultFeaturesLayer]], which automatically adds the layer and the required datasource.
*/
declare class YMapMarker extends YMapGroupEntity<YMapMarkerProps, DefaultProps> {
static defaultProps: Readonly<{
draggable: false;
mapFollowsOnDrag: false;
blockEvents: false;
blockBehaviors: false;
hideOutsideViewport: false;
zIndex: 0;
source: "ymaps3x0-default-feature";
}>;
static [overrideKeyReactify]: import("../../reactify/reactify").CustomReactify<YMapMarker, import("react").ForwardRefExoticComponent<{
coordinates: LngLat;
source?: string | undefined;
zIndex?: number | undefined;
properties?: Record<string, unknown> | undefined;
id?: string | undefined;
disableRoundCoordinates?: boolean | undefined;
hideOutsideViewport?: HideOutsideRule | undefined;
draggable?: boolean | undefined;
mapFollowsOnDrag?: boolean | {
activeZoneMargin?: import("../../common/types/margin").Margin | undefined;
} | undefined;
onDragStart?: YMapMarkerEventHandler | undefined;
onDragEnd?: YMapMarkerEventHandler | undefined;
onDragMove?: YMapMarkerEventHandler | undefined;
blockEvents?: boolean | undefined;
blockBehaviors?: boolean | undefined;
onDoubleClick?: ((event: MouseEvent, mapEvent: import("../YMapFeature/types").MapEvent) => void) | undefined;
onClick?: ((event: MouseEvent, mapEvent: import("../YMapFeature/types").MapEvent) => void) | undefined;
onFastClick?: ((event: MouseEvent, mapEvent: import("../YMapFeature/types").MapEvent) => void) | undefined;
markerElement?: HTMLElement | undefined;
children?: import("react").ReactNode;
ref?: import("react").Ref<import("../Entities").GenericEntity<{
/** Coordinates of the marker */
coordinates: LngLat;
source?: string | undefined;
/** z index of the marker, defaults to 0 */
zIndex?: number | undefined;
properties?: Record<string, unknown> | undefined;
id?: string | undefined;
/** Do not round coordinates */
disableRoundCoordinates?: boolean | undefined;
/**
* Hide the marker if it goes beyond the edge of the viewport.
* Two modes of operation are supported true and {extent: number}
* ```js
* const marker = new YMapMarker({
* //...,
* hideOutsideViewport: true
* })
* ```
* A point element will be removed from the map to optimize DOM size if its coordinates are 100px outside the visible area of the map.
* For most markers, this is sufficient.
* But for very large markers, this can cause an unpleasant blinking effect.
*
* ```js
* const marker = new YMapMarker({
* //...,
* hideOutsideViewport: {
* extent: 1000
* }
* })
* ```
* A point will be removed from the map if its coordinates are 1000px outside the visible area of the map.
*/
hideOutsideViewport?: HideOutsideRule | undefined;
} & DraggableProps<YMapMarkerEventHandler> & BlockingProps & FeatureClickEvents & {
markerElement?: HTMLElement | undefined;
}, {}, import("../Entities").GenericRootEntity<unknown, {}>>> | undefined;
key?: import("react").Key | null | undefined;
}>>;
readonly element: HTMLElement;
private _destroyDomCtx?;
private __feature?;
get properties(): Record<string, unknown> | undefined;
get coordinates(): LngLat;
constructor(props: YMapMarkerProps, element?: HTMLElement);
_onAttach(): void;
_onDetach(): void;
protected _onUpdate({ coordinates, zIndex, ...props }: Partial<YMapMarkerProps>): void;
}
export { YMapMarker, YMapMarkerProps, YMapMarkerEventHandler };