MapLibre GL JS
API Reference
On This Page
Table of Contents
MapMouseEvent
Extends Object
MapMouseEvent
is the event type for mouse-related map events.
Parameters
type
stringmap
MaporiginalEvent
MouseEventdata
Object (optional, default{}
)
Examples
// 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);
});
type
The event type (one of Map.event:mousedown, Map.event:mouseup, Map.event:click, Map.event:dblclick, Map.event:mousemove, Map.event:mouseover, Map.event:mouseenter, Map.event:mouseleave, Map.event:mouseout, Map.event:contextmenu).
Type: ("mousedown"
| "mouseup"
| "click"
| "dblclick"
| "mousemove"
| "mouseover"
| "mouseenter"
| "mouseleave"
| "mouseout"
| "contextmenu"
)
target
The Map
object that fired the event.
Type: Map
originalEvent
The DOM event which caused the map event.
Type: MouseEvent
point
The pixel coordinates of the mouse cursor, relative to the map and measured from the top left corner.
Type: Point
lngLat
The geographic location on the map of the mouse cursor.
Type: LngLat
preventDefault
Prevents subsequent default processing of the event by the map.
Calling this method will prevent the following default map behaviors:
- On
mousedown
events, the behavior of DragPanHandler - On
mousedown
events, the behavior of DragRotateHandler - On
mousedown
events, the behavior of BoxZoomHandler - On
dblclick
events, the behavior of DoubleClickZoomHandler
MapTouchEvent
Extends Object
MapTouchEvent
is the event type for touch-related map events.
Parameters
type
stringmap
MaporiginalEvent
TouchEvent
type
The event type.
Type: ("touchstart"
| "touchend"
| "touchcancel"
)
target
The Map
object that fired the event.
Type: Map
originalEvent
The DOM event which caused the map event.
Type: TouchEvent
lngLat
The geographic location on the map of the center of the touch event points.
Type: LngLat
point
The pixel coordinates of the center of the touch event points, relative to the map and measured from the top left corner.
Type: Point
points
The array of pixel coordinates corresponding to a
touch event’s touches
property.
Type: Array<Point>
lngLats
The geographical locations on the map corresponding to a
touch event’s touches
property.
Type: Array<LngLat>
preventDefault
Prevents subsequent default processing of the event by the map.
Calling this method will prevent the following default map behaviors:
- On
touchstart
events, the behavior of DragPanHandler - On
touchstart
events, the behavior of TouchZoomRotateHandler
MapWheelEvent
Extends Object
MapWheelEvent
is the event type for the wheel
map event.
Parameters
type
stringmap
MaporiginalEvent
WheelEvent
type
The event type.
Type: "wheel"
target
The Map
object that fired the event.
Type: Map
originalEvent
The DOM event which caused the map event.
Type: WheelEvent
preventDefault
Prevents subsequent default processing of the event by the map.
Calling this method will prevent the the behavior of ScrollZoomHandler.
MapBoxZoomEvent
A MapBoxZoomEvent
is the event type for the boxzoom-related map events emitted by the BoxZoomHandler.
Type: Object
Properties
originalEvent
MouseEvent The DOM event that triggered the boxzoom event. Can be aMouseEvent
orKeyboardEvent
type
string The type of boxzoom event. One ofboxzoomstart
,boxzoomend
orboxzoomcancel
target
Map TheMap
instance that triggerred the event
MapDataEvent
A MapDataEvent
object is emitted with the Map.event:data
and Map.event:dataloading events. Possible values for
dataType
s are:
'source'
: The non-tile data associated with any source'style'
: The style used by the map
Type: Object
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 adataType
ofsource
and the source has no outstanding network requests.source
Object? The style spec representation of the source if the event has adataType
ofsource
.sourceDataType
string? Included if the event has adataType
ofsource
and the event signals that internal data has been received or changed. Possible values aremetadata
,content
andvisibility
.tile
Object? The tile being loaded or changed, if the event has adataType
ofsource
and the event is related to loading of a tile.coord
Coordinate? The coordinate of the tile if the event has adataType
ofsource
and the event is related to loading of a tile.
Examples
// 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
}
});
Evented
Methods mixed in to other classes for event capabilities.
on
Adds a listener to a specified event type.
Parameters
type
string The event type to add a listen for.listener
Function The function to be called when the event is fired. The listener function is called with the data object passed tofire
, extended withtarget
andtype
properties.
Returns Object this
off
Removes a previously registered event listener.
Parameters
type
string The event type to remove listeners for.listener
Function The listener function to remove.
Returns Object this
once
Adds a listener that will be called only once to a specified event type.
The listener will be called first time the event fires after the listener is registered.
Parameters
type
string The event type to listen for.listener
Function The function to be called when the event is fired the first time.
Returns Object this