Legacy
Mapbox.js is no longer in active development. To learn more about our newer mapping tools see Mapbox GL JS.
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(
|
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(
|
- | 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'}));