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

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;
    }
}
```

#### Implements

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

##### Index

### Constructors[](#constructors)

[constructor](#constructor)

### Properties[](#properties)

[map](#map)

### Methods[](#methods)

[addLayer](#addlayer) [moveLayer](#movelayer) [onAdd](#onadd) [onRemove](#onremove) [removeLayer](#removelayer) [setFilter](#setfilter) [setGlyphs](#setglyphs) [setLayerZoomRange](#setlayerzoomrange) [setLayoutProperty](#setlayoutproperty) [setPaintProperty](#setpaintproperty) [setStyle](#setstyle)

## Constructors[](#constructors-1)

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

-   new default(options: [MinimapOptionsInput](https://docs.maptiler.com/sdk-js/api-reference/interfaces/MinimapOptionsInput/), mapOptions: [MapOptions](https://docs.maptiler.com/sdk-js/api-reference/types/MapOptions/)): default[](#constructordefault)
    
    #### Parameters
    
    -   options: [MinimapOptionsInput](https://docs.maptiler.com/sdk-js/api-reference/interfaces/MinimapOptionsInput/)
    -   mapOptions: [MapOptions](https://docs.maptiler.com/sdk-js/api-reference/types/MapOptions/)
    
    #### Returns default
    

## Properties[](#properties-1)

### `Maptiler`map[](#map)

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

## Methods[](#methods-1)

### `Maptiler`addLayer[](#addlayer)

-   addLayer(  
        layer:  
            | [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/)  
            | (  
                LayerSpecification & { source?: string | SourceSpecification | undefined; }  
            ),  
        beforeId?: string,  
    ): [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)[](#addlayer-1)
    
    #### Parameters
    
    -   layer:  
            | [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/)  
            | (  
                LayerSpecification & { source?: string | SourceSpecification | undefined; }  
            )
    -   `Optional`beforeId: string
    
    #### Returns [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)
    

### `Maptiler`moveLayer[](#movelayer)

-   moveLayer(id: string, beforeId?: string): [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)[](#movelayer-1)
    
    #### Parameters
    
    -   id: string
    -   `Optional`beforeId: string
    
    #### Returns [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)
    

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

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

### `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)
    

### `Maptiler`removeLayer[](#removelayer)

-   removeLayer(id: string): this[](#removelayer-1)
    
    #### Parameters
    
    -   id: string
    
    #### Returns this
    

### `Maptiler`setFilter[](#setfilter)

-   setFilter(  
        layerId: string,  
        filter?: [FilterSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/FilterSpecification/) | null,  
        options?: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/),  
    ): this[](#setfilter-1)
    
    #### Parameters
    
    -   layerId: string
    -   `Optional`filter: [FilterSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/FilterSpecification/) | null
    -   `Optional`options: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/)
    
    #### Returns this
    

### `Maptiler`setGlyphs[](#setglyphs)

-   setGlyphs(glyphsUrl: string | null, options?: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/)): this[](#setglyphs-1)
    
    #### Parameters
    
    -   glyphsUrl: string | null
    -   `Optional`options: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/)
    
    #### Returns this
    

### `Maptiler`setLayerZoomRange[](#setlayerzoomrange)

-   setLayerZoomRange(layerId: string, minzoom: number, maxzoom: number): this[](#setlayerzoomrange-1)
    
    #### Parameters
    
    -   layerId: string
    -   minzoom: number
    -   maxzoom: number
    
    #### Returns this
    

### `Maptiler`setLayoutProperty[](#setlayoutproperty)

-   setLayoutProperty(  
        layerId: string,  
        name: string,  
        value: any,  
        options?: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/),  
    ): this[](#setlayoutproperty-1)
    
    #### Parameters
    
    -   layerId: string
    -   name: string
    -   value: any
    -   `Optional`options: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/)
    
    #### Returns this
    

### `Maptiler`setPaintProperty[](#setpaintproperty)

-   setPaintProperty(  
        layerId: string,  
        name: string,  
        value: any,  
        options?: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/),  
    ): this[](#setpaintproperty-1)
    
    #### Parameters
    
    -   layerId: string
    -   name: string
    -   value: any
    -   `Optional`options: [StyleSetterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSetterOptions/)
    
    #### Returns this
    

### `Maptiler`setStyle[](#setstyle)

-   setStyle(  
        style:  
            | string  
            | [StyleSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSpecification/)  
            | [ReferenceMapStyle](https://docs.maptiler.com/sdk-js/api-reference/classes/ReferenceMapStyle/)  
            | [MapStyleVariant](https://docs.maptiler.com/sdk-js/api-reference/classes/MapStyleVariant/)  
            | null,  
        options?: [StyleSwapOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSwapOptions/) & [StyleOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleOptions/),  
    ): void[](#setstyle-1)
    
    #### Parameters
    
    -   style: string | [StyleSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSpecification/) | [ReferenceMapStyle](https://docs.maptiler.com/sdk-js/api-reference/classes/ReferenceMapStyle/) | [MapStyleVariant](https://docs.maptiler.com/sdk-js/api-reference/classes/MapStyleVariant/) | null
    -   `Optional`options: [StyleSwapOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleSwapOptions/) & [StyleOptions](https://docs.maptiler.com/sdk-js/api-reference/types/StyleOptions/)
    
    #### Returns void