@yandex/ymaps3-minimap

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

Just use ymaps3.import:

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

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');

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.