MMapListener

The MMapListener class is a component for processing map events and its child elements.

For example, MMapListener is responsible for subscribing to the map's events.

Initializing the listenerInitializing the listener

const clickCallback = () => alert('Oh, event!');
const mouseMoveCallback = () => console.log('I am moving the mouse...');

// Creating a listener object.
const mapListener = new MMapListener({
  layer: 'any',
  // Adding handlers to the listener.
  onClick: clickCallback,
  onMouseMove: mouseMoveCallback
});

// Adding the listener to the map.
map.addChild(mapListener);

Detailed example.

Interface of the passed handlerInterface of the passed handler

Handlers passed to the listener have the following interfaces, depending on the type of the event they handle:

• MapEventHandler
• DomEventHandler
• BehaviorMapEventHandler

MapEventHandlerMapEventHandler

MapEventHandler is used for processing map events.

The handler is called with the following parameters:

• For the onUpdate method:

  • type: update.
  • camera: MMapCamera object.
  • location: MMapLocation object position.
  • mapInAction: Flag indicating the presence of map animation at the time of the handler call.

onUpdate usage example:

const updateHandler = ({type, camera, location}) => {
  console.log(type, camera.tilt);

  console.log(location.zoom, location.center);
};

• For the onResize method:

  • type: resize.
  • size: Map container size in PixelCoordinates.
  • mapInAction: Flag indicating the presence of map animation at the time of the handler call.

• For the onStateChanged method:

  • state: MMapState map state object.

const stateChangedHandler = (state) => {
  console.log(state.getLayerState(mappable.MMapDefaultSchemeLayer.defaultProps.source + ':ground', 'tile'));
};

Supported eventsSupported events

• onUpdate: Event activated when the map state changes.
• onResize: Event activated when the map size changes.
• onStateChanged: Event activated when the map state changes.

DomEventHandlerDomEventHandler

The DomEventHandler is used for processing DOM events.

The handler is called with the following parameters:

• object: Object on the map that the event occurred on. Contains the type and entity fields. Depending on typeand entity, it can be MMapFeatue, MMapMarker, or MMapHotspot. If the click was made elsewhere outside of the map, undefined is passed.
• event: Map event. Contains the coordinates (geographical coordinates) and the screenCoordinates (screen coordinates of the point on the map that the event occurred on) fields.

Usage example:

const clickHandler = (object) => {
  if (object?.type === 'hotspot') {
    console.log('Clicked on hotspot!');
  }
};

// Creating a new listener.
const mapListener = new MMapListener({
  layer: 'any',
  onClick: clickHandler
});

// Updating the existing listener.
mapListener.update({
  onClick: anotherClickHandler
});

// Updating the ID if necessary
// or if the value wasn't passed during initialization.
mapListener.update({
  layer: 'markers',
  onClick: clickHandler
});

Supported eventsSupported events

• onTouchStart: An event similar to the 'touchstart' native event.
• onTouchMove: An event similar to the 'touchmove' native event.
• onTouchEnd: An event similar to the 'touchend' native event.
• onTouchCancel: An event similar to the 'touchcancel' native event.
• onPointerDown: An event similar to the 'pointerdown' native event.
• onPointerMove: An event similar to the 'pointermove' native event.
• onPointerUp: An event similar to the 'pointerup' native event.
• onPointerCancel: An event similar to the 'pointercancel' native event.
• onClick: An event triggered when the left mouse button is clicked after a short pause (the pause is necessary to distinguish a single click from a double click).
• onDblClick: An event triggered when double-clicking the left mouse button.
• onFastClick: An event similar to the 'click' native event.
• onRightDblClick: An event triggered when double-clicking the right mouse button.
• onMouseDown: An event similar to the 'mousestart' native event.
• onMouseEnter: An event similar to the 'mouseenter' native event.
• onMouseLeave: An event similar to the 'mouseleave' native event.
• onMouseMove: An event similar to the 'mousemove' native event.
• onContextMenu: An event similar to the 'contextmenu' native event after a short pause (the pause is necessary to distinguish a single click from a double click).

BehaviorMapEventHandlerBehaviorMapEventHandler

The BehaviorMapEventHandler handler is used for distinguishing between the types of map behavior events you can work with in the Mappable Maps API.

The handler is called with the following parameters:

• type: Type of behavior that occurred on the map.
• location: MMapLocation object position.
• camera: MMapCamera object.

Usage example:

const behaviorHandler = ({type}) => {
  if (type === 'pinchRotate') {
    console.log('The user rotates the map with gestures!');
  }
};

mapListener.update({onActionStart: behaviorHandler});

const behaviorStartHandler = ({type}) => {
  if (type === 'dblClick') {
    console.log('1. Started double click.');
  }
};

const behaviorEndHandler = ({type}) => {
  if (type === 'dblClick') {
    console.log('3. Finished double click.');
  }
};

const dblClickHandler = () => console.log('2. Double click.');

mapListener.update({
  onActionStart: behaviorStartHandler,
  onActionEnd: behaviorEndHandler,
  dblClick: dblClickHandler
});

Supported eventsSupported events

• onActionStart: An event triggered when a map-related action is started.
• onActionEnd: An event triggered when a map-related action ends.

Behavior typesBehavior types

• drag: Moving the map with a mouse or a finger gesture on touchscreens.
• pinchZoom: Zooming in/out with a gesture (using two fingers).
• scrollZoom: Zooming in/out with the mouse scroll.
• dblClick: Double-clicking the mouse.
• magnifier: Selecting a rectangular map area by holding the right mouse button and zooming the map in on the selected rectangle according to the following principle: the length of the selected rectangle is 100% of the map container's viewport width after zooming.
• oneFingerZoom: Zooming in/out with one finger.
• mouseRotate: Rotating the map with the mouse.
• mouseTilt: Tilting the map with the mouse.
• pinchRotate: Rotating the map with a gesture.
• panTilt: Tilting the map with a gesture.

ConstructorConstructor

new MMapListener(props)

Constructor parametersConstructor parameters

Inherited fromInherited from

MMapEntity.constructor

PropsProps

MMapListenerProps: <a href="ref/#DomEventsProps">DomEventsProps</a> | <a href="ref/#NullablePartial">NullablePartial</a>&lt;<a href="ref/#MapEvents">MapEvents</a>&gt; | <a href="ref/#NullablePartial">NullablePartial</a>&lt;<a href="ref/#BehaviorEvents">BehaviorEvents</a>&gt;

MethodsMethods

updateupdate

update(changedProps): void

Method of updating object props.

ParametersParameters

ReturnsReturns

void

Inherited fromInherited from

MMapEntity.update