---
title: "IControl | 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 IControl

Interface for interactive controls added to the map. This is a specification for implementers to model: it is not an exported method or class.

Controls must implement `onAdd` and `onRemove`, and must own an element, which is often a `div` element. To use MapLibre GL JS's default control styling, add the `maplibregl-ctrl` class to your control's node.

#### Example[](#example)

```typescript
class HelloWorldControl: IControl {
    onAdd(map) {
        this._map = map;
        this._container = document.createElement('div');
        this._container.className = 'maplibregl-ctrl';
        this._container.textContent = 'Hello, world';
        return this._container;
    }

    onRemove() {
        this._container.remove();
        this._map = undefined;
    }
}
```

interface IControl {  
    [getDefaultPosition](#getdefaultposition)?: () \=> [ControlPosition](https://docs.maptiler.com/sdk-js/api-reference/types/ControlPosition/);  
    [onAdd](#onadd-1)(map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/)): [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/);  
    [onRemove](#onremove-1)(map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/)): void;  
}

#### Implemented by

-   [AttributionControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.AttributionControl/)
-   [FullscreenControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.FullscreenControl/)
-   [GeolocateControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.GeolocateControl/)
-   [GlobeControl](https://docs.maptiler.com/sdk-js/api-reference/classes/GlobeControl/)
-   [ImageViewerFitImageToBoundsControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ImageViewerFitImageToBoundsControl/)
-   [LogoControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LogoControl/)
-   [MaptilerCustomControl](https://docs.maptiler.com/sdk-js/api-reference/classes/MaptilerCustomControl/)
-   [MaptilerExternalControl](https://docs.maptiler.com/sdk-js/api-reference/classes/MaptilerExternalControl/)
-   [MaptilerProjectionControl](https://docs.maptiler.com/sdk-js/api-reference/classes/MaptilerProjectionControl/)
-   [MaptilerTerrainControl](https://docs.maptiler.com/sdk-js/api-reference/classes/MaptilerTerrainControl/)
-   [NavigationControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.NavigationControl/)
-   [ScaleControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScaleControl/)
-   [TerrainControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TerrainControl/)
-   [default](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.default/)

##### Index

### Properties[](#properties)

[getDefaultPosition?](#getdefaultposition)

### Methods[](#methods)

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

## Properties[](#properties-1)

### `Optional` `Readonly`getDefaultPosition[](#getdefaultposition)

getDefaultPosition?: () \=> [ControlPosition](https://docs.maptiler.com/sdk-js/api-reference/types/ControlPosition/)

Optionally provide a default position for this control. If this method is implemented and [Map.addControl](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/#addcontrol) is called without the `position` parameter, the value returned by getDefaultPosition will be used as the control's position.

#### Type Declaration

-   -   (): [ControlPosition](https://docs.maptiler.com/sdk-js/api-reference/types/ControlPosition/)
    -   #### Returns [ControlPosition](https://docs.maptiler.com/sdk-js/api-reference/types/ControlPosition/)
        
        a control position, one of the values valid in addControl.
        

## Methods[](#methods-1)

### onAdd[](#onadd)

-   onAdd(map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/)): [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: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/)
        
        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.
    

### onRemove[](#onremove)

-   onRemove(map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/)): 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.
    
    #### Parameters
    
    -   map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/)
        
        the Map this control will be removed from
        
    
    #### Returns void