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