Map Events

Map Load Event

Map Click Event

Map dblclick Event

Map drag Event

Map dragstart Event

Map dragend Event

Map mousemove Event

Map mouseout Event

Map mouseover Event

Map wheel Event

Map Events Quick Reference:

Listening to Map Events via addListener()

• load:

        map.addListener('load', function () { console.log('load');}); 

• click: Fired when a pointing device (usually a mouse) is pressed and released at the same point on the map.

        map.addListener('click', function () { console.log('click');});

• dblclick: Fired when a pointing device (usually a mouse) is clicked twice at the same point on the map.

        map.addListener('dblclick', function () { console.log('dblclick');});

• drag: Fired repeatedly during a "drag to pan" interaction.

        map.addListener('drag', function () { console.log('drag');});

• dragstart: Fired when a "drag to pan" interaction starts.

        map.addListener('dragstart', function () { console.log('dragstart');});

• dragend: Fired when a "drag to pan" interaction ends.

        map.addListener('dragend', function () { console.log('dragend');});

• idle: Fired after the last frame rendered before the map enters an "idle" state:
  • No camera transitions are in progress
  • All currently requested tiles have loaded
  • All fade/transition animations have completed

        map.addListener('idle', function () { console.log('idle');});

• mousemove: Fired when a pointing device (usually a mouse) is moved within the map.

        map.addListener('mousemove', function () { console.log('mousemove');});

• mouseout: Fired when a point device (usually a mouse) leaves the map's canvas

        map.addListener('mouseout', function () { console.log('mouseout');});

• mouseover: Fired when a pointing device (usually a mouse) is moved within the map.

        map.addListener('mouseover', function () { console.log('mouseover');});

• contextmenu: Fired when the right button of the mouse is clicked or the context menu key is pressed within the map.

        map.addListener('contextmenu', function () { console.log('contextmenu');});

• wheel: Fired when a wheel event occurs within the map.

        map.addListener('wheel', function () { console.log('wheel');});

• touchend: Fired when a touchend event occurs within the map.

        map.addListener('touchend', function () { console.log('touchend');});

• move: Fired repeatedly during an animated transition from one view to another.

        map.addListener('move', function () { console.log('move');});

• moveend: Fired just after the map completes a transition from one view to another.

        map.addListener('moveend', function () { console.log('moveend');});

• rotate: Fired repeatedly during a "drag to rotate" interaction.

        map.addListener('rotate', function () { console.log('rotate');});

• pitchend: Fired immediately after the map's pitch (tilt) finishes changing as the result of either user interaction or methods.

        map.addListener('pitchend', function () { console.log('pitchend');});

Event System:

1. addListener: Pass Event & Callback
2. clearListeners: Remove Event
3. addListenerOnce: Same as addListener but call once

Example

    map.addListener('load', function () { console.log('loaded');});