@yandex/ymaps3-cartesian-projection

@yandex/ymaps3-cartesian-projection package

Yandex JS API package

This package will project your cartesian dimensions to Yandex JS API world representation (see scheme of work below). Then you can use it as YMap location property, in YMapListener handlers, etc.

Install

You can install this package via npm:

npm install --save @yandex/ymaps3-cartesian-projection

How use

To use Cartesian projection, just import it:

import {Cartesian} from '@yandex/ymaps3-cartesian-projection';

const projection = new Cartesian([
    // these boundaries define the limits of the world map in the Cartesian coordinate system.
    [-400, -600],
    [400, 600],
]);

console.log(projection.toWorldCoordinates([-400, 600])) // {x: -1, y: 1}
console.log(projection.toWorldCoordinates([200, 0])) // {x: 0.5, y: 0}
console.log(projection.toWorldCoordinates([0, -75])) // {x: 0, y: -0.125}

console.log(projection.fromWorldCoordinates({x: -1, y: 1})) // [-400, 600]
console.log(projection.fromWorldCoordinates({x: 0.5, y: 0})) // [200, 0]
console.log(projection.fromWorldCoordinates({x: 0, y: -0.125})) // [0, -75]

Usage without npm

You can use some CDN with ymaps3.import JS API module loading handler on your page:

const pkg = await ymaps3.import('@yandex/ymaps3-cartesian-projection');

NOTE: By default ymaps3.import can load self modules, scripts or style. To make the code above work, you should add a loader:

// Add loader at the beginning of the loader queue
ymaps3.import.loaders.unshift(async (pkg) => {
    // Process only this package
    if (!pkg.includes('@yandex/ymaps3-cartesian-projection')) return;

    // Load script directly. You can use another CDN
    await ymaps3.import.script(`https://unpkg.com/${pkg}/dist/index.js`);

    // Return result object
    return window['@yandex/ymaps3-cartesian-projection'];
});