Skip to main content

Events and event types

Join the Mapbox Developers Discord Communityarrow-right

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

githubsrc/util/evented.js

Evented mixes methods into other classes for event capabilities.

Unless you are developing a plugin you will most likely use these methods through classes like Map or Popup.

For lists of events you can listen for, see API documentation for specific classes: Map, Marker, Popup, and GeolocationControl.

Instance Members

Was this section on Evented helpful?

MapBoxZoomEvent

githubsrc/ui/events.js

MapBoxZoomEvent is a class used to generate the events 'boxzoomstart', 'boxzoomend', and 'boxzoomcancel'. For a full list of available events, see Map events.

Type

Object

Properties

originalEvent(MouseEvent): The DOM event that triggered the boxzoom event. Can be a MouseEvent or KeyboardEvent .
target(Map): The Map instance that triggered the event.
type(("boxzoomstart" | "boxzoomend" | "boxzoomcancel")): The type of originating event. For a full list of available events, see Map events .

Example

// Example trigger of a BoxZoomEvent of type "boxzoomstart"
map.on('boxzoomstart', (e) => {
    console.log('event type:', e.type);
    // event type: boxzoomstart
});
// Example of a BoxZoomEvent of type "boxzoomstart"
// {
//   originalEvent: {...},
//   type: "boxzoomstart",
//   target: {...}
// }
Was this section on MapBoxZoomEvent helpful?

MapDataEvent

githubsrc/ui/events.js

MapDataEvent is a class used to generate events related to loading data, styles, and sources. For a full list of available events, see Map events.

Type

Object

Properties

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.
dataType(("source" | "style")): The type of data that has changed. One of 'source' or 'style' , where 'source' refers to the data associated with any source, and 'style' refers to the entire style used by the map.
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 , visibility , and error .
sourceId(string?): The id of the source that triggered the event, if the event has a dataType of source . Same as the id of the object in the source property.
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.
type(("data" | "dataloading" | "styledata" | "styledataloading" | "sourcedata" | "sourcedataloading")): The type of originating event. For a full list of available events, see Map events .

Example

// Example of a MapDataEvent of type "sourcedata"
map.on('sourcedata', (e) => {
    console.log(e);
    // {
    //   dataType: "source",
    //   isSourceLoaded: false,
    //   source: {
    //     type: "vector",
    //     url: "mapbox://mapbox.mapbox-streets-v8,mapbox.mapbox-terrain-v2"
    //   },
    //   sourceDataType: "visibility",
    //   sourceId: "composite",
    //   style: {...},
    //   target: {...},
    //   type: "sourcedata"
    // }
});
Was this section on MapDataEvent helpful?

MapMouseEvent

githubsrc/ui/events.js

MapMouseEvent is a class used by other classes to generate mouse events of specific types such as 'click' or 'hover'. For a full list of available events, see Map events.

Extends Object.

Example

// Example of a MapMouseEvent of type "click"
map.on('click', (e) => {
    console.log(e);
    // {
    //     lngLat: {
    //         lng: 40.203,
    //         lat: -74.451
    //     },
    //     originalEvent: {...},
    //     point: {
    //         x: 266,
    //         y: 464
    //     },
    //      target: {...},
    //      type: "click"
    // }
});

Instance Members

Was this section on MapMouseEvent helpful?

MapTouchEvent

githubsrc/ui/events.js

MapTouchEvent is a class used by other classes to generate mouse events of specific types such as 'touchstart' or 'touchend'. For a full list of available events, see Map events.

Extends Object.

Example

// Example of a MapTouchEvent of type "touch"
map.on('touchstart', (e) => {
    console.log(e);
    // {
    //   lngLat: {
    //      lng: 40.203,
    //      lat: -74.451
    //   },
    //   lngLats: [
    //      {
    //         lng: 40.203,
    //         lat: -74.451
    //      }
    //   ],
    //   originalEvent: {...},
    //   point: {
    //      x: 266,
    //      y: 464
    //   },
    //   points: [
    //      {
    //         x: 266,
    //         y: 464
    //      }
    //   ]
    //   preventDefault(),
    //   target: {...},
    //   type: "touchstart"
    // }
});

Instance Members

Was this section on MapTouchEvent helpful?

MapWheelEvent

githubsrc/ui/events.js

MapWheelEvent is a class used by other classes to generate mouse events of specific types such as 'wheel'. For a full list of available events, see Map events.

Extends Object.

Example

// Example event trigger for a MapWheelEvent of type "wheel"
map.on('wheel', (e) => {
    console.log('event type:', e.type);
    // event type: wheel
});
// Example of a MapWheelEvent of type "wheel"
// {
//   originalEvent: WheelEvent {...},
// 	 target: Map {...},
// 	 type: "wheel"
// }

Instance Members

Was this section on MapWheelEvent helpful?

;

Join the Mapbox Developers Discord Communityarrow-right
Was this page helpful?