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:
Mapevents fire when a user interacts with aMap.Markerevents fire when a user interacts with aMarker.Popupevents fire when a user interacts with aPopup.GeolocationControlevents fire when a user interacts with aGeolocationControl.
Evented
src/util/evented.tsEvented 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
MapBoxZoomEvent
src/ui/events.tsMapBoxZoomEvent is a class used to generate
the events 'boxzoomstart', 'boxzoomend', and 'boxzoomcancel'.
For a full list of available events, see Map events.
Properties
(MouseEvent): The DOM event that triggered the boxzoom event. Can be a
MouseEvent
or
KeyboardEvent
.
(("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: {...}
// }
Related
MapDataEvent
src/ui/events.tsMapDataEvent is a type of events related to loading data, styles, and sources.
For a full list of available events, see Map events.
Properties
(Coordinate?): The coordinate of the tile if the event has a
dataType
of
source
and
the event is related to loading of a tile.
(("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.
(boolean?): True if the event has a
dataType
of
source
and the source has no outstanding network requests.
(Object?): The
style spec representation of the source
if the event has a
dataType
of
source
.
(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
, and
error
.
(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.
(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.
(("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"
// }
});
Related
MapMouseEvent
src/ui/events.tsMapMouseEvent 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.
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
Related
MapTouchEvent
src/ui/events.tsMapTouchEvent 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.
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
Related
MapWheelEvent
src/ui/events.tsMapWheelEvent 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.
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"
// }