YMapControls

The YMapControls class is a DOM container used to combine visual controls so that they can be conveniently arranged on the map.

Usage example

vanilla

react

vue

const map = new YMap(element, {
  location: {center: [37.588144, 55.733842], zoom: 14}
});
const controls = new YMapControls({position: 'top left', orientation: 'vertical'});
controls.addChild(new YMapGeolocationControlI({}));
controls.addChild(new YMapZoomControlI({}));
map.addChild(controls);

Creating custom elements

You can create custom visual elements.

Example

Adding a button that moves the map center to Moscow:

const map = new YMap(element, {
  location: {center: [37.588144, 55.733842], zoom: 14}
});

const controls = new YMapControls({position: 'top left'});
const button = new YMapControlButton({
  text: 'Moscow',
  onClick: () => {
    map.setLocation({
      center: [37.588144, 55.733842],
      zoom: 5
    });
  }
});

controls.addChild(button);
map.addChild(controls);