---
title: "Handler | 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.

# Interface Handler

Handlers interpret dom events and return camera changes that should be applied to the map (`HandlerResult`s). The camera changes are all deltas. The handler itself should have no knowledge of the map's current state. This makes it easier to merge multiple results and keeps handlers simpler. For example, if there is a mousedown and mousemove, the mousePan handler would return a `panDelta` on the mousemove.

interface Handler {  
    [contextmenu](#contextmenu)?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [dblclick](#dblclick)?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [keydown](#keydown)?: (e: [KeyboardEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyboardEvent/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [keyup](#keyup)?: (e: [KeyboardEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyboardEvent/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [mousedown](#mousedown)?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [mousemove](#mousemove)?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [mousemoveWindow](#mousemovewindow)?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [mouseup](#mouseup)?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [mouseupWindow](#mouseupwindow)?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [renderFrame](#renderframe)?: () \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [touchcancel](#touchcancel)?: (  
        e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
        points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
        mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
    ) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [touchend](#touchend)?: (  
        e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
        points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
        mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
    ) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [touchmove](#touchmove)?: (  
        e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
        points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
        mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
    ) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [touchmoveWindow](#touchmovewindow)?: (  
        e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
        points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
        mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
    ) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [touchstart](#touchstart)?: (  
        e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
        points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
        mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
    ) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [wheel](#wheel)?: (e: [WheelEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WheelEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/);  
    [disable](#disable-1)(): void;  
    [enable](#enable-1)(): void;  
    [isActive](#isactive-1)(): boolean;  
    [isEnabled](#isenabled-1)(): boolean;  
    [reset](#reset-1)(): void;  
}

#### Hierarchy ([View Summary](https://docs.maptiler.com/sdk-js/api-reference/hierarchy/#Handler))

-   Handler
    -   [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/DragMoveHandler/)
    -   [DragMoveHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.DragMoveHandler/)

#### Implemented by

-   [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/)
-   [ClickZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ClickZoomHandler/)
-   [CooperativeGesturesHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.CooperativeGesturesHandler/)
-   [KeyboardHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.KeyboardHandler/)
-   [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/)
-   [TapDragZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TapDragZoomHandler/)
-   [TapZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TapZoomHandler/)
-   [TouchPanHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TouchPanHandler/)
-   [TwoFingersTouchHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TwoFingersTouchHandler/)

##### Index

### Properties[](#properties)

[contextmenu?](#contextmenu) [dblclick?](#dblclick) [keydown?](#keydown) [keyup?](#keyup) [mousedown?](#mousedown) [mousemove?](#mousemove) [mousemoveWindow?](#mousemovewindow) [mouseup?](#mouseup) [mouseupWindow?](#mouseupwindow) [renderFrame?](#renderframe) [touchcancel?](#touchcancel) [touchend?](#touchend) [touchmove?](#touchmove) [touchmoveWindow?](#touchmovewindow) [touchstart?](#touchstart) [wheel?](#wheel)

### Methods[](#methods)

[disable](#disable) [enable](#enable) [isActive](#isactive) [isEnabled](#isenabled) [reset](#reset)

## Properties[](#properties-1)

### `Optional` `Readonly`contextmenu[](#contextmenu)

contextmenu?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

### `Optional` `Readonly`dblclick[](#dblclick)

dblclick?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

### `Optional` `Readonly`keydown[](#keydown)

keydown?: (e: [KeyboardEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyboardEvent/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

### `Optional` `Readonly`keyup[](#keyup)

keyup?: (e: [KeyboardEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyboardEvent/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

### `Optional` `Readonly`mousedown[](#mousedown)

mousedown?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

### `Optional` `Readonly`mousemove[](#mousemove)

mousemove?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

### `Optional` `Readonly`mousemoveWindow[](#mousemovewindow)

mousemoveWindow?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

### `Optional` `Readonly`mouseup[](#mouseup)

mouseup?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

### `Optional` `Readonly`mouseupWindow[](#mouseupwindow)

mouseupWindow?: (e: [MouseEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MouseEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

### `Optional` `Readonly`renderFrame[](#renderframe)

renderFrame?: () \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

`renderFrame` is the only non-dom event. It is called during render frames and can be used to smooth camera changes (see scroll handler).

### `Optional` `Readonly`touchcancel[](#touchcancel)

touchcancel?: (  
    e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
    points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
    mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

### `Optional` `Readonly`touchend[](#touchend)

touchend?: (  
    e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
    points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
    mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

### `Optional` `Readonly`touchmove[](#touchmove)

touchmove?: (  
    e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
    points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
    mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

### `Optional` `Readonly`touchmoveWindow[](#touchmovewindow)

touchmoveWindow?: (  
    e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
    points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
    mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

### `Optional` `Readonly`touchstart[](#touchstart)

touchstart?: (  
    e: [TouchEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TouchEvent/),  
    points: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)\[\],  
    mapTouches: [Touch](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.Touch/)\[\],  
) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

### `Optional` `Readonly`wheel[](#wheel)

wheel?: (e: [WheelEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WheelEvent/), point: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)) \=> void | [HandlerResult](https://docs.maptiler.com/sdk-js/api-reference/types/HandlerResult/)

## Methods[](#methods-1)

### disable[](#disable)

-   disable(): void[](#disable-1)
    
    #### Returns void
    

### enable[](#enable)

-   enable(): void[](#enable-1)
    
    #### Returns void
    

### isActive[](#isactive)

-   isActive(): boolean[](#isactive-1)
    
    This is used to indicate if the handler is currently active or not. In case a handler is active, it will block other handlers from getting the relevant events. There is an allow list of handlers that can be active at the same time, which is configured when adding a handler.
    
    #### Returns boolean
    

### isEnabled[](#isenabled)

-   isEnabled(): boolean[](#isenabled-1)
    
    #### Returns boolean
    

### reset[](#reset)

-   reset(): void[](#reset-1)
    
    `reset` can be called by the manager at any time and must reset everything to it's original state
    
    #### Returns void