All docsMapbox GL JSAPI ReferenceEvents and event types

Events and event types

Map and other Mapbox GL JS classes emit events in response to user interactions or changes in state. Evented is the interface used to bind and unbind listeners for these events. This page describes the different types of events that Mapbox GL JS can raise.

You can learn more about the originating events here:

Evented

src/util/evented.js

Methods mixed in to other classes for event capabilities.

Instance Members

MapMouseEvent

src/ui/events.js

MapMouseEvent is the event type for mouse-related map events.

Extends Object.

Example

// The `click` event is an example of a `MapMouseEvent`.
// Set up an event listener on the map.
map.on('click', function(e) {
// The event object (e) contains information like the
// coordinates of the point on the map that was clicked.
console.log('A click event has occurred at ' + e.lngLat);
});

Instance Members

MapTouchEvent

src/ui/events.js

MapTouchEvent is the event type for touch-related map events.

Extends Object.

Instance Members

MapBoxZoomEvent

src/ui/events.js

A MapBoxZoomEvent is the event type for the boxzoom-related map events emitted by the BoxZoomHandler.

Properties

originalEvent(MouseEvent): The DOM event that triggered the boxzoom event. Can be a MouseEvent or KeyboardEvent
type(string): The type of boxzoom event. One of boxzoomstart , boxzoomend or boxzoomcancel
target(Map): The Map instance that triggerred the event

MapDataEvent

src/ui/events.js

A MapDataEvent object is emitted with the Map.event:data and Map.event:dataloading events. Possible values for dataTypes are:

  • 'source': The non-tile data associated with any source
  • 'style': The style used by the map

Properties

type(string): The event type.
dataType(string): The type of data that has changed. One of 'source' , 'style' .
isSourceLoaded(boolean?): True if the event has a dataType of source and the source has no outstanding network requests.
source(Object?): The style spec representation of the source if the event has a dataType of source .
sourceDataType(string?): Included if the event has a dataType of source and the event signals that internal data has been received or changed. Possible values are metadata , content and visibility .
tile(Object?): The tile being loaded or changed, if the event has a dataType of source and the event is related to loading of a tile.
coord(Coordinate?): The coordinate of the tile if the event has a dataType of source and the event is related to loading of a tile.

Example

// The sourcedata event is an example of MapDataEvent.
// Set up an event listener on the map.
map.on('sourcedata', function(e) {
if (e.isSourceLoaded) {
// Do something when the source has finished loading
}
});

MapWheelEvent

src/ui/events.js

MapWheelEvent is the event type for the wheel map event.

Extends Object.

Instance Members