---
title: "BoxZoomHandler | 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 BoxZoomHandler`Maptiler`

The `BoxZoomHandler` allows the user to zoom the map to fit within a bounding box. The bounding box is defined by clicking and holding `shift` while dragging the cursor.

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

-   [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/)
    -   BoxZoomHandler

##### Index

### Constructors[](#constructors)

[constructor](#constructor)

### Methods[](#methods)

[disable](#disable) [enable](#enable) [isActive](#isactive) [isEnabled](#isenabled) [keydown](#keydown) [mousedown](#mousedown) [mousemoveWindow](#mousemovewindow) [mouseupWindow](#mouseupwindow) [reset](#reset)

## Constructors[](#constructors-1)

### `Maptiler`constructor[](#constructor)

-   new BoxZoomHandler(  
        map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/) | [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/),  
        options: { clickTolerance: number },  
    ): BoxZoomHandler[](#constructorboxzoomhandler)
    
    #### Parameters
    
    -   map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/) | [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)
    -   options: { clickTolerance: number }
    
    #### Returns BoxZoomHandler
    
    Overrides [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/).[constructor](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/#constructor)
    

## Methods[](#methods-1)

### disable[](#disable)

-   disable(): void[](#disable-1)
    
    Disables the "box zoom" interaction.
    
    #### Returns void
    
    #### Example[](#example)
    
    ```typescript
    map.boxZoom.disable();
    ```
    
    Inherited from [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/).[disable](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/#disable)
    

### enable[](#enable)

-   enable(): void[](#enable-1)
    
    Enables the "box zoom" interaction.
    
    #### Returns void
    
    #### Example[](#example-1)
    
    ```typescript
    map.boxZoom.enable();
    ```
    
    Inherited from [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/).[enable](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/#enable)
    

### isActive[](#isactive)

-   isActive(): boolean[](#isactive-1)
    
    Returns a Boolean indicating whether the "box zoom" interaction is active, i.e. currently being used.
    
    #### Returns boolean
    
    `true` if the "box zoom" interaction is active.
    
    Inherited from [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/).[isActive](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/#isactive)
    

### isEnabled[](#isenabled)

-   isEnabled(): boolean[](#isenabled-1)
    
    Returns a Boolean indicating whether the "box zoom" interaction is enabled.
    
    #### Returns boolean
    
    `true` if the "box zoom" interaction is enabled.
    
    Inherited from [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/).[isEnabled](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/#isenabled)
    

### keydown[](#keydown)

-   keydown(e: [KeyboardEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyboardEvent/)): void[](#keydown-1)
    
    #### Parameters
    
    -   e: [KeyboardEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.KeyboardEvent/)
    
    #### Returns void
    
    Inherited from [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/).[keydown](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/#keydown)
    

### 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[](#mousedown-1)
    
    #### Parameters
    
    -   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/)
    
    #### Returns void
    
    Inherited from [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/).[mousedown](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/#mousedown)
    

### 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[](#mousemovewindow-1)
    
    #### Parameters
    
    -   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/)
    
    #### Returns void
    
    Inherited from [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/).[mousemoveWindow](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/#mousemovewindow)
    

### 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/),  
    ): { cameraAnimation: (map: any) \=> any }[](#mouseupwindow-1)
    
    #### Parameters
    
    -   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/)
    
    #### Returns { cameraAnimation: (map: any) \=> any }
    
    Inherited from [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/).[mouseupWindow](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/#mouseupwindow)
    

### 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
    
    Inherited from [BoxZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/).[reset](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.BoxZoomHandler/#reset)