@yandex/ymaps3-drawer-control

ymaps3-drawer-control 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-drawer-control as usual npm package:

npm install @yandex/ymaps3-drawer-control

You also need to import css styles into your project:

/* index.css */
@import '@yandex/ymaps3-drawer-control/dist/esm/index.css';

and dynamic import

main();
async function main() {
  await ymaps3.ready;

  const {YMapDrawerControl} = await import('@yandex/ymaps3-drawer-control');

  map = new ymaps3.YMap(document.getElementById('app'), {location: LOCATION}, [
    /* any map child */
  ]);

  let open = false;
  const drawerControl = new YMapDrawerControl({
    position: 'left',
    width: 300,
    open,
    onOpenChange: (newOpenValue) => {
      open = newOpenValue;
      drawerControl.update({open: newOpenValue});
    },
    content: () => {
      const container = document.createElement('div');
      const title = document.createElement('h1');
      title.textContent = 'Hello world';
      container.appendChild(title);
      const closeButton = document.createElement('button');
      closeButton.textContent = 'Close';
      closeButton.addEventListener('click', () => {
        open = false;
        drawerControl.update({open: false});
      });
      container.appendChild(closeButton);
      return container;
    }
  });
  map.addChild(drawerControl);
}

main();
async function main() {
  const [ymaps3React] = await Promise.all([ymaps3.import('@yandex/ymaps3-reactify'), ymaps3.ready]);
  const reactify = ymaps3React.reactify.bindTo(React, ReactDOM);

  const {useState, useCallback} = React;
  const {YMap} = reactify.module(ymaps3);
  const {YMapDrawerControl} = reactify.module(await import('@yandex/ymaps3-drawer-control'));

  const App = () => {
    const [open, setOpen] = useState(false);
    const content = useCallback(
      () => (
        <div>
          <h1>Hello world!</h1>
          <button onClick={() => setOpen(false)}>Close</button>
        </div>
      ),
      []
    );
    const onOpenChange = (value: boolean) => {
      setOpen(!value);
    };

    return (
      <YMap location={LOCATION}>
        {/* any map child */}
        <YMapDrawerControl position="left" width={300} content={content} open={open} onOpenChange={onOpenChange} />
      </YMap>
    );
  };
}

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-drawer-control@latest');

Just use ymaps3.import:

const {YMapDrawerControl} = await ymaps3.import('@yandex/ymaps3-drawer-control');

YMapDrawerControl props description

Name	Type	Default	Description
position	"left", "right", "top", "bottom"	"left"	Specifies which side of the map the drawer opens from.
transitionDuration	number, {open: number; close: number}	500	Duration of the open/close animation in milliseconds.
open	boolean		Flag indicating whether the drawer is open.
width	string | number		Fixed width of the drawer. If not specified, the drawer adjusts to the content's width.
maxWidth	string | number		Maximum width of the drawer.
minWidth	string | number		Minimum width of the drawer.
height	string | number		Fixed height of the drawer. If not specified, the drawer adjusts to the content's height.
maxHeight	string | number		Maximum height of the drawer.
minHeight	string | number		Minimum height of the drawer.
onOpenChange	(open: boolean) => void		Drawer open status change handler.
verticalTriggerPosition	number	"center"	Vertical position of the button that opens the drawer.
horizontalTriggerPosition	number	"center"	Horizontal position of the button that opens the drawer.
content	() => HTMLElement | YMapEntity		Function that returns the drawer's content as an HTMLElement or an YMapEntity.