Standard visual elements

Some visual elements are part of external packages. Before using it, you must install the appropriate package.

For more information about their installation, see JS API packages.

LocationLocation

Determines the user's location by calling the browser's standard geolocation function and/or identifying the user's IP address.

This is part of the package @yandex/ymaps3-default-ui-theme.

Class: YMapGeolocationControl.

Example

Add the location button:

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

const controls = new YMapControls();
controls.addChild(new YMapGeolocationControl());

map.addChild(controls);

Zoom buttonsZoom buttons

Change the map's zoom coefficient.

This is part of the package @yandex/ymaps3-default-ui-theme.

Class: YMapZoomControl.

The following parameters are used to set up the map zoom:

• easing. Possible values: linear, ease, ease-in, ease-out, ease-in-out.
• zoomRange. If the current zoom level is different from this setting, the zoom buttons are locked.

Example 1

Using the easing parameter:

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

const controls = new YMapControls();
controls.addChild(
  new YMapZoomControl({
    easing: 'linear'
  })
);

map.addChild(controls);

Example 2

Using the easing and zoomRange parameters:

const map = new YMap(element, {
  zoomRange: {min: 1, max: 5},
  location: {center: [25.229762, 55.289311], zoom: 4}
});

const controls = new YMapControls();
controls.addChild(
  new YMapZoomControl({
    easing: 'linear'
  })
);

map.addChild(controls);

ButtonButton

Used to add a standard button and set up custom behavior for it.

It is part of the main module of the JS API.

Class: YMapButtonControl.

Example

// Before using it, you need to wait for the main JS API module to load
await ymaps3.ready;

const button = new ymaps3.YMapControlButton({
  text: 'Hello',
  onClick: () => alert('Hello world!')
});