React VectorMap - projection

Specifies the map projection.

Type:

String

|

VectorMapProjectionConfig

|

Object

Default Value: 'mercator'
Accepted Values: 'equirectangular' | 'lambert' | 'mercator' | 'miller'
Cannot be used in themes.

You can use one of the following out-of-the-box projections:

To set a custom projection, implement two functions (from and to) that convert coordinates between geographical and widget coordinate systems. In addition, set the projection's aspectRatio.

Custom Projection Demo Floor Plan Demo

aspectRatio

Specifies the projection's ratio of the width to the height.

Type:

Number

Default Value: 1

Extreme points of the widget coordinate system form a square. Set this option to change the projection's form; for example, make the width more than height.

from

Converts coordinates from [x, y] to [lon, lat].

Type:

Function

Function parameters:
coordinates:

Array<Number>

Two coordinates that represent a point in the widget coordinate system.
Each coordinate ranges from -1 to 1.

Return Value:

Array<Number>

Two coordinates that represent the same point in the dataSource coordinate system.

View Demo

to

Converts coordinates from [lon, lat] to [x, y].

Type:

Function

Function parameters:
coordinates:

Array<Number>

Two coordinates that represent a point in the dataSource coordinate system.

Return Value:

Array<Number>

Two coordinates that represent the same point in the widget coordinate system.
Each coordinate should be in the range from -1 to 1.

View Demo