open-index/open-npm huggingface dataset:
npm package: @mappable-world/mappable-cartesian-projection
Description: Mappable Maps JS API 3.0 example @mappable-world/mappable-cartesian-projection
Latest version: 0.0.5

# @mappable-world/mappable-cartesian-projection package

Mappable JS API package

[![npm version](https://badge.fury.io/js/@mappable-world%2Fmappable-cartesian-projection.svg)](https://badge.fury.io/js/@mappable-world%2Fmappable-cartesian-projection)
[![npm](https://img.shields.io/npm/dm/@mappable-world/mappable-cartesian-projection.svg)](https://www.npmjs.com/package/@mappable-world/mappable-cartesian-projection)
[![Build Status](https://github.com/mappable-world/mappable-cartesian-projection/workflows/Run%20tests/badge.svg)](https://github.com/mappable-world/mappable-cartesian-projection/actions/workflows/tests.yml)

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

![projection scheme](https://github.com/mappable-world/mappable-cartesian-projection/blob/main/projection_scheme.png?raw=true)

## Install

You can install this package via npm:

```bash
npm install --save @mappable-world/mappable-cartesian-projection
```

## How use

To use Cartesian projection, just import it:

```js
import {Cartesian} from '@mappable-world/mappable-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 `mappable.import` JS API module loading handler on your page:

```js
const pkg = await mappable.import('@mappable-world/mappable-cartesian-projection');
```

**_NOTE:_**
By default `mappable.import` can load self modules, scripts or style.
To make the code above work, you should add a loader:

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

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

    // Return result object
    return window['@mappable-world/mappable-cartesian-projection'];
});
```
npm package: @mappable-world/mappable-cli
Description: Library for encapsulating the logic of autotests and building packages mappable.world js API
Latest version: 0.0.36

# Mappable JS CLI utils

[![Build Status](https://github.com/mappable-world/mappable-cli/workflows/Run%20tests/badge.svg)](https://github.com/mappable-world/mappable-cli/actions/workflows/tests.yml)
[![npm version](https://badge.fury.io/js/@mappable-world%2Fmappable-cli.svg)](https://badge.fury.io/js/@mappable-world%2Fmappable-cli)
[![npm](https://img.shields.io/npm/dm/@mappable-world/mappable-cli.svg)](https://www.npmjs.com/package/@mappable-world/mappable-cli)

The project is used for inheritance in packages https://mappable.world/docs/js-api/ref/packages/index.html

> Requires a key to work https://mappable.world/docs/js-api/quickstart.html#get-api-key

In your project, you can include this package in order to simplify
the development of packages for mappable JS API.
It won't completely get rid of the boilerplate,
but it will at least allow you to inherit all the main configs.

## Create mappable package by template

```sh
npx @mappable-world/mappable-cli --name="mappable-my-super-pkg"
```

You can see the full list of options here:

```sh
npx @mappable-world/mappable-cli help
```

Or you can set up all elements of the package yourself, such as autotests, linting and building.

## Manual

Install package `@mappable-world/mappable-cli`

```sh
npm i -D @mappable-world/mappable-cli#main
```

For development, you may also need types for the libraries you use:

```sh
npm i -D @types/got @types/jest @types/jsdom @types/react @mappable-world/mappable-types
```

### Linting

Install `eslint`

```sh
npm i eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier -D
```

Create `.eslintrc.js` file:

```js
module.exports = {
  extends: ['./node_modules/@mappable-world/mappable-cli/.eslintrc.js']
};
```

Create `.prettierrc.js` file:


```js
const config = require("@mappable-world/mappable-cli/.prettierrc.json");

module.exports = {
  ...config
}
```

### Build

Install `webpack` and `typescript`

```sh
npm i webpack webpack-cli webpack-dev-server css-loader style-loader terser-webpack-plugin ts-loader typescript -D
```

Create files `webpack.config.js`:

```js
module.exports = (args, env, dir = process.cwd()) => {
  return require('@mappable-world/mappable-cli/webpack.config')(args, env, dir);
}
```

and `tsconfig.json`

```json
{
  "extends": ["@mappable-world/mappable-cli"],
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./node_modules/@mappable-world"]
  }
}
```

### Test

We use `jest` + `jsdom`:

```sh
npm i -D jest jsdom ts-jest got@11.8.6 dotenv cross-fetch identity-obj-proxy
```

And create `jest.config.json` file:

```js
module.exports = {
  ...require('@mappable-world/mappable-cli/jest.config.js')
};
```
npm package: @mappable-world/mappable-default-ui-theme
Description: Mappable Maps JS API 3.0 example @mappable-world/mappable-default-ui-theme
Latest version: 0.0.19

# @mappable-world/mappable-default-ui-theme package

---

Mappable JS API package

[![npm version](https://badge.fury.io/js/%40mappable-world%2Fmappable-default-ui-theme.svg)](https://badge.fury.io/js/%40mappable-world%2Fmappable-default-ui-theme)
[![npm](https://img.shields.io/npm/dm/@mappable-world/mappable-default-ui-theme.svg)](https://www.npmjs.com/package/@mappable-world/mappable-default-ui-theme)
[![Build Status](https://github.com/mappable-world/mappable-default-ui-theme/workflows/Run%20tests/badge.svg)](https://github.com/mappable-world/@mappable-world/mappable-default-ui-theme/actions/workflows/tests.yml)

## How use

The package is located in the `dist` folder:

- `dist/types` TypeScript types
- `dist/esm` es6 modules for direct connection in your project
- `dist/index.js` Mappable JS Module

Recommended use `@mappable-world/mappable-default-ui-theme` as usual npm package.

### Usage with npm

Install `@mappable-world/mappable-default-ui-theme` package from npm:

```sh
npm install @mappable-world/mappable-default-ui-theme
```

The JS API is loaded dynamically, so the package must be used after the main JS API has loaded:

```js
await mappable.ready; // waiting for the main JS API to load.

// ...

const {MMapDefaultMarker} = await import('@mappable-world/mappable-default-ui-theme');

// ...

map.addChild(new MMapDefaultMarker(props));
```

You also need to import css styles into your project:

```css
/* index.css */
@import '@mappable-world/mappable-default-ui-theme/dist/esm/index.css';
```

### Usage without npm

You can use CDN with module loading handler in JS API on your page.

By default `mappable.import` can load self modules.
Just use `mappable.registerCdn` and `mappable.import`:

```js
// register in `mappable.import` which CDN to take the package from
mappable.import.registerCdn(
  'https://cdn.jsdelivr.net/npm/{package}',
  '@mappable-world/mappable-default-ui-theme@latest'
);

// ...

// import package from CDN
const pkg = await mappable.import('@mappable-world/mappable-default-ui-theme');
```

## More about working with the package

Read more about working with the package in the [documentation](https://mappable-world.github.io/mappable-default-ui-theme/).