@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-projectionHow 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'];
});