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

The MaptilerExternalControl allows any existing element to automatically become a map control. Used for detected controls if `customControls` config is turned on.

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

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

#### Implements

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

##### Index

### Constructors[](#constructors)

[constructor](#constructor)

### Properties[](#properties)

[controlCallbacks](#controlcallbacks)

### Methods[](#methods)

[configureGroupItem](#configuregroupitem) [onAdd](#onadd) [onRemove](#onremove)

## Constructors[](#constructors-1)

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

-   new MaptilerExternalControl(  
        controlElement: [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/),  
        controlType?: [MaptilerExternalControlType](https://docs.maptiler.com/sdk-js/api-reference/types/MaptilerExternalControlType/),  
    ): MaptilerExternalControl[](#constructormaptilerexternalcontrol)
    
    Constructs an instance of External Control to have a predefined functionality
    
    #### Parameters
    
    -   controlElement: [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/)
        
        Element to be used as control, specified as reference to element itself
        
    -   `Optional`controlType: [MaptilerExternalControlType](https://docs.maptiler.com/sdk-js/api-reference/types/MaptilerExternalControlType/)
        
        One of the predefined types of functionality
        
    
    #### Returns MaptilerExternalControl
    
    Overrides [MaptilerCustomControl](https://docs.maptiler.com/sdk-js/api-reference/classes/MaptilerCustomControl/).[constructor](https://docs.maptiler.com/sdk-js/api-reference/classes/MaptilerCustomControl/#constructor)
    

## Properties[](#properties-1)

### `Static` `Maptiler`controlCallbacks[](#controlcallbacks)

controlCallbacks: [Record](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.Record/)<  
    [MaptilerExternalControlType](https://docs.maptiler.com/sdk-js/api-reference/types/MaptilerExternalControlType/),  
    [MaptilerCustomControlCallback](https://docs.maptiler.com/sdk-js/api-reference/types/MaptilerCustomControlCallback/)<Event\>,  
\> = controlCallbacks

## Methods[](#methods-1)

### `Maptiler`configureGroupItem[](#configuregroupitem)

-   configureGroupItem(  
        controlElement: [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/),  
        controlType: [MaptilerExternalControlType](https://docs.maptiler.com/sdk-js/api-reference/types/MaptilerExternalControlType/) | undefined,  
    ): void[](#configuregroupitem-1)
    
    Configure a child element to be part of this control and to have a predefined functionality added
    
    #### Parameters
    
    -   controlElement: [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/)
        
        Element that is a descendant of the control element and that optionally should have some functionality
        
    -   controlType: [MaptilerExternalControlType](https://docs.maptiler.com/sdk-js/api-reference/types/MaptilerExternalControlType/) | undefined
        
        One of the predefined types of functionality
        
    
    #### Returns void
    

### `Maptiler`onAdd[](#onadd)

-   onAdd(map: [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)): [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/)[](#onadd-1)
    
    Register a control on the map and give it a chance to register event listeners and resources. This method is called by [Map.addControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#addcontrol) internally.
    
    #### Parameters
    
    -   map: [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)
        
        the Map this control will be added to
        
    
    #### Returns [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/)
    
    The control's container element. This should be created by the control and returned by onAdd without being attached to the DOM: the map will insert the control's element into the DOM as necessary.
    
    Implementation of [IControl](https://docs.maptiler.com/sdk-js/api-reference/interfaces/IControl/).[onAdd](https://docs.maptiler.com/sdk-js/api-reference/interfaces/IControl/#onadd)
    
    Overrides [MaptilerCustomControl](https://docs.maptiler.com/sdk-js/api-reference/classes/MaptilerCustomControl/).[onAdd](https://docs.maptiler.com/sdk-js/api-reference/classes/MaptilerCustomControl/#onadd)
    

### `Maptiler`onRemove[](#onremove)

-   onRemove(): void[](#onremove-1)
    
    Unregister a control on the map and give it a chance to detach event listeners and resources. This method is called by [Map.removeControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#removecontrol) internally.
    
    #### Returns void
    
    Implementation of [IControl](https://docs.maptiler.com/sdk-js/api-reference/interfaces/IControl/).[onRemove](https://docs.maptiler.com/sdk-js/api-reference/interfaces/IControl/#onremove)
    
    Overrides [MaptilerCustomControl](https://docs.maptiler.com/sdk-js/api-reference/classes/MaptilerCustomControl/).[onRemove](https://docs.maptiler.com/sdk-js/api-reference/classes/MaptilerCustomControl/#onremove)