---
title: "MapLayerEventType | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Type Alias MapLayerEventType

`MapLayerEventType` - a mapping between the event name and the event. !!! note These events are compatible with the optional `layerId` parameter. If `layerId` is included as the second argument in [Map.on](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#on), the event listener will fire only when the event action contains a visible portion of the specified layer. The following example can be used for all the events.

#### Example[](#example)

```typescript
// Initialize the map
let map = new Map({ // map options });
// Set an event listener for a specific layer
map.on('the-event-name', 'poi-label', (e) => {
  console.log('An event has occurred on a visible portion of the poi-label layer');
});
```

type MapLayerEventType \= {  
    [click](#click): [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/);  
    [contextmenu](#contextmenu): [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/);  
    [dblclick](#dblclick): [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/);  
    [mousedown](#mousedown): [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/);  
    [mouseenter](#mouseenter): [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/);  
    [mouseleave](#mouseleave): [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/);  
    [mousemove](#mousemove): [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/);  
    [mouseout](#mouseout): [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/);  
    [mouseover](#mouseover): [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/);  
    [mouseup](#mouseup): [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/);  
    [touchcancel](#touchcancel): [MapLayerTouchEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerTouchEvent/);  
    [touchend](#touchend): [MapLayerTouchEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerTouchEvent/);  
    [touchstart](#touchstart): [MapLayerTouchEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerTouchEvent/);  
}

##### Index

### Properties[](#properties)

[click](#click) [contextmenu](#contextmenu) [dblclick](#dblclick) [mousedown](#mousedown) [mouseenter](#mouseenter) [mouseleave](#mouseleave) [mousemove](#mousemove) [mouseout](#mouseout) [mouseover](#mouseover) [mouseup](#mouseup) [touchcancel](#touchcancel) [touchend](#touchend) [touchstart](#touchstart)

## Properties[](#properties-1)

### click[](#click)

click: [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/)

Fired when a pointing device (usually a mouse) is pressed and released contains a visible portion of the specified layer.

#### See[](#see)

-   [Measure distances](https://maplibre.org/maplibre-gl-js/docs/examples/measure-distances/)
-   [Center the map on a clicked symbol](https://maplibre.org/maplibre-gl-js/docs/examples/center-the-map-on-a-clicked-symbol/)

### contextmenu[](#contextmenu)

contextmenu: [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/)

Fired when the right button of the mouse is clicked or the context menu key is pressed within visible portion of the specified layer.

### dblclick[](#dblclick)

dblclick: [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/)

Fired when a pointing device (usually a mouse) is pressed and released twice contains a visible portion of the specified layer.

!!! note Under normal conditions, this event will be preceded by two `click` events.

### mousedown[](#mousedown)

mousedown: [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/)

Fired when a pointing device (usually a mouse) is pressed while inside a visible portion of the specified layer.

#### See[](#see-1)

[Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-draggable-point/)

### mouseenter[](#mouseenter)

mouseenter: [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/)

Fired when a pointing device (usually a mouse) enters a visible portion of a specified layer from outside that layer or outside the map canvas.

#### See[](#see-2)

-   [Center the map on a clicked symbol](https://maplibre.org/maplibre-gl-js/docs/examples/center-the-map-on-a-clicked-symbol/)
-   [Display a popup on click](https://maplibre.org/maplibre-gl-js/docs/examples/display-a-popup-on-click/)

### mouseleave[](#mouseleave)

mouseleave: [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/)

Fired when a pointing device (usually a mouse) leaves a visible portion of a specified layer, or leaves the map canvas.

#### See[](#see-3)

-   [Highlight features under the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-hover-effect/)
-   [Display a popup on click](https://maplibre.org/maplibre-gl-js/docs/examples/display-a-popup-on-click/)

### mousemove[](#mousemove)

mousemove: [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/)

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

#### See[](#see-4)

-   [Get coordinates of the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/get-coordinates-of-the-mouse-pointer/)
-   [Highlight features under the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-hover-effect/)
-   [Display a popup on over](https://maplibre.org/maplibre-gl-js/docs/examples/display-a-popup-on-hover/)
-   [Animate symbol to follow the mouse](https://maplibre.org/maplibre-gl-js/docs/examples/animate-symbol-to-follow-the-mouse/)

### mouseout[](#mouseout)

mouseout: [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/)

Fired when a point device (usually a mouse) leaves the visible portion of the specified layer.

### mouseover[](#mouseover)

mouseover: [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/)

Fired when a pointing device (usually a mouse) is moved inside a visible portion of the specified layer.

#### See[](#see-5)

-   [Get coordinates of the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/get-coordinates-of-the-mouse-pointer/)
-   [Highlight features under the mouse pointer](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-hover-effect/)
-   [Display a popup on hover](https://maplibre.org/maplibre-gl-js/docs/examples/display-a-popup-on-hover/)

### mouseup[](#mouseup)

mouseup: [MapLayerMouseEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerMouseEvent/)

Fired when a pointing device (usually a mouse) is released while inside a visible portion of the specified layer.

#### See[](#see-6)

[Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-draggable-point/)

### touchcancel[](#touchcancel)

touchcancel: [MapLayerTouchEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerTouchEvent/)

Fired when a [`touchstart`](https://developer.mozilla.org/en-US/docs/Web/Events/touchstart) event occurs within the visible portion of the specified layer.

#### See[](#see-7)

[Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-draggable-point/)

### touchend[](#touchend)

touchend: [MapLayerTouchEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerTouchEvent/)

Fired when a [`touchend`](https://developer.mozilla.org/en-US/docs/Web/Events/touchend) event occurs within the visible portion of the specified layer.

#### See[](#see-8)

[Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-draggable-point/)

### touchstart[](#touchstart)

touchstart: [MapLayerTouchEvent](https://docs.maptiler.com/sdk-js/api-reference/types/MapLayerTouchEvent/)

Fired when a [`touchstart`](https://developer.mozilla.org/en-US/docs/Web/Events/touchstart) event occurs within the visible portion of the specified layer.

#### See[](#see-9)

[Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/create-a-draggable-point/)