Skip to content

Both copy text to your clipboard — Build with AI copies a setup prompt to paste into Claude Code, Cursor, Codex or Copilot; Copy page as Markdown copies this page to paste into a chat. How it works

MapEventType ​

MapEventType = object

Defined in: src/ui/events.ts:149

MapEventType - a mapping between the event name and the event value. These events are used with the Map#on method. When using a layerId with Map#on method, please refer to MapLayerEventType. The following example can be used for all the events.

Example ​

ts
// Initialize the map
let map = new Map({ // map options });
// Set an event listener
map.on('the-event-name', () => {
  console.log('An event has occurred!');
});

Properties ​

boxzoomcancel ​

boxzoomcancel: MapLibreZoomEvent

Defined in: src/ui/events.ts:251

Fired when the user cancels a "box zoom" interaction, or when the bounding box does not meet the minimum size threshold. See BoxZoomHandler.


boxzoomend ​

boxzoomend: MapLibreZoomEvent

Defined in: src/ui/events.ts:259

Fired when a "box zoom" interaction ends. See BoxZoomHandler.


boxzoomstart ​

boxzoomstart: MapLibreZoomEvent

Defined in: src/ui/events.ts:255

Fired when a "box zoom" interaction starts. See BoxZoomHandler.


click ​

click: MapMouseEvent

Defined in: src/ui/events.ts:285

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

See ​


contextmenu ​

contextmenu: MapMouseEvent

Defined in: src/ui/events.ts:289

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


cooperativegestureprevented ​

cooperativegestureprevented: MapLibreEvent<WheelEvent | TouchEvent> & object

Defined in: src/ui/events.ts:419

Fired whenever the cooperativeGestures option prevents a gesture from being handled by the map. This is useful for showing your own UI when this happens.

Type declaration ​

gestureType ​

gestureType: "wheel_zoom" | "touch_pan"


data ​

data: MapDataEvent

Defined in: src/ui/events.ts:210

Fired when any map data loads or changes. See MapDataEvent for more information.

See ​

Display HTML clusters with custom properties


dataabort ​

dataabort: MapDataEvent

Defined in: src/ui/events.ts:242

Fired when a request for one of the map's sources' tiles or data is aborted.


dataloading ​

dataloading: MapDataEvent

Defined in: src/ui/events.ts:205

Fired when any map data (style, source, tile, etc) begins loading or changing asynchronously. All dataloading events are followed by a data, dataabort or error event.


dblclick ​

dblclick: MapMouseEvent

Defined in: src/ui/events.ts:295

Fired when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession.

Note: Under normal conditions, this event will be preceded by two click events.


drag ​

drag: MapLibreEvent<MouseEvent | TouchEvent | undefined>

Defined in: src/ui/events.ts:385

Fired repeatedly during a "drag to pan" interaction. See DragPanHandler.


dragend ​

dragend: MapLibreEvent<MouseEvent | TouchEvent | undefined>

Defined in: src/ui/events.ts:390

Fired when a "drag to pan" interaction ends. See DragPanHandler.

See ​

Create a draggable marker


dragstart ​

dragstart: MapLibreEvent<MouseEvent | TouchEvent | undefined>

Defined in: src/ui/events.ts:381

Fired when a "drag to pan" interaction starts. See DragPanHandler.


error ​

error: ErrorEvent

Defined in: src/ui/events.ts:156

Fired when an error occurs. This is GL JS's primary error reporting mechanism. We use an event instead of throw to better accommodate asynchronous operations. If no listeners are bound to the error event, the error will be printed to the console.


idle ​

idle: MapLibreEvent

Defined in: src/ui/events.ts:174

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

load ​

load: MapLibreEvent

Defined in: src/ui/events.ts:165

Fired immediately after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.

See ​


mousedown ​

mousedown: MapMouseEvent

Defined in: src/ui/events.ts:316

Fired when a pointing device (usually a mouse) is pressed within the map.

See ​

Create a draggable point


mousemove ​

mousemove: MapMouseEvent

Defined in: src/ui/events.ts:304

Fired when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map.

See ​


mouseout ​

mouseout: MapMouseEvent

Defined in: src/ui/events.ts:320

Fired when a point device (usually a mouse) leaves the map's canvas.


mouseover ​

mouseover: MapMouseEvent

Defined in: src/ui/events.ts:330

Fired when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements.

See ​


mouseup ​

mouseup: MapMouseEvent

Defined in: src/ui/events.ts:310

Fired when a pointing device (usually a mouse) is released within the map.

See ​

Create a draggable point


move ​

move: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>

Defined in: src/ui/events.ts:343

Fired repeatedly during an animated transition from one view to another, as the result of either user interaction or methods such as Map#flyTo.

See ​

Display HTML clusters with custom properties


moveend ​

moveend: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>

Defined in: src/ui/events.ts:350

Fired just after the map completes a transition from one view to another, as the result of either user interaction or methods such as Map#jumpTo.

See ​

Display HTML clusters with custom properties


movestart ​

movestart: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>

Defined in: src/ui/events.ts:336

Fired just before the map begins a transition from one view to another, as the result of either user interaction or methods such as Map#jumpTo.


pitch ​

pitch: MapLibreEvent<MouseEvent | TouchEvent | undefined>

Defined in: src/ui/events.ts:401

Fired repeatedly during the map's pitch (tilt) animation between one state and another as the result of either user interaction or methods such as Map#flyTo.


pitchend ​

pitchend: MapLibreEvent<MouseEvent | TouchEvent | undefined>

Defined in: src/ui/events.ts:406

Fired immediately after the map's pitch (tilt) finishes changing as the result of either user interaction or methods such as Map#flyTo.


pitchstart ​

pitchstart: MapLibreEvent<MouseEvent | TouchEvent | undefined>

Defined in: src/ui/events.ts:395

Fired whenever the map's pitch (tilt) begins a change as the result of either user interaction or methods such as Map#flyTo .


projectiontransition ​

projectiontransition: MapProjectionEvent

Defined in: src/ui/events.ts:425

Fired when map's projection is modified in other ways than by map being moved.


remove ​

remove: MapLibreEvent

Defined in: src/ui/events.ts:178

Fired immediately after the map has been removed with Map#remove.


render ​

render: MapLibreEvent

Defined in: src/ui/events.ts:187

Fired whenever the map is drawn to the screen, as the result of

  • a change to the map's position, zoom, pitch, or bearing
  • a change to the map's style
  • a change to a GeoJSON source
  • the loading of a vector tile, GeoJSON file, glyph, or sprite

resize ​

resize: MapLibreEvent

Defined in: src/ui/events.ts:191

Fired immediately after the map has been resized.


rotate ​

rotate: MapLibreEvent<MouseEvent | TouchEvent | undefined>

Defined in: src/ui/events.ts:373

Fired repeatedly during a "drag to rotate" interaction. See DragRotateHandler.


rotateend ​

rotateend: MapLibreEvent<MouseEvent | TouchEvent | undefined>

Defined in: src/ui/events.ts:377

Fired when a "drag to rotate" interaction ends. See DragRotateHandler.


rotatestart ​

rotatestart: MapLibreEvent<MouseEvent | TouchEvent | undefined>

Defined in: src/ui/events.ts:369

Fired when a "drag to rotate" interaction starts. See DragRotateHandler.


sourcedata ​

sourcedata: MapSourceDataEvent

Defined in: src/ui/events.ts:227

Fired when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes.


sourcedataabort ​

sourcedataabort: MapSourceDataEvent

Defined in: src/ui/events.ts:246

Fired when a request for one of the map's sources' data is aborted.


sourcedataloading ​

sourcedataloading: MapSourceDataEvent

Defined in: src/ui/events.ts:216

Fired when one of the map's sources begins loading or changing asynchronously. All sourcedataloading events are followed by a sourcedata, sourcedataabort or error event.


styledata ​

styledata: MapStyleDataEvent

Defined in: src/ui/events.ts:231

Fired when the map's style loads or changes.


styledataloading ​

styledataloading: MapStyleDataEvent

Defined in: src/ui/events.ts:222

Fired when the map's style begins loading or changing asynchronously. All styledataloading events are followed by a styledata or error event.


styleimagemissing ​

styleimagemissing: MapStyleImageMissingEvent

Defined in: src/ui/events.ts:238

Fired when an icon or pattern needed by the style is missing. The missing image can be added with Map#addImage within this event listener callback to prevent the image from being skipped. This event can be used to dynamically generate icons and patterns.

See ​

Generate and add a missing icon to the map


terrain ​

terrain: MapTerrainEvent

Defined in: src/ui/events.ts:414

Fired when terrain is changed


touchcancel ​

touchcancel: MapTouchEvent

Defined in: src/ui/events.ts:263

Fired when a touchcancel event occurs within the map.


touchend ​

touchend: MapTouchEvent

Defined in: src/ui/events.ts:273

Fired when a touchend event occurs within the map.

See ​

Create a draggable point


touchmove ​

touchmove: MapTouchEvent

Defined in: src/ui/events.ts:268

Fired when a touchmove event occurs within the map.

See ​

Create a draggable point


touchstart ​

touchstart: MapTouchEvent

Defined in: src/ui/events.ts:278

Fired when a touchstart event occurs within the map.

See ​

Create a draggable point


webglcontextlost ​

webglcontextlost: MapContextEvent

Defined in: src/ui/events.ts:195

Fired when the WebGL context is lost.


webglcontextrestored ​

webglcontextrestored: MapContextEvent

Defined in: src/ui/events.ts:199

Fired when the WebGL context is restored.


wheel ​

wheel: MapWheelEvent

Defined in: src/ui/events.ts:410

Fired when a wheel event occurs within the map.


zoom ​

zoom: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>

Defined in: src/ui/events.ts:360

Fired repeatedly during an animated transition from one zoom level to another, as the result of either user interaction or methods such as Map#flyTo.


zoomend ​

zoomend: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>

Defined in: src/ui/events.ts:365

Fired just after the map completes a transition from one zoom level to another, as the result of either user interaction or methods such as Map#flyTo.


zoomstart ​

zoomstart: MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>

Defined in: src/ui/events.ts:355

Fired just before the map begins a transition from one zoom level to another, as the result of either user interaction or methods such as Map#flyTo.