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

# Class TouchPanHandler

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.

#### Implements

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

##### Index

### Constructors[](#constructors)

[constructor](#constructor)

### Methods[](#methods)

[disable](#disable) [enable](#enable) [isActive](#isactive) [isEnabled](#isenabled) [reset](#reset) [touchcancel](#touchcancel) [touchend](#touchend) [touchmove](#touchmove) [touchstart](#touchstart)

## Constructors[](#constructors-1)

### constructor[](#constructor)

-   new TouchPanHandler(  
        options: { clickTolerance: number },  
        map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/),  
    ): TouchPanHandler[](#constructortouchpanhandler)
    
    #### Parameters
    
    -   options: { clickTolerance: number }
    -   map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/)
    
    #### Returns TouchPanHandler
    

## Methods[](#methods-1)

### disable[](#disable)

-   disable(): void[](#disable-1)
    
    #### Returns void
    
    Implementation of [Handler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/).[disable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/#disable)
    

### enable[](#enable)

-   enable(): void[](#enable-1)
    
    #### Returns void
    
    Implementation of [Handler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/).[enable](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/#enable)
    

### 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
    
    Implementation of [Handler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/).[isActive](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/#isactive)
    

### isEnabled[](#isenabled)

-   isEnabled(): boolean[](#isenabled-1)
    
    #### Returns boolean
    
    Implementation of [Handler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/).[isEnabled](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/#isenabled)
    

### 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
    
    Implementation of [Handler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/).[reset](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/#reset)
    

### touchcancel[](#touchcancel)

-   touchcancel(): void[](#touchcancel-1)
    
    #### Returns void
    
    Implementation of [Handler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/).[touchcancel](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/#touchcancel)
    

### 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[](#touchend-1)
    
    #### Parameters
    
    -   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/)\[\]
    
    #### Returns void
    
    Implementation of [Handler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/).[touchend](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/#touchend)
    

### 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/)\[\],  
    ): { around: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/); panDelta: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/) }[](#touchmove-1)
    
    #### Parameters
    
    -   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/)\[\]
    
    #### Returns { around: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/); panDelta: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/) }
    
    Implementation of [Handler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/).[touchmove](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/#touchmove)
    

### 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/)\[\],  
    ): { around: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/); panDelta: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/) }[](#touchstart-1)
    
    #### Parameters
    
    -   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/)\[\]
    
    #### Returns { around: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/); panDelta: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/) }
    
    Implementation of [Handler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/).[touchstart](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Handler/#touchstart)