Vue VectorMap - projection

Specifies the map projection.

Selector: DxProjection
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 from geographical to UI component coordinate systems. The to callback is executed to render initial data in VectorMap. The from callback is called when a user executes the pan or move action. The from and to callbacks should have the same ratio:

JavaScript
 const projection = {
    from: ([x, y]) => [x * A, y * B],
    to: ([lon, lat]) => [lon / A, lat / B],
};

In addition, specify the projection's aspectRatio.

Custom Projection Demo Floor Plan Demo

aspectRatio

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

Selector: aspect-ratio
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