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 UI component 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 UI component coordinate system form a square. Set this property 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 UI component 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 UI component coordinate system.
Each coordinate should be in the range from -1 to 1.

View Demo