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 @mappable-world/mappable-default-ui-theme.

Class: MMapGeolocationControl.

Example

Add the location button:

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

const controls = new MMapControls();
controls.addChild(new MMapGeolocationControl());

map.addChild(controls);

Zoom buttonsZoom buttons

Change the map's zoom coefficient.

This is part of the package @mappable-world/mappable-default-ui-theme.

Class: MMapZoomControl.

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 MMap(element, {
  location: {center: [25.229762, 55.289311], zoom: 14}
});

const controls = new MMapControls();
controls.addChild(
  new MMapZoomControl({
    easing: 'linear'
  })
);

map.addChild(controls);

Example 2

Using the easing and zoomRange parameters:

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

const controls = new MMapControls();
controls.addChild(
  new MMapZoomControl({
    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: MMapButtonControl.

Example

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

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