# ymaps3-minimap package

---

Yandex JS API package

[![npm version](https://badge.fury.io/js/@yandex%2Fymaps3-minimap.svg)](https://badge.fury.io/js/@yandex%2Fymaps3-minimap)
[![NPM Downloads](https://img.shields.io/npm/dm/%40yandex%2Fymaps3-minimap)](https://www.npmjs.com/package/@yandex/ymaps3-minimap)

## 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` Yandex JS Module

Recommended use `ymaps3-minimap` as usual npm package:

```sh
npm install @yandex/ymaps3-minimap
```

and dynamic import

```js
main();
async function main() {
  await ymaps3.ready;
  const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapControls} = ymaps3;

  const {YMapMiniMap} = await import('@yandex/ymaps3-minimap');

  let collapsed = false;

  map = new YMap(document.getElementById('app'), {location: LOCATION});

  map.addChild(new YMapDefaultSchemeLayer({}));
  map.addChild(new YMapDefaultFeaturesLayer({}));

  const onButtonClick = () => {
    collapsed = !collapsed;
    minimap.update({collapsed});
  };

  const minimap = new YMapMiniMap({size: [200, 200], zoomOffset: 5, collapsed, onButtonClick});
  map.addChild(new YMapControls({position: 'left bottom'}).addChild(minimap));
}
```

You also need to import css styles into your project:

```css
/* index.css */
@import '@yandex/ymaps3-minimap/dist/esm/index.css';
```

### Usage without npm

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

By default `ymaps3.import` can load self modules.
If you want also load your package, should register cdn:

```js
ymaps3.import.registerCdn('https://cdn.jsdelivr.net/npm/{package}', '@yandex/ymaps3-minimap@latest');
```

Just use `ymaps3.import`:

```js
await ymaps3.ready;
const {YMapMiniMap} = await ymaps3.import('@yandex/ymaps3-minimap');
```

### YMapMiniMap props description

| Name                 | Type                       | Default   | Description                                                                                                 |
| :------------------- | :------------------------- | :-------- | :---------------------------------------------------------------------------------------------------------- |
| size                 | [number, number]           | [128, 90] | Size of the mini-map in pixels.                                                                             |
| zoomOffset           | number                     | 5         | Difference in zoom levels between the overview map and the main map.                                        |
| zoomRange            | {min: number; max: number} |           | Zoom range of the mini-map. Can be used to fix the zoom level.                                              |
| showBounds           | boolean                    | true      | Display the boundaries of the main map's visible area on the mini-map.                                      |
| controllable         | boolean                    | true      | Ability to control the main map through the mini-map interface. Moving the mini-map will move the main map. |
| collapsed            | boolean                    | false     | State of the mini-map: collapsed or expanded.                                                               |
| showCollapsedControl | boolean                    | true      | Show control for collapsing/expanding the mini-map.                                                         |
| boundsDrawingStyle   | DrawingStyle               |           | Style for rendering the polygon of the main map's visible area boundaries on the mini-map.                  |
| location             | YMapLocationRequest        |           | Fixed center and zoom level of the mini-map, if required.                                                   |
| onButtonClick        | function                   |           | Collapse button control click.                                                                              |
| camera               | YMapCameraRequest          |           | Mini-map camera, if required. By default, the mini-map camera matches the main map's camera.                |