ymaps3-minimap package

Yandex JS API package

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:

npm install @yandex/ymaps3-minimap

and dynamic import

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:

/* 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:

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

Just use ymaps3.import:

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. |