Mapbox.js is no longer in active development. To learn more about our newer mapping tools see Mapbox GL JS.

You are viewing an older version of Mapbox.js. Check out v3.3.1 for the latest.


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


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'}));