Clusterer
- Class: YMapClusterer
- Class: Config
- Class: Context<_T>
- Class: GenericComplexEntity<Props, DefaultProps, Root>
- Class: GenericEntity<Props, DefaultProps, Root>
- Class: GenericGroupEntity<Props, DefaultProps, Root>
- Class: GenericRootEntity<Props, DefaultProps>
- Class: YMap
- Class: YMapComplexEntity<Props, DefaultProps>
- Class: YMapEntity<Props, DefaultProps>
- Interface: IClusterMethod
- Interface: Apikeys
- Interface: ComplexOptions<Root>
- Interface: GenericFeature<TCoordinates>
- Interface: GenericLineStringGeometry<TCoordinates>
- Interface: GenericMultiLineStringGeometry<TCoordinates>
- Interface: GenericMultiPolygonGeometry<TCoordinates>
- Interface: GenericPointFeature<TCoordinates>
- Interface: GenericPointGeometry<TCoordinates>
- Interface: GenericPolygonGeometry<TCoordinates>
- Interface: GenericProjection<TSource>
- Interface: PixelCoordinates
- Interface: ReactParent
- Interface: TiltRange
- Interface: Vec2
- Interface: VuefyModuleFn
- Interface: WorldCoordinates
- Interface: WorldOptions
- Interface: ZoomRange
- Module: <internal>
Примечание
Using the clusterer helps to display a large number of markers on the map.
When the scale of the map is increased, individual markers are combined into a cluster;
when the map is scaled down, the cluster breaks up into individual markers.
Example 1: Creating a Map and adding a Clusterer to the Map
We declare a variable for the map, load the ymaps3 library, extract the necessary classes.
window.map = null;
async function main() {
await ymaps3.ready;
const {YMap, YMapDefaultSchemeLayer, YMapMarker, YMapLayer, YMapFeatureDataSource} = ymaps3;
//...
}
We load the package with the clusterer, extract the classes for creating clusterer objects and the clustering method.
const {YMapClusterer, clusterByGrid} = await ymaps3.import('@yandex/ymaps3-clusterer@0.0.1');
Create and add to the map a layer with a default schema, data sources, a layer of markers.
map = new YMap(document.getElementById('app'), {location: {center: [37.62, 55.62], zoom: 10}});
map
.addChild(new YMapDefaultSchemeLayer())
.addChild(new YMapFeatureDataSource({id: 'my-source'}))
.addChild(new YMapLayer({source: 'my-source', type: 'markers', zIndex: 1800}));
You can set any markup for the marker and for the cluster.
const contentPin = document.createElement('div');
contentPin.innerHTML = '<img src="./pin.svg" />';
We declare the function for rendering ordinary markers, we will submit it to the clusterer settings.
Note that the function must return any Entity element. In the example, this is ymaps3.YMapMarker.
const marker = (feature) =>
new ymaps3.YMapMarker(
{
coordinates: feature.geometry.coordinates,
source: 'my-source'
},
contentPin.cloneNode(true)
);
As for ordinary markers, we declare a cluster rendering function that also returns an Entity element.
const cluster = (coordinates, features) =>
new ymaps3.YMapMarker(
{
coordinates,
source: 'my-source'
},
circle(features.length).cloneNode(true)
);
function circle(count) {
const circle = document.createElement('div');
circle.classList.add('circle');
circle.innerHTML = `
<div class="circle-content">
<span class="circle-text">${count}</span>
</div>
`;
return circle;
}
Let's declare an array with marker coordinates, then create an array of features with the appropriate interface. We will pass it to the clusterer settings.
const coordinates = [
[37.64, 55.76],
[37.63, 55.7],
[37.43, 55.69],
[37.47, 55.68],
[38.53, 58.6],
[37.59, 55.71],
[37.5, 55.63],
[37.52, 55.57],
[37.52, 58.57],
[40.52, 58.57]
];
const points = coordinates.map((lnglat, i) => ({
type: 'Feature',
id: i,
geometry: {coordinates: lnglat},
properties: {name: 'Point of issue of orders'}
}));
We create a clusterer object and add it to the map object.
As parameters, we pass the clustering method, an array of features, the functions for rendering markers and clusters.
For the clustering method, we will pass the size of the grid division in pixels.
const clusterer = new YMapClusterer({
method: clusterByGrid({gridSize: 64}),
features: points,
marker,
cluster
});
map.addChild(clusterer);
}
Example 2. Using a Clusterer with React JS
We declare a variable for the map, load the ymaps3 library, extract the necessary classes.
window.map = null;
main();
async function main() {
await ymaps3.ready;
const ymaps3React = await ymaps3.import('@yandex/ymaps3-reactify');
const reactify = ymaps3React.reactify.bindTo(React, ReactDOM);
const {
YMap,
YMapDefaultSchemeLayer,
YMapLayer,
YMapFeatureDataSource,
YMapMarker
} = reactify.module(ymaps3);
We connect the package with the clusterer, extract the classes for creating clusterer objects and the clustering method.
const {YMapClusterer, clusterByGrid} = reactify.module(await ymaps3.import('@yandex/ymaps3-clusterer@0.0.1'));
We extract the necessary hooks. Let's declare an array with marker coordinates, then create an array of features with the appropriate interface.
We will pass it to the clusterer settings.
const {useCallback, useMemo} = React;
const coordinates = [
[37.64, 55.76],
[37.63, 55.7],
[37.43, 55.69],
[37.47, 55.68],
[38.53, 58.6],
[37.59, 55.71],
[37.5, 55.63],
[37.52, 55.57],
[37.52, 58.57],
[40.52, 58.57]
];
const points = coordinates.map((lnglat, i) => ({
type: 'Feature',
id: i,
geometry: {coordinates: lnglat},
properties: {name: 'Point of issue of orders'}
}));
We declare a render function. For the clustering method, we pass and store the size of one grid division in pixels.
function App() {
const gridSizedMethod = useMemo(() => clusterByGrid({ gridSize: 64 }), []);
// ...
}
We declare a function for rendering ordinary markers. Note that the function must return any Entity element. In the example, this is ymaps3.YMapMarker.
const marker = useCallback(
(feature) => (
<YMapMarker coordinates={feature.geometry.coordinates} source={'my-source'}>
<img src={'./pin.svg'} />
</YMapMarker>
),
[]
);
We declare a cluster rendering function that also returns an Entity element. We will transfer the marker and cluster rendering functions to the clusterer settings.
const cluster = useCallback(
(coordinates, features) => (
<YMapMarker coordinates={coordinates} source={'my-source'}>
<div className="circle">
<div className="circle-content">
<span className="circle-text">{features.length}</span>
</div>
</div>
</YMapMarker>
),
[]
);
We return JSX, in which we render the components of the map, the default layer, data sources, the layer for markers and the clusterer.
In the clusterer props, we pass the previously declared functions for rendering markers and clusters, the clustering method, and an array of features.
return <React.Fragment>
<YMap location={LOCATION} ref={x => map = x}>
<YMapDefaultSchemeLayer />
<YMapFeatureDataSource id="my-source"/>
<YMapLayer source="my-source" type="markers" zIndex={1800}/>
<YMapClusterer
marker={marker}
cluster={cluster}
method={gridSizedMethod}
features={points}
/>
</YMap>
</React.Fragment>;
// ...
ReactDOM.render(<App />, document.getElementById("app"));
}
Class: YMapClusterer
Display clustered features on a map.
Example
const clusterer = new YMapClusterer({
method: clusterByGrid({gridSize: 64}),
features: POINTS,
marker: (feature) => new YMapMarker({
coordinates: feature.geometry.coordinates,
source: 'my-source'
}
cluster: (coordinates, cluster) => new YMapMarker({
coordinates,
source: 'my-source'
}
});
map.addChild(new YMapDefaultSchemeLayer())
.addChild(new YMapFeatureDataSource({id: 'my-source'}))
.addChild(new YMapLayer({source: 'my-source', type: 'markers'}))
.addChild(clusterer);
Constructors
constructor
new YMapClusterer(props
)
Parameters
Name | Type |
---|---|
props |
YMapClustererProps |
Overrides
Properties
[optionsKeyVuefy]
static [optionsKeyVuefy]: CustomVuefyOptions<YMapClusterer, YMapClustererProps>
[overrideKeyReactify]
static [overrideKeyReactify]: CustomReactify<YMapClusterer, ForwardRefExoticComponent<{
cluster: (`coordinates`: LngLat, `features`: Feature[]) => ReactElement<any, string | JSXElementConstructor<any>>;
features: Feature[];
key?: null | Key;
marker: (`feature`: Feature) => ReactElement<any, string | JSXElementConstructor<any>>;
maxZoom?: number;
method: IClusterMethod;
onRender?: (`clusters`: ClustererObject[]) => false | void;
ref?: Ref<YMapEntity<{
cluster: (`coordinates`: LngLat, `features`: Feature[]) => ReactElement<any, string | JSXElementConstructor<any>>;
features: Feature[];
marker: (`feature`: Feature) => ReactElement<any, string | JSXElementConstructor<any>>;
maxZoom?: number;
method: IClusterMethod;
onRender?: (`clusters`: ClustererObject[]) => false | void;
tickTimeout?: number
}, {}>>;
tickTimeout?: number
}>>
[overrideKeyVuefy]
static [overrideKeyVuefy]: CustomVuefyFn<YMapClusterer, YMapClustererProps>
defaultProps
static defaultProps: Readonly<{
tickTimeout: 200
}>
Accessors
parent
get
parent(): null
| YMapComplexEntity
<unknown
, {}>
Get parent entity.
Returns
null
| YMapComplexEntity
<unknown
, {}>
Inherited from
ymaps3.YMapComplexEntity.parent
root
get
root(): null
| YMap
Get root entity.
Returns
null
| YMap
Inherited from
ymaps3.YMapComplexEntity.root
Methods
update
update(changedProps
): void
Method for updating props of Entity.
Parameters
Name | Type | Description |
---|---|---|
changedProps |
Partial <YMapClustererProps > |
New props values. |
Returns
void
Inherited from
Class: Config
Configuration object for whole API.
For example, it can be used to set experiments or apikeys.
ymaps3.getDefaultConfig().setApikeys({search: "YOUR_SEARCH_API_KEY"})`.
Constructors
constructor
new Config()
Properties
description
readonly description: string
Methods
setApikeys
setApikeys(apikeys
): void
Set apikeys for http-services.
ymaps3.getDefaultConfig().setApikeys({search: "YOUR_SEARCH_API_KEY"})`.
Parameters
Name | Type |
---|---|
apikeys |
Apikeys |
Returns
void
setExperiments
setExperiments(experiments
): void
Set experiments for map.
Parameters
Name | Type |
---|---|
experiments |
Record <string , boolean > |
Returns
void
Class: Context<_T>
Type parameters
Name |
---|
_T |
Constructors
constructor
new Context<_T
>(name
)
Type parameters
Name |
---|
_T |
Parameters
Name | Type |
---|---|
name |
string |
Properties
name
readonly name: string
Class: GenericComplexEntity<Props, DefaultProps, Root>
Entity that aggregates multiple Entities but looks basic from the outside.
Example
type YMapSomeComplexEntityProps = {
name?: string;
};
const defaultProps = {
name: 'entity'
};
class YMapSomeComplexEntity extends GenericComplexEntity<YMapSomeComplexEntityProps, typeof defaultProps> {
static defaultProps = defaultProps;
private _someEntity?: YMapSomeEntity; // YMapSomeEntity extends GenericEntity
protected _onAttach(): void {
this._someEntity = new YMapSomeEntity();
this.addChild(this._someEntity); // add someEntity as children
// ...
}
// ...
}
Type parameters
Name | Type | Description |
---|---|---|
Props |
Props |
Type of input props of the Entity. |
DefaultProps |
extends Object = {} |
Type of default input props of the Entity. |
Root |
extends GenericRootEntity <unknown > = GenericRootEntity <unknown > |
Root Entity Class. |
Constructors
constructor
new GenericComplexEntity<Props
, DefaultProps
, Root
>(props
, options?
)
Type parameters
Name | Type |
---|---|
Props |
Props |
DefaultProps |
extends Object = {} |
Root |
extends GenericRootEntity <unknown , {}, Root > = GenericRootEntity <unknown , {}> |
Parameters
Name | Type | Description |
---|---|---|
props |
Props |
The value of input props. |
options? |
ComplexOptions <Root > |
Optional options object. |
Overrides
new GenericComplexEntity<Props
, DefaultProps
, Root
>(props
, children?
, options?
)
Type parameters
Name | Type |
---|---|
Props |
Props |
DefaultProps |
extends Object = {} |
Root |
extends GenericRootEntity <unknown , {}, Root > = GenericRootEntity <unknown , {}> |
Parameters
Name | Type |
---|---|
props |
Props |
children? |
GenericEntity <unknown , {}, Root >[] |
options? |
Omit <ComplexOptions <Root >, "children" > |
Overrides
GenericEntity<Props, DefaultProps, Root>.constructor
Accessors
parent
get
parent(): null
| GenericComplexEntity
<unknown
, {}, GenericRootEntity
<unknown
, {}>>
Get parent entity.
Returns
null
| GenericComplexEntity
<unknown
, {}, GenericRootEntity
<unknown
, {}>>
Inherited from
GenericEntity.parent
root
get
root(): null
| Root
Get root entity.
Returns
null
| Root
Inherited from
GenericEntity.root
Methods
update
update(changedProps
): void
Method for updating props of Entity.
Parameters
Name | Type | Description |
---|---|---|
changedProps |
Partial <Props > |
New props values. |
Returns
void
Inherited from
Class: GenericEntity<Props, DefaultProps, Root>
Entity Base Class. It has event handlers for attaching, detaching and updating props. Has a method for providing and using context.
Example
type YMapSomeEntityProps = {
name?: string;
};
const defaultProps = {
name: 'entity'
};
class YMapSomeEntity extends GenericEntity<YMapSomeEntityProps, typeof defaultProps> {
static defaultProps = defaultProps;
public isAttached: boolean;
constructor(props: YMapSomeEntityProps) {
super(props);
this.isAttached = false
// Additional actions can be taken in the constructor of a class.
}
protected _onAttach(): void {
this.isAttached = true;
// Additional actions can be taken when an Entity is attached.
}
// ...
}
Type parameters
Name | Type | Description |
---|---|---|
Props |
Props |
Type of input props of the Entity. |
DefaultProps |
extends Object = {} |
Type of default input props of the Entity. |
Root |
extends GenericRootEntity <unknown > = GenericRootEntity <unknown > |
Root Entity Class. |
Constructors
constructor
new GenericEntity<Props
, DefaultProps
, Root
>(props
)
Type parameters
Name | Type |
---|---|
Props |
Props |
DefaultProps |
extends Object = {} |
Root |
extends GenericRootEntity <unknown , {}, Root > = GenericRootEntity <unknown , {}> |
Parameters
Name | Type | Description |
---|---|---|
props |
Props |
The value of input props. |
Accessors
parent
get
parent(): null
| GenericComplexEntity
<unknown
, {}, GenericRootEntity
<unknown
, {}>>
Get parent entity.
Returns
null
| GenericComplexEntity
<unknown
, {}, GenericRootEntity
<unknown
, {}>>
root
get
root(): null
| Root
Get root entity.
Returns
null
| Root
Methods
update
update(changedProps
): void
Method for updating props of Entity.
Parameters
Name | Type | Description |
---|---|---|
changedProps |
Partial <Props > |
New props values. |
Returns
void
Class: GenericGroupEntity<Props, DefaultProps, Root>
Entity that aggregates multiple Entities, and allows you to publicly add and remove entities to a subtree.
Example
type YMapSomeGroupEntityProps = {
name?: string;
};
const defaultProps = {
name: 'entity'
};
class YMapSomeGroupEntity extends GenericGroupEntity<YMapSomeGroupEntityProps, typeof defaultProps> {
static defaultProps = defaultProps;
// ...
}
const groupEntity = new YMapSomeGroupEntity()
const someEntity = new YMapSomeEntity(); // YMapSomeEntity extends GenericEntity
groupEntity.addChild(someEntity); // add someEntity in YMapSomeGroupEntity object
groupEntity.removeChild(someEntity); // remove someEntity from YMapSomeGroupEntity object
Type parameters
Name | Type | Description |
---|---|---|
Props |
Props |
Type of input props of the Entity. |
DefaultProps |
extends Object = {} |
Type of default input props of the Entity. |
Root |
extends GenericRootEntity <unknown > = GenericRootEntity <unknown > |
Root Entity Class. |
Constructors
constructor
new GenericGroupEntity<Props
, DefaultProps
, Root
>(props
, options?
)
Type parameters
Name | Type |
---|---|
Props |
Props |
DefaultProps |
extends Object = {} |
Root |
extends GenericRootEntity <unknown , {}, Root > = GenericRootEntity <unknown , {}> |
Parameters
Name | Type | Description |
---|---|---|
props |
Props |
The value of input props. |
options? |
ComplexOptions <Root > |
Optional options object. |
Inherited from
GenericComplexEntity.constructor
new GenericGroupEntity<Props
, DefaultProps
, Root
>(props
, children?
, options?
)
Type parameters
Name | Type |
---|---|
Props |
Props |
DefaultProps |
extends Object = {} |
Root |
extends GenericRootEntity <unknown , {}, Root > = GenericRootEntity <unknown , {}> |
Parameters
Name | Type |
---|---|
props |
Props |
children? |
GenericEntity <unknown , {}, Root >[] |
options? |
Omit <ComplexOptions <Root >, "children" > |
Inherited from
GenericComplexEntity.constructor
Properties
children
readonly children: readonly GenericEntity<unknown, {}, Root>[]
Overrides
GenericComplexEntity.children
Accessors
parent
get
parent(): null
| GenericComplexEntity
<unknown
, {}, GenericRootEntity
<unknown
, {}>>
Get parent entity.
Returns
null
| GenericComplexEntity
<unknown
, {}, GenericRootEntity
<unknown
, {}>>
Inherited from
GenericComplexEntity.parent
root
get
root(): null
| Root
Get root entity.
Returns
null
| Root
Inherited from
GenericComplexEntity.root
Methods
addChild
addChild(child
, index?
): GenericGroupEntity
<Props
, DefaultProps
, Root
>
Parameters
Name | Type |
---|---|
child |
GenericEntity <unknown , {}, Root > |
index? |
number |
Returns
GenericGroupEntity
<Props
, DefaultProps
, Root
>
Overrides
GenericComplexEntity.addChild
removeChild
removeChild(child
): GenericGroupEntity
<Props
, DefaultProps
, Root
>
Parameters
Name | Type |
---|---|
child |
GenericEntity <unknown , {}, Root > |
Returns
GenericGroupEntity
<Props
, DefaultProps
, Root
>
Overrides
GenericComplexEntity.removeChild
update
update(changedProps
): void
Method for updating props of Entity.
Parameters
Name | Type | Description |
---|---|---|
changedProps |
Partial <Props > |
New props values. |
Returns
void
Inherited from
Class: GenericRootEntity<Props, DefaultProps>
Entity that is root and cannot be added anywhere
Example
type YMapProps = {
name?: string;
};
class YMap extends GenericRootEntity<YMapProps, typeof defaultProps> {
// ...
}
// Now we can specify their root element for the Entity
class YMapSomeEntity extends GenericEntity<YMapSomeEntityProps, typeof defaultProps, YMap> {
static defaultProps = defaultProps;
// ...
}
Type parameters
Name | Type | Description |
---|---|---|
Props |
Props |
Type of input props of the Entity. |
DefaultProps |
extends Object = {} |
Type of default input props of the Entity. |
Constructors
constructor
new GenericRootEntity<Props
, DefaultProps
>(props
, options?
)
Type parameters
Name | Type |
---|---|
Props |
Props |
DefaultProps |
extends Object = {} |
Parameters
Name | Type | Description |
---|---|---|
props |
Props |
The value of input props. |
options? |
ComplexOptions <GenericRootEntity <unknown , {}>> |
Optional options object. |
Inherited from
GenericGroupEntity.constructor
new GenericRootEntity<Props
, DefaultProps
>(props
, children?
, options?
)
Type parameters
Name | Type |
---|---|
Props |
Props |
DefaultProps |
extends Object = {} |
Parameters
Name | Type |
---|---|
props |
Props |
children? |
GenericEntity <unknown , {}, GenericRootEntity <unknown , {}>>[] |
options? |
Omit <ComplexOptions <GenericRootEntity <unknown , {}>>, "children" > |
Inherited from
GenericGroupEntity.constructor
Properties
children
readonly children: readonly GenericEntity<unknown, {}, GenericRootEntity<unknown, {}>>[]
Inherited from
Accessors
parent
get
parent(): null
| GenericComplexEntity
<unknown
, {}, GenericRootEntity
<unknown
, {}>>
Get parent entity.
Returns
null
| GenericComplexEntity
<unknown
, {}, GenericRootEntity
<unknown
, {}>>
Inherited from
GenericGroupEntity.parent
root
get
root(): this
Get root entity.
Returns
this
Overrides
GenericGroupEntity.root
Methods
addChild
addChild(child
, index?
): GenericRootEntity
<Props
, DefaultProps
>
Parameters
Name | Type |
---|---|
child |
GenericEntity <unknown , {}, GenericRootEntity <unknown , {}>> |
index? |
number |
Returns
GenericRootEntity
<Props
, DefaultProps
>
Inherited from
destroy
Abstract
destroy(): void
Completely destroys the entity tree including the current entity
Returns
void
removeChild
removeChild(child
): GenericRootEntity
<Props
, DefaultProps
>
Parameters
Name | Type |
---|---|
child |
GenericEntity <unknown , {}, GenericRootEntity <unknown , {}>> |
Returns
GenericRootEntity
<Props
, DefaultProps
>
Inherited from
GenericGroupEntity.removeChild
update
update(changedProps
): void
Method for updating props of Entity.
Parameters
Name | Type | Description |
---|---|---|
changedProps |
Partial <Props > |
New props values. |
Returns
void
Inherited from
Class: YMap
Main API class. Create a map container.
Example
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;
Constructors
constructor
new YMap(rootContainer
, props
, children?
)
Parameters
Name | Type |
---|---|
rootContainer |
HTMLElement |
props |
YMapProps |
children? |
YMapEntity <unknown , {}>[] |
Overrides
Properties
children
readonly children: YMapEntity<unknown, {}>[]
Overrides
[overrideKeyReactify]
static [overrideKeyReactify]: CustomReactify<YMap, ForwardRefExoticComponent<{
behaviors?: BehaviorType[];
camera?: YMapCameraRequest;
children?: ReactNode;
className?: string;
config?: Config;
copyrights?: boolean;
copyrightsPosition?: YMapCopyrightsPosition;
hotspotsStrategy?: "forViewport" | "forPointerPosition";
key?: null | Key;
location: YMapLocationRequest;
margin?: Margin;
mode?: MapMode;
projection?: Projection;
ref?: Ref<YMap>;
restrictMapArea?: false | LngLatBounds;
showScaleInCopyrights?: boolean;
theme?: YMapTheme;
worldOptions?: WorldOptions;
zoomRange?: ZoomRange;
zoomRounding?: ZoomRounding;
zoomStrategy?: ZoomStrategy
}>>
defaultProps
static defaultProps: Readonly<{
behaviors: string[];
camera: {
azimuth: number;
tilt: number
};
className: "";
config: Config;
copyrights: true;
copyrightsPosition: "bottom right";
hotspotsStrategy: "forViewport" | "forPointerPosition";
margin: undefined | Margin;
mode: "auto";
projection: Projection;
restrictMapArea: false;
showScaleInCopyrights: false;
theme: "light";
worldOptions: {
cycledX: boolean;
cycledY: boolean
};
zoomRange: ZoomRange;
zoomRounding: "auto";
zoomStrategy: "zoomToPointer"
}>
Accessors
azimuth
get
azimuth(): number
Returns
number
behaviors
get
behaviors(): readonly BehaviorType
[]
getter for YMapProps.behaviors prop
Returns
readonly BehaviorType
[]
bounds
get
bounds(): LngLatBounds
getter for YMapProps.location.bounds prop
Returns
center
get
center(): readonly [number
, number
, undefined
| number
]
getter for YMapProps.location.center prop
Returns
readonly [number
, number
, undefined
| number
]
config
get
config(): Readonly
<Config
>
getter for YMapProps.config prop
Returns
container
get
container(): HTMLElement
Main map container
Returns
parent
get
parent(): null
| GenericComplexEntity
<unknown
, {}, GenericRootEntity
<unknown
, {}>>
Get parent entity.
Returns
null
| GenericComplexEntity
<unknown
, {}, GenericRootEntity
<unknown
, {}>>
Inherited from
GenericRootEntity.parent
projection
get
projection(): Projection
getter for YMapProps.projection prop
Returns
restrictMapArea
get
restrictMapArea(): Readonly
<false
| LngLatBounds
>
getter for YMapProps.restrictMapArea prop
Returns
Readonly
<false
| LngLatBounds
>
root
get
root(): this
Get root entity.
Returns
this
Inherited from
GenericRootEntity.root
size
get
size(): PixelCoordinates
getter for map size
Returns
theme
get
theme(): "dark"
| "light"
getter for YMapProps.theme prop
Returns
"dark"
| "light"
tilt
get
tilt(): number
Returns
number
tiltRange
get
tiltRange(): Readonly
<TiltRange
>
Returns
zoom
get
zoom(): number
getter for YMapProps.location.zoom prop
Returns
number
zoomRange
get
zoomRange(): Readonly
<ZoomRange
>
getter for YMapProps.zoomRange prop
Returns
Methods
addChild
addChild(child
, index?
): YMap
Parameters
Name | Type |
---|---|
child |
YMapEntity <unknown , {}> |
index? |
number |
Returns
Overrides
destroy
destroy(): void
Destroy map and remove it from user DOM-element
Returns
void
Overrides
removeChild
removeChild(child
): YMap
Parameters
Name | Type |
---|---|
child |
YMapEntity <unknown , {}> |
Returns
Overrides
setBehaviors
setBehaviors(behaviors
): void
setter for YMapProps.behaviors prop
Parameters
Name | Type |
---|---|
behaviors |
BehaviorType [] |
Returns
void
setCamera
setCamera(camera
): void
setter for YMapProps.camera prop
Parameters
Name | Type |
---|---|
camera |
YMapCameraRequest |
Returns
void
setConfig
setConfig(config
): void
setter for YMapProps.config prop
Parameters
Name | Type |
---|---|
config |
Config |
Returns
void
setLocation
setLocation(location
): void
setter for YMapProps.location prop
Parameters
Name | Type |
---|---|
location |
YMapLocationRequest |
Returns
void
setMargin
setMargin(margin
): void
setter for YMapProps.margin prop
Parameters
Name | Type |
---|---|
margin |
Margin |
Returns
void
setMode
setMode(mode
): void
setter for YMapProps.mode prop
Parameters
Name | Type |
---|---|
mode |
MapMode |
Returns
void
setProjection
setProjection(projection
): void
setter for YMapProps.projection prop
Parameters
Name | Type |
---|---|
projection |
Projection |
Returns
void
setRestrictMapArea
setRestrictMapArea(restrictMapArea
): void
setter for YMapProps.config prop
Parameters
Name | Type |
---|---|
restrictMapArea |
LngLatBounds |
Returns
void
setZoomRange
setZoomRange(zoomRange
): void
setter for YMapProps.zoomRange prop
Parameters
Name | Type |
---|---|
zoomRange |
ZoomRange |
Returns
void
setZoomRounding
setZoomRounding(zoomRounding
): void
setter for YMapProps.zoomRounding prop
Parameters
Name | Type |
---|---|
zoomRounding |
ZoomRounding |
Returns
void
update
update(changedProps
): void
Method for updating props of Entity.
Parameters
Name | Type | Description |
---|---|---|
changedProps |
Partial <YMapProps > |
New props values. |
Returns
void
Inherited from
Class: YMapComplexEntity<Props, DefaultProps>
Entity that aggregates multiple Entities but looks basic from the outside.
Type Param
Root Entity Class.
Example
type YMapSomeComplexEntityProps = {
name?: string;
};
const defaultProps = {
name: 'entity'
};
class YMapSomeComplexEntity extends YMapComplexEntity<YMapSomeComplexEntityProps, typeof defaultProps> {
static defaultProps = defaultProps;
private _someEntity?: YMapSomeEntity; // YMapSomeEntity extends GenericEntity
protected _onAttach(): void {
this._someEntity = new YMapSomeEntity();
this.addChild(this._someEntity); // add someEntity as children
// ...
}
// ...
}
Type parameters
Name | Type | Description |
---|---|---|
Props |
Props |
Type of input props of the Entity. |
DefaultProps |
extends Object = {} |
Type of default input props of the Entity. |
Implements
YMapEntity
<Props
,DefaultProps
>
Constructors
constructor
new YMapComplexEntity<Props
, DefaultProps
>(props
, options?
)
Type parameters
Name | Type |
---|---|
Props |
Props |
DefaultProps |
extends Object = {} |
Parameters
Name | Type | Description |
---|---|---|
props |
Props |
The value of input props. |
options? |
ComplexOptions <YMap > |
Optional options object. |
Inherited from
GenericComplexEntity.constructor
new YMapComplexEntity<Props
, DefaultProps
>(props
, children?
, options?
)
Type parameters
Name | Type |
---|---|
Props |
Props |
DefaultProps |
extends Object = {} |
Parameters
Name | Type |
---|---|
props |
Props |
children? |
GenericEntity <unknown , {}, YMap >[] |
options? |
Omit <ComplexOptions <YMap >, "children" > |
Inherited from
GenericComplexEntity.constructor
Accessors
parent
get
parent(): null
| YMapComplexEntity
<unknown
, {}>
Get parent entity.
Returns
null
| YMapComplexEntity
<unknown
, {}>
Implementation of
YMapEntity.parent
Overrides
GenericComplexEntity.parent
root
get
root(): null
| YMap
Get root entity.
Returns
null
| YMap
Implementation of
YMapEntity.root
Overrides
GenericComplexEntity.root
Methods
update
update(changedProps
): void
Method for updating props of Entity.
Parameters
Name | Type | Description |
---|---|---|
changedProps |
Partial <Props > |
New props values. |
Returns
void
Implementation of
Inherited from
Class: YMapEntity<Props, DefaultProps>
Entity Base Class. It has event handlers for attaching, detaching and updating props. Has a method for providing and using context.
Example
type YMapSomeEntityProps = {
name?: string;
};
const defaultProps = {
name: 'entity'
};
class YMapSomeEntity extends YMapEntity<YMapSomeEntityProps, typeof defaultProps> {
static defaultProps = defaultProps;
public isAttached: boolean;
constructor(props: YMapSomeEntityProps) {
super(props);
this.isAttached = false
// Additional actions can be taken in the constructor of a class.
}
protected _onAttach(): void {
this.isAttached = true;
// Additional actions can be taken when an Entity is attached.
}
// ...
}
Type parameters
Name | Type | Description |
---|---|---|
Props |
Props |
Type of input props of the Entity. |
DefaultProps |
extends Object = {} |
Type of default input props of the Entity. |
Implemented by
Constructors
constructor
new YMapEntity<Props
, DefaultProps
>(props
)
Type parameters
Name | Type |
---|---|
Props |
Props |
DefaultProps |
extends Object = {} |
Parameters
Name | Type | Description |
---|---|---|
props |
Props |
The value of input props. |
Inherited from
Accessors
parent
get
parent(): null
| YMapComplexEntity
<unknown
, {}>
Get parent entity.
Returns
null
| YMapComplexEntity
<unknown
, {}>
Overrides
GenericEntity.parent
root
get
root(): null
| YMap
Get root entity.
Returns
null
| YMap
Overrides
GenericEntity.root
Methods
update
update(changedProps
): void
Method for updating props of Entity.
Parameters
Name | Type | Description |
---|---|---|
changedProps |
Partial <Props > |
New props values. |
Returns
void
Inherited from
Interface: IClusterMethod
Interface of method class
Methods
render
render(props
): ClustererObject
[]
Parameters
Name | Type |
---|---|
props |
RenderProps |
Returns
Interface: Apikeys
All possible apikeys for http-services.
Properties
router
optional router: string
search
optional search: string
suggest
optional suggest: string
Interface: ComplexOptions<Root>
Type parameters
Name | Type |
---|---|
Root |
extends GenericRootEntity <unknown > = GenericRootEntity <unknown > |
Properties
children
optional children: GenericEntity<unknown, {}, Root>[]
container
optional container: boolean
Interface: GenericFeature<TCoordinates>
Type parameters
Name |
---|
TCoordinates |
Properties
geometry
geometry: GenericGeometry<TCoordinates>
id
id: string
properties
optional properties: Record<string, unknown>
type
type: "Feature"
Interface: GenericLineStringGeometry<TCoordinates>
Type parameters
Name |
---|
TCoordinates |
Properties
coordinates
coordinates: TCoordinates[]
type
type: "LineString"
Interface: GenericMultiLineStringGeometry<TCoordinates>
Type parameters
Name |
---|
TCoordinates |
Properties
coordinates
coordinates: TCoordinates[][]
type
type: "MultiLineString"
Interface: GenericMultiPolygonGeometry<TCoordinates>
Type parameters
Name |
---|
TCoordinates |
Properties
coordinates
coordinates: TCoordinates[][][]
Array of polygons. See GenericPolygonGeometry.
type
type: "MultiPolygon"
Interface: GenericPointFeature<TCoordinates>
Type parameters
Name |
---|
TCoordinates |
Properties
geometry
geometry: GenericPointGeometry<TCoordinates>
Overrides
id
id: string
Inherited from
properties
optional properties: Record<string, unknown>
Inherited from
type
type: "Feature"
Inherited from
Interface: GenericPointGeometry<TCoordinates>
Type parameters
Name |
---|
TCoordinates |
Properties
coordinates
coordinates: TCoordinates
type
type: "Point"
Interface: GenericPolygonGeometry<TCoordinates>
Type parameters
Name |
---|
TCoordinates |
Properties
coordinates
coordinates: TCoordinates[][]
Polygon's rings.
Remarks
Inner rings may extend beyond outer ring.
GeoJSON doesn't allow this, but there's a lot of data like this in this JS API.
type
type: "Polygon"
Interface: GenericProjection<TSource>
Type parameters
Name |
---|
TSource |
Properties
type
optional readonly type: string
Projection identity type. It may be:
- EPSG-code (e.g. EPSG:3857)
- any other string to identify (e.g. 'cartesian')
Methods
fromWorldCoordinates
fromWorldCoordinates(coordinates
): TSource
Parameters
Name | Type |
---|---|
coordinates |
WorldCoordinates |
Returns
TSource
toWorldCoordinates
toWorldCoordinates(point
): WorldCoordinates
Parameters
Name | Type |
---|---|
point |
TSource |
Returns
Interface: PixelCoordinates
Global pixel coordinates. World size depends on zoom.
Left top is (0; 0).
Right bottom is (2**(zoom + 8); 2**(zoom + 8)).
Properties
type
optional readonly type: "pixel"
x
x: number
Inherited from
y
y: number
Inherited from
Interface: ReactParent
Properties
entityRef
entityRef: RefInstance<GenericEntity<unknown, {}, GenericRootEntity<unknown, {}>>>
Methods
positionChild
positionChild(entity
): number
Parameters
Name | Type |
---|---|
entity |
RefInstance <GenericEntity <unknown , {}, GenericRootEntity <unknown , {}>>> |
Returns
number
requestReposition
requestReposition(): void
Returns
void
Interface: TiltRange
Properties
expansion
readonly expansion: number
Behavior tilt expansion in radians. E.g. you can tilt map with fingers a little bit more than max
.
max
readonly max: number
Maximum tilt in radians.
min
readonly min: number
Minimum tilt in radians.
Interface: Vec2
Properties
x
x: number
y
y: number
Interface: VuefyModuleFn
Callable
VuefyModuleFn
VuefyModuleFn<TModule
>(module
, props?
): VuefiedModule
<TModule
>
Type parameters
Name | Type |
---|---|
TModule |
extends BaseModule = BaseModule |
Parameters
Name | Type |
---|---|
module |
TModule |
props? |
VuefyPropsModule <TModule > |
Returns
VuefiedModule
<TModule
>
Interface: WorldCoordinates
Coordinates in [-1 ... +1].
Left bottom is (-1; -1).
Right top is (+1; +1).
Center is (0; 0).
Properties
type
optional readonly type: "world"
x
x: number
Inherited from
y
y: number
Inherited from
z
optional z: number
Interface: WorldOptions
Properties
cycledX
readonly cycledX: boolean
Interface: ZoomRange
Properties
max
max: number
min
min: number
Type Aliases
ClustererObject
ClustererObject: Object
Represents object on a map (either cluster or feature)
Type declaration
Name | Type |
---|---|
clusterId |
string |
features |
Feature [] |
lnglat |
LngLat |
world |
WorldCoordinates |
ClustersCollection
ClustersCollection: Map<string, Cluster>
EntitiesMap
EntitiesMap: Record<string, YMapEntity<unknown> | undefined>
Represents map of entities with its id
Feature
Feature: GenericPointFeature<LngLat>
Feature to clusterize on a map
RenderProps
RenderProps: Object
Props for rendering
Type declaration
Name | Type |
---|---|
features |
Feature [] |
map |
YMap |
YMapClustererProps
YMapClustererProps: Object
YMapClusterer props
Type declaration
Name | Type | Description |
---|---|---|
cluster |
(coordinates : LngLat , features : Feature []) => YMapEntity <unknown > |
Function to create marker for cluster |
features |
Feature [] |
Features |
marker |
(feature : Feature ) => YMapEntity <unknown > |
Function to create marker for point |
maxZoom? |
number |
Maximum zoom for clusterisation. If map zoom is bigger, markers will be displayed as is. |
method |
IClusterMethod |
Clusterisation method |
onRender? |
(clusters : ClustererObject []) => void | false |
Return false, if you want to override the render |
tickTimeout? |
number |
The amount of time that may be passed before the render method can be called again |
Functions
clusterByGrid
clusterByGrid(«destructured»
): IClusterMethod
Parameters
Name | Type |
---|---|
«destructured» |
Object |
› gridSize |
number |
Returns
Module: <internal>
Type Aliases
BaseModule
BaseModule: Record<string | symbol, unknown>
BehaviorType
BehaviorType: "drag" | "pinchZoom" | "scrollZoom" | "dblClick" | "magnifier" | "oneFingerZoom" | "mouseRotate" | "mouseTilt" | "pinchRotate" | "panTilt"
Cluster
Cluster: Object
Cluster that contains cluster or feature and its sum of coordinates
Type declaration
Name | Type |
---|---|
features |
Feature [] |
objects |
ClustererObject [] |
sumX |
number |
sumY |
number |
ContextWatcherFn
ContextWatcherFn: () => void
Type declaration
(): void
Returns
void
CustomReactify
CustomReactify<TEntity,
TResult\>: (`ctor`: EntityConstructor<TEntity>, `params`: {
React: typeof TReact;
ReactDOM: typeof TReactDOM;
ReactParent: typeof ReactParent;
reactify: {
context: <TContext>(`context?`: TContext) => TReact.Context<unknown>;
module: ReactifyModule;
entity: <T>(...`args`: [ctor: T, displayName?: string]) => T extends Overrided<T, TResult> ? TResult : ForwardRefExoticComponent<PropsWithoutRef<PropsWithChildren<EntityProps<InstanceType<T>>>> & RefAttributes<undefined | InstanceType<T>>>
}
}) => TResult
Type parameters
Name | Type |
---|---|
TEntity |
extends GenericEntity <unknown > |
TResult |
TResult |
Type declaration
(ctor
, params
): TResult
Parameters
Name | Type |
---|---|
ctor |
EntityConstructor <TEntity > |
params |
Object |
params.React |
typeof TReact |
params.ReactDOM |
typeof TReactDOM |
params.ReactParent |
typeof ReactParent |
params.reactify |
Object |
params.reactify.context |
<TContext>(context? : TContext ) => TReact.Context <unknown > |
params.reactify.module |
ReactifyModule |
params.reactify.entity |
<T>(...args : [ctor: T, displayName?: string]) => T extends Overrided <T , TResult > ? TResult : ForwardRefExoticComponent <PropsWithoutRef <PropsWithChildren <EntityProps <InstanceType <T >>>> & RefAttributes <undefined | InstanceType <T >>> |
Returns
TResult
CustomVuefyFn
CustomVuefyFn<TEntity,
TExternalProps\>: (`ctor`: EntityConstructor<TEntity>, `props`: VuefyPropsObject<TExternalProps>, `params`: {
Vue: typeof TVue;
vuefy: {
context: VuefyContextFn;
entity: VuefyEntityFn;
module: VuefyModuleFn
}
}) => TVue.Component<TExternalProps>
Type parameters
Name | Type |
---|---|
TEntity |
extends DefaultEntity |
TExternalProps |
EntityProps <TEntity > |
Type declaration
(ctor
, props
, params
): TVue.Component
<TExternalProps
>
Parameters
Name | Type |
---|---|
ctor |
EntityConstructor <TEntity > |
props |
VuefyPropsObject <TExternalProps > |
params |
Object |
params.Vue |
typeof TVue |
params.vuefy |
Object |
params.vuefy.context |
VuefyContextFn |
params.vuefy.entity |
VuefyEntityFn |
params.vuefy.module |
VuefyModuleFn |
Returns
TVue.Component
<TExternalProps
>
CustomVuefyOptions
CustomVuefyOptions<TEntity,
TExternalProps\>: Object
Type parameters
Name | Type |
---|---|
TEntity |
extends DefaultEntity |
TExternalProps |
EntityProps <TEntity > |
Type declaration
Name | Type |
---|---|
props |
VuefyPropsObject <TExternalProps > | VuefyPropsArray <TExternalProps > |
DefaultContext
DefaultContext: Context<unknown>
DefaultCtor
DefaultCtor: EntityConstructor<DefaultEntity>
DefaultEntity
DefaultEntity: GenericEntity<unknown>
DefaultProps
DefaultProps: typeof defaultProps
DefaultProps
DefaultProps: typeof defaultProps
EasingBezierPreset
EasingBezierPreset: Object
Type declaration
Name | Type |
---|---|
p1 |
Vec2 |
p2 |
Vec2 |
EasingFunction
EasingFunction: (`x`: number) => number
Type declaration
(x
): number
Parameters
Name | Type |
---|---|
x |
number |
Returns
number
EasingFunctionDescription
EasingFunctionDescription: EasingPresetName | EasingBezierPreset | EasingFunction
EasingPresetName
EasingPresetName: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"
EntityConstructor
EntityConstructor<TEntity\>: (...`args`: any[]) => TEntity
Type parameters
Name | Type |
---|---|
TEntity |
extends GenericEntity <unknown > |
Type declaration
(...args
)
Parameters
Name | Type |
---|---|
...args |
any [] |
EntityProps
EntityProps<T\>: T extends GenericEntity<infer P> ? P : never
Type parameters
Name | Type |
---|---|
T |
extends GenericEntity <unknown > |
GenericBounds
GenericBounds<T\>: [T, T]
Generic for rectangle bounded by bottom-left and top-right coordinates
Type parameters
Name |
---|
T |
GenericGeometry
GenericGeometry<TCoordinates\>: GenericPolygonGeometry<TCoordinates> | GenericMultiPolygonGeometry<TCoordinates> | GenericLineStringGeometry<TCoordinates> | GenericMultiLineStringGeometry<TCoordinates> | GenericPointGeometry<TCoordinates>
Type parameters
Name |
---|
TCoordinates |
LngLat
LngLat: [lon: number, lat: number, alt?: number]
Tuple with geodesic coordinates in longitude latitude order.
GeoJSON also uses this order https://tools.ietf.org/html/rfc7946#appendix-A.1
LngLatBounds
LngLatBounds: GenericBounds<LngLat>
Rectangle bounded by top-left and bottom-right coordinates
MapMode
MapMode: "raster" | "vector" | "auto"
Margin
Margin: [number, number, number, number]
Map margins in pixels. Order is top, right, bottom, left.
Overrided
Overrided<TCtor,
TReactResult\>: Object
Type parameters
Name | Type |
---|---|
TCtor |
extends EntityConstructor <GenericEntity <unknown >> |
TReactResult |
TReactResult |
Type declaration
Name | Type |
---|---|
[overrideKeyReactify] |
CustomReactify <InstanceType <TCtor >, TReactResult > |
Projection
Projection: GenericProjection<LngLat>
PropsFromCtor
PropsFromCtor<TCtor\>: EntityProps<InstanceType<TCtor>>
Type parameters
Name | Type |
---|---|
TCtor |
extends DefaultCtor |
RefInstance
RefInstance<TEntity\>: React.MutableRefObject<TEntity | undefined>
Type parameters
Name | Type |
---|---|
TEntity |
extends GenericEntity <unknown > |
VuefiedModule
VuefiedModule<TModule\>: { [Property in keyof TModule]: TModule[Property] extends DefaultCtor ? ReturnType<VuefyEntityFnGen<TModule[Property]\>\> : TModule[Property] extends typeof Context ? ReturnType<VuefyContextFn\> : TModule[Property] }
Type parameters
Name | Type |
---|---|
TModule |
extends BaseModule |
VuefyContextFn
VuefyContextFn: <TContext>(`context?`: TContext) => symbol
Type declaration
<TContext
>(context?
): symbol
Type parameters
Name | Type |
---|---|
TContext |
extends DefaultContext |
Parameters
Name | Type |
---|---|
context? |
TContext |
Returns
symbol
VuefyEntityFn
VuefyEntityFn: <TCtor, TProps>(...`args`: Parameters<VuefyEntityFnGen<TCtor, TProps>>) => ReturnType<VuefyEntityFnGen<TCtor, TProps>>
Type declaration
<TCtor
, TProps
>(...args
): ReturnType
<VuefyEntityFnGen
<TCtor
, TProps
>>
Type parameters
Name | Type |
---|---|
TCtor |
extends DefaultCtor |
TProps |
PropsFromCtor <TCtor > |
Parameters
Name | Type |
---|---|
...args |
Parameters <VuefyEntityFnGen <TCtor , TProps >> |
Returns
ReturnType
<VuefyEntityFnGen
<TCtor
, TProps
>>
VuefyEntityFnGen
VuefyEntityFnGen<TCtor,
TProps\>: (`ctor`: TCtor, `props?`: VuefyPropsObject<TProps> | VuefyPropsArray<TProps>, `displayName?`: string) => TVue.Component<TProps>
Type parameters
Name | Type |
---|---|
TCtor |
extends DefaultCtor |
TProps |
PropsFromCtor <TCtor > |
Type declaration
(ctor
, props?
, displayName?
): TVue.Component
<TProps
>
Parameters
Name | Type |
---|---|
ctor |
TCtor |
props? |
VuefyPropsObject <TProps > | VuefyPropsArray <TProps > |
displayName? |
string |
Returns
TVue.Component
<TProps
>
VuefyPropsArray
VuefyPropsArray<RawProps\>: keyof RawProps[]
Type parameters
Name |
---|
RawProps |
VuefyPropsModule
VuefyPropsModule<TModule\>: { [Key in keyof TModule]: TModule[Key] extends GenericEntity<infer Props\> ? VuefyPropsObject<Props\> \| VuefyPropsArray<Props\> : unknown }
Type parameters
Name | Type |
---|---|
TModule |
extends BaseModule |
VuefyPropsObject
VuefyPropsObject<RawProps\>: { [K in keyof RawProps]-?: TVue.PropType<RawProps[K]\> \| TVue.Prop<RawProps[K]\> }
Type parameters
Name |
---|
RawProps |
WithDefaults
WithDefaults<Props,
DefaultProps\>: Props & { [K in keyof DefaultProps]: K extends keyof Props ? NonNullable<Props[K]\> : never }
Type parameters
Name | Type |
---|---|
Props |
Props |
DefaultProps |
extends Partial <Props > |
YMapBoundsLocation
YMapBoundsLocation: Object
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.
map.update({
location: {bounds: [[-0.118092, 51.509865], [-0.118092, 51.509865]]}
});
Type declaration
Name | Type |
---|---|
bounds |
LngLatBounds |
YMapCamera
YMapCamera: Object
Observer camera position
Type declaration
Name | Type | Description |
---|---|---|
azimuth? |
number |
Map rotation in radians. Can take values from -Math.PI to Math.PI |
tilt? |
number |
Map tilt in radians. Can take values from 0 to 50 degrees (degrees * (Math.PI / 180)) |
YMapCameraRequest
YMapCameraRequest: YMapCamera & {
duration?: number;
easing?: EasingFunctionDescription
}
Describes how to change current camera position. Change can be instantaneous or animated if duration property is set.
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'
}});
YMapCenterLocation
YMapCenterLocation: Object
Sets map center. In this case, the zoom of the map remains unchanged.
map.update({
location: {center: [-0.118092, 51.509865]}
});
Type declaration
Name | Type |
---|---|
center |
LngLat |
YMapCenterZoomLocation
YMapCenterZoomLocation: YMapCenterLocation & YMapZoomLocation
Sets map center and zoom. Combination of YMapCenterLocation and YMapZoomLocation
map.update({
location: {center: [-0.118092, 51.509865], zoom: 10}
});
YMapCopyrightsPosition
YMapCopyrightsPosition: "top left" | "top right" | "bottom left" | "bottom right"
Copyrights position on the map container. By default, 'bottom right'.
For example, 'top left' or 'bottom right'
const map = new ymaps3.YMap(document.getElementById('map-root'), {
copyrightsPosition: 'top left'
});
YMapLocationRequest
YMapLocationRequest: YMapBoundsLocation | YMapCenterLocation | YMapZoomLocation | YMapCenterZoomLocation & {
duration?: number;
easing?: EasingFunctionDescription
}
Describes how to change current map location. Change can be instantaneous or animated if duration property is set.
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
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
}
})';
YMapProps
YMapProps: Object
Map settings. Allow to set map mode, behaviors, margin, zoom rounding, zoom range, restrict map area, theme and other settings.
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.
const map = new YMap(document.getElementById('map-root'), {
location: {center: [-0.118092, 51.509865], zoom: 10}
});
Type declaration
Name | Type | Description |
---|---|---|
behaviors? |
BehaviorType [] |
Active behaviors |
camera? |
YMapCameraRequest |
Initial camera or request to change camera with duration |
className? |
string |
Map container css class name |
config? |
Config |
Other configs |
copyrightsPosition? |
YMapCopyrightsPosition |
Position of copyright on the page. Default is 'bottom right' |
hotspotsStrategy? |
"forViewport" | "forPointerPosition" |
Strategy for fetching hotspots, for whole viewport or for tiles that pointer is hovering at |
location |
YMapLocationRequest |
Initial location or request to change location with duration |
margin? |
Margin |
Map margins |
mode? |
MapMode |
Map mode, 'auto' (default. Show raster tiles while vector tiles are loading), 'raster' or 'vector' (without raster preloading). |
projection? |
Projection |
Projection used in map |
restrictMapArea? |
LngLatBounds | false |
Sets the map view area so that the user cannot move outside of this area. |
showScaleInCopyrights? |
boolean |
Show the map scale next to copyright |
theme? |
YMapTheme |
Theme applied to the scheme |
worldOptions? |
WorldOptions |
Whether to repeat the world in X and Y |
zoomRange? |
ZoomRange |
Restrict min and max map zoom |
zoomRounding? |
ZoomRounding |
Set rounding for zoom. If auto is selected, zoom will be snap for raster and smooth for vector MapMode . Default is auto . |
zoomStrategy? |
ZoomStrategy |
Zoom strategy describes if map center is bound to the zoom point or not |
YMapTheme
YMapTheme: "light" | "dark"
Map theme. Affects the colors of the map controls and background.
const map = new ymaps3.YMap({
location: {center: [55.751574, 37.573856], zoom: 9},
theme: 'dark'
});
YMapZoomLocation
YMapZoomLocation: Object
Sets map zoom. In this case, the center of the map remains unchanged.
map.update({
location: {zoom: 10}
});
Type declaration
Name | Type |
---|---|
zoom |
number |
ZoomRounding
ZoomRounding: "snap" | "smooth" | "auto"
Set rounding for zoom.
If auto
is selected, zoom will be snap
for raster
and smooth
for vector
MapMode
.
Default is auto
.
ZoomStrategy
ZoomStrategy: "zoomToCenter" | "zoomToPointer"
Variables
ReactParent
ReactParent: React.Context<[ReactParent] | undefined>
ReactParent
ReactParent: Context<undefined | [ReactParent]>
defaultProps
const defaultProps: Readonly<{
tickTimeout: 200
}>
defaultProps
const defaultProps: Readonly<{
behaviors: string[];
camera: {
azimuth: number;
tilt: number
};
className: "";
config: Config;
copyrights: true;
copyrightsPosition: "bottom right";
hotspotsStrategy: "forViewport" | "forPointerPosition";
margin: Margin | undefined;
mode: "auto";
projection: Projection;
restrictMapArea: false;
showScaleInCopyrights: false;
theme: "light";
worldOptions: {
cycledX: boolean;
cycledY: boolean
};
zoomRange: ZoomRange;
zoomRounding: "auto";
zoomStrategy: "zoomToPointer"
}>