JavaScript/jQuery VectorMap - projection

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

• Mercator projection
• Equirectangular projection
• Lambert cylindrical projection
• Miller cylindrical projection

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:

 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

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.

View Demo

View Demo