--- layout: api title: "v2.1.8 JavaScript Library: L.IControl" categories: api version: v2.1.8 permalink: /api/v2.1.8/l-icontrol ---

## IControl

Represents a UI element in one of the corners of the map. Implemented by zoom, attribution, scale and layers controls.

### Methods

Every control in Leaflet should extend from Control class and additionally have the following methods:

Method | Returns | Description
--- | --- | ---
`onAdd( <Map> map )` | `HTMLElement` | Should contain code that creates all the neccessary DOM elements for the control, adds listeners on relevant map events, and returns the element containing the control. Called on `map.addControl(control)` or `control.addTo(map)`.
`onRemove( <Map> map )` | - | Optional, should contain all clean up code (e.g. removes control's event listeners). Called on `map.removeControl(control)` or `control.removeFrom(map)`. The control's DOM container is removed automatically.

### Custom Control Example

    var MyControl = L.Control.extend({
    	options: {
    position: 'topright'
    	},

    	onAdd: function (map) {
    // create the control container with a particular class name
    var container = L.DomUtil.create('div', 'my-custom-control');

    // ... initialize other DOM elements, add listeners, etc.

    return container;
    	}
    });

    map.addControl(new MyControl());

If specify your own constructor for the control, you'll also probably want to process options properly:

    var MyControl = L.Control.extend({
    	initialize: function (foo, options) {
    // ...
    L.Util.setOptions(this, options);
    	},
    	// ...
    });

This will allow you to pass options like `position` when creating the control instances:

    map.addControl(new MyControl('bar', {position: 'bottomleft'}));