Controls

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

Visual elementsVisual 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 elements are represented by classes with the Control postfix: MMapZoomControl, MMapGeolocationControl supplied from the separate package https://www.npmjs.com/package/@mappable-world/mappable-default-ui-theme.

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.

PositioningPositioning

The following directives are used to set element positioning:

• left
• right
• bottom
• top

Directives can be used separately or together in any order.

OrientationOrientation

The following directives are used to set element orientation:

• horizontal
• vertical

Orientation can be derived from the position:

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

or set separately (for all other positioning options). The default value is horizontal.

BehaviorsBehaviors

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']
});

For the full list of available behaviors, see BehaviorMapEventHandler.