Control elements

Both visual controls and a set of user-map interaction behaviors can be used to change the state of the map.

Visual elements

Visual elements are buttons and other graphic elements by means of which users can perform actions with the map.
For example, zoom in and out, plot routes, and so on. Visual elements are usually placed in the map viewport
and are fixed (this means that users can't move them).

In the library, visual objects are represented by classes with the Control postfix: MMapZoomControl, MMapGeolocationControl.
They are based on lower-level elements such as MMapControl, MMapControlButton.
Elements can be used together or separately.
In the former case, it's easier to manage their shared location.
To do this, add them to the shared MMapControls container.

More about visual elements

Positioning

The following directives are used to set element positioning:

  • left
  • right
  • bottom
  • top

Directives can be used together or separately in any order.

No. Example Value
1 top Placing the elements at the top horizontally in a line.
2 right Placing the elements on the right vertically in a line.
3 top left Placing the elements in the upper left corner (orientation is set separately).
4 right bottom Placing the elements in the lower right corner (orientation is set separately).

Orientation

The following directives are used to set element orientation:

  • horizontal
  • vertical

The orientation can be either derived from the position:

  • horizontal for top and bottom
  • vertical for left and right

or set separately (for all other positioning choices). By default horizontal is accepted.

Usage example

const map = new MMap(element, {
  location: {center: [25.229762, 55.289311], zoom: 14}
});
const controls = new MMapControls({position: 'top left', orientation: 'vertical'});
controls.addChild(new MMapGeolocationControlI({}));
controls.addChild(new MMapZoomControlI({}));
map.addChild(controls);

Creating custom elements

You can create custom visual elements.

Example

Adding a button that moves the map center to Dubai:

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

const controls = new MMapControls({position: 'top left horizontal'});
const button = new MMapControlButton({
  text: 'Dubai',
  onClick: () => {
    map.setLocation({
      center: [25.229762, 55.289311],
      zoom: 5
    });
  }
});

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

Behaviors

In addition to the visual controls, the map also has a set of behaviors: reaction to the mouse wheel,
dragging the map using the left mouse button, and so on. It is configured through the map's behaviors field.

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

To see the full list of available behaviors, go to Events.