API Reference

This reference reflects Leaflet 1.0.

Map

The central class of the API — it is used to create a map on a page and manipulate it.

Usage example

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map', {
	center: [51.505, -0.09],
	zoom: 13
});

Creation

Options

Map State Options

Interaction Options

Keyboard Navigation Options

Panning Inertia Options

Control options

Animation options

Events

You can subscribe to the following events using these methods.

Methods for Modifying Map State

Methods for Getting Map State

Methods for Layers and Controls

map.eachLayer(function (layer) {
	layer.bindPopup('Hello');
});

Conversion Methods

Other Methods

Locate options

Zoom/pan options

Pan options

Zoom options

fitBounds options

The same as zoom/pan options and additionally:

Properties

Map properties include interaction handlers that allow you to control interaction behavior in runtime, enabling or disabling certain features such as dragging or touch zoom (see IHandler methods). Example:

map.doubleClickZoom.disable();

You can also access default map controls like attribution control through map properties:

map.attributionControl.addAttribution("Earthquake data © GeoNames");

Map Panes

Panes are DOM elements used to control the ordering of layers on the map. You can access panes with map.getPane or map.getPanesmethods. New panes can be created with the map.createPane method.

Every map has the following panes that differ only in zIndex.

Marker

Used to put markers on the map. Extends Layer.

L.marker([50.5, 30.5]).addTo(map);

Creation

Options

Events

You can subscribe to the following events using these methods.

Methods

In addition to shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

Interaction handlers

Interaction handlers are properties of a marker instance that allow you to control interaction behavior in runtime, enabling or disabling certain features such as dragging (see IHandler methods). Example:

marker.dragging.disable();

Popup

Used to open popups in certain places of the map. Use Map#openPopup to open popups while making sure that only one popup is open at one time (recommended for usability), or use Map#addLayer to open as many as you want.

Usage example

If you want to just bind a popup to marker click and then open it, it's really easy:

marker.bindPopup(popupContent).openPopup();

Path overlays like polylines also have a bindPopup method. Here's a more complicated way to open a popup on a map:

var popup = L.popup()
	.setLatLng(latlng)
	.setContent('<p>Hello world!<br />This is a nice popup.</p>')
	.openOn(map);

Creation

Options

Events

Methods

In addition to shared layer methods like addTo() and remove() you can also use the following methods:

TileLayer

Used to load and display tile layers on the map. Extends Layer.

Usage example

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(map);

Creation

URL template

A string of the following form:

'http://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png'

{s} means one of the available subdomains (used sequentially to help with browser parallel requests per domain limitation; subdomain values are specified in options; a, b or c by default, can be omitted), {z} — zoom level, {x} and {y} — tile coordinates. {r} can be used to add @2x to the URL to load retina tiles.

You can use custom keys in the template, which will be evaluated from TileLayer options, like this:

L.tileLayer('http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});

Options

Events

You can subscribe to the following events using these methods.

Methods

TileLayer.WMS

Used to display WMS services as tile layers on the map. Extends TileLayer.

Usage example

var nexrad = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
	layers: 'nexrad-n0r-900913',
	format: 'image/png',
	transparent: true,
	attribution: "Weather data © 2012 IEM Nexrad"
});

Creation

Options

Includes all TileLayer options and additionally:

Methods

ImageOverlay

Used to load and display a single image over specific bounds of the map. Extends Layer.

Usage example

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
	imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);

Creation

Options

Methods

Path

An abstract class that contains options and constants shared between vector overlays (Polygon, Polyline, Circle). Do not use it directly. Extends Layer.

Options

Events

You can subscribe to the following events using these methods.

Methods

In addition to shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

Static properties

Polyline

A class for drawing polyline overlays on a map. Extends Path. Use Map#addLayer to add it to the map.

Usage example

// create a red polyline from an array of LatLng points
var latlngs = [
  [-122.68, 45.51],
  [-122.43, 37.77],
  [-118.2, 34.04]
];

var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);

// zoom the map to the polyline
map.fitBounds(polyline.getBounds());

You can also pass a multi-dimensional array to represent a MultiPolyline shape:

// create a red polyline from an array of arrays of LatLng points
var latlngs = [
  [[-122.68, 45.51],
   [-122.43, 37.77],
   [-118.2, 34.04]],
  [[-73.91, 40.78],
   [-87.62, 41.83],
   [-96.72, 32.76]]
];

Creation

Options

You can use Path options and additionally the following options:

Methods

In addition to Path methods like redraw() and bringToFront(), shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

Polygon

A class for drawing polygon overlays on a map. Extends Polyline. Use Map#addLayer to add it to the map.

Note that points you pass when creating a polygon shouldn't have an additional last point equal to the first one — it's better to filter out such points.

Usage example

// create a red polygon from an array of LatLng points
var latlngs = [[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]];

var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);

// zoom the map to the polygon
map.fitBounds(polygon.getBounds());

You can also pass an array of arrays of latlngs, with the first array representing the outer shape and the other arrays representing holes in the outer shape:

var latlngs = [
  [[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]], // outer ring
  [[-108.58,37.29],[-108.58,40.71],[-102.50,40.71],[-102.50,37.29]] // hole
];

Additionally, you can pass a multi-dimensional array to represent a MultiPolygon shape.

var latlngs = [
  [ // first polygon
    [[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]], // outer ring
    [[-108.58,37.29],[-108.58,40.71],[-102.50,40.71],[-102.50,37.29]] // hole
  ],
  [ // second polygon
    [[-109.05, 37],[-109.03, 41],[-102.05, 41],[-102.04, 37],[-109.05, 38]]
  ]
];

Creation

Methods

In addition to Path methods like redraw() and bringToFront(), Polyline mehtods like setLatLngs() and getLatLngs(), shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

Rectangle

A class for drawing rectangle overlays on a map. Extends Polygon. Use Map#addLayer to add it to the map.

Usage example

// define rectangle geographical bounds
var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];

// create an orange rectangle
L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);

// zoom the map to the rectangle bounds
map.fitBounds(bounds);

Creation

Methods

In addition to Path methods like redraw() and bringToFront(), shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

Circle

A class for drawing circle overlays on a map. Extends CircleMarker. Use Map#addLayer to add it to the map.

L.circle([50.5, 30.5], 200).addTo(map);

Creation

Methods

In addition to Path methods like redraw() and bringToFront(), shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

CircleMarker

A circle of a fixed size with radius specified in pixels. Extends Path. Use Map#addLayer to add it to the map.

Creation

Methods

In addition to Path methods like redraw() and bringToFront(), shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

LayerGroup

Used to group several layers and handle them as one. If you add it to the map, any layers added or removed from the group will be added/removed on the map as well. Extends Layer.

L.layerGroup([marker1, marker2])
	.addLayer(polyline)
	.addTo(map);

Creation

Methods

group.eachLayer(function (layer) {
	layer.bindPopup('Hello');
});

FeatureGroup

Extended layerGroup that also has mouse events (propagated from members of the group) and a shared bindPopup method. Extends Layer.

L.featureGroup([marker1, marker2, polyline])
	.bindPopup('Hello world!')
	.on('click', function() { alert('Clicked on a group!'); })
	.addTo(map);

Creation

Methods

In addition to shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

Events

You can subscribe to the following events using these methods.

GeoJson

Represents a GeoJSON object or an array of GeoJSON objects. Allows you to parse GeoJSON data and display it on the map. Extends FeatureGroup.

L.geoJson(data, {
	style: function (feature) {
		return {color: feature.properties.color};
	}
}).bindPopup(function (layer) {
	return layer.feature.properties.description;
}).addTo(map);

Each feature layer created by it gets a feature property that links to the GeoJSON feature data the layer was created from (so that you can access its properties later).

Creation

Options

Additionally accepts all Path options for polylines and polygons.

Methods

In addition to shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:

Static methods

GridLayer

Generic class for handling a tiled grid of HTML elements. This is the base class for all tile layers and replaces TileLayer.Canvas.

GridLayer can be extended to create a tiled grid of HTML Elements like <canvas>, <img> or <div>.GridLayer will handle creating and animating these DOM elements for you.

Synchronous usage example

To create a custom layer, extend GridLayer and impliment the createTile() method, which will be passed a Point object with the x, y, and z (zoom level) coordinates to draw your tile.

var CanvasLayer = L.GridLayer.extend({
	createTile: function(coords){
		// create a <canvas> element for drawing
		var tile = L.DomUtil.create('canvas', 'leaflet-tile');

		// setup tile width and height according to the options
		var size = this.getTileSize();
		tile.width = size.x;
		tile.height = size.y;

		// get a canvas context and draw something on it using coords.x, coords.y and coords.z
		var ctx = canvas.getContext('2d');

		// return the tile so it can be rendered on screen
		return tile;
	}
});

Asyncronous usage example

Tile creation can also be asyncronous, this is useful when using a third-party drawing library. Once the tile is finsihed drawing it can be passed to the done() callback.

var CanvasLayer = L.GridLayer.extend({
	createTile: function(coords, done){
		var error;

		// create a <canvas> element for drawing
		var tile = L.DomUtil.create('canvas', 'leaflet-tile');

		// setup tile width and height according to the options
		var size = this.getTileSize();
		tile.width = size.x;
		tile.height = size.y;

		// draw something and pass the tile to the done() callback
		done(error, tile);
	}
});

Constructor

Options

Methods

Events

LatLng

Represents a geographical point with a certain latitude and longitude.

var latlng = L.latLng(50.5, 30.5);

All Leaflet methods that accept LatLng objects also accept them in a simple Array form and simple object form (unless noted otherwise), so these lines are equivalent:

map.panTo([50, 30]);
map.panTo({lon: 30, lat: 50});
map.panTo({lat: 50, lng: 30});
map.panTo(L.latLng(50, 30));

Creation

Properties

Methods

LatLngBounds

Represents a rectangular geographical area on a map.

var southWest = L.latLng(40.712, -74.227),
	northEast = L.latLng(40.774, -74.125),
	bounds = L.latLngBounds(southWest, northEast);

All Leaflet methods that accept LatLngBounds objects also accept them in a simple Array form (unless noted otherwise), so the bounds example above can be passed like this:

map.fitBounds([
	[40.712, -74.227],
	[40.774, -74.125]
]);

Creation

Methods

Point

Represents a point with x and y coordinates in pixels.

var point = L.point(200, 300);

All Leaflet methods and options that accept Point objects also accept them in a simple Array form (unless noted otherwise), so these lines are equivalent:

map.panBy([200, 300]);
map.panBy(L.point(200, 300));

Creation

Properties

Methods

Bounds

Represents a rectangular area in pixel coordinates.

var p1 = L.point(10, 10),
	p2 = L.point(40, 60),
	bounds = L.bounds(p1, p2);

All Leaflet methods that accept Bounds objects also accept them in a simple Array form (unless noted otherwise), so the bounds example above can be passed like this:

otherBounds.intersects([[10, 10], [40, 60]]);

Creation

Properties

Methods

Icon

Represents an icon to provide when creating a marker.

var myIcon = L.icon({
	iconUrl: 'my-icon.png',
	iconRetinaUrl: 'my-icon@2x.png',
	iconSize: [38, 95],
	iconAnchor: [22, 94],
	popupAnchor: [-3, -76],
	shadowUrl: 'my-icon-shadow.png',
	shadowRetinaUrl: 'my-icon-shadow@2x.png',
	shadowSize: [68, 95],
	shadowAnchor: [22, 94]
});

L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

L.Icon.Default extends L.Icon and is the blue icon Leaflet uses for markers by default.

Creation

Options

DivIcon

Represents a lightweight icon for markers that uses a simple div element instead of an image.

var myIcon = L.divIcon({className: 'my-div-icon'});
// you can set .my-div-icon styles in CSS

L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

By default, it has a 'leaflet-div-icon' class and is styled as a little white square with a shadow.

Creation

Options

Control.zoom

A basic zoom control with two buttons (zoom in and zoom out). It is put on the map by default unless you set its zoomControl option to false. Extends Control.

Creation

Options

Control.Attribution

The attribution control allows you to display attribution data in a small text box on a map. It is put on the map by default unless you set its attributionControl option to false, and it fetches attribution texts from layers with getAttribution method automatically. Extends Control.

Creation

Options

Methods

Control.Layers

The layers control gives users the ability to switch between different base layers and switch overlays on/off (check out the detailed example). Extends Control.

var baseLayers = {
	"Mapbox": mapbox,
	"OpenStreetMap": osm
};

var overlays = {
	"Marker": marker,
	"Roads": roadsLayer
};

L.control.layers(baseLayers, overlays).addTo(map);

Creation

Methods

Options

Layer Config

An object literal with layer names as keys and layer objects as values:

{
	"<someName1>": layer1,
	"<someName2>": layer2
}

The layer names can contain HTML, which allows you to add additional styling to the items:

{"<img src='my-layer-icon' /> <span class='my-layer-item'>My Layer</span>": myLayer}

Events

You can subscribe to the following events on the Map object using these methods.

Control.Scale

A simple scale control that shows the scale of the current center of screen in metric (m/km) and imperial (mi/ft) systems. Extends Control.

L.control.scale().addTo(map);

Creation

Options

Events methods

A set of methods shared between event-powered classes (like Map and Marker). Generally, events allow you to execute some function when something happens with an object (e.g. the user clicks on the map, causing the map to fire 'click' event).

Example

map.on('click', function(e) {
	alert(e.latlng);
});

Leaflet deals with event listeners by reference, so if you want to add a listener and then remove it, define it as a function:

function onClick(e) { ... }

map.on('click', onClick);
map.off('click', onClick);

Methods

Layer methods

var layer = L.Marker(latlng).addTo(map);
layer.addTo(map);
layer.remove();

Methods

Popup methods

var layer = L.Polgon(latlngs).bindPopup('Hi There!').addTo(map);
layer.openPopup();
layer.closePopup();

Methods

featureGroup.bindPopup(function(layer){
	return "a unique template for this layer.";
});

Browser

A namespace with properties for browser/feature detection used by Leaflet internally.

if (L.Browser.ie6) {
	alert('Upgrade your browser, dude!');
}

Util

Various utility functions, used by Leaflet internally.

Methods

Properties

Transformation

Represents an affine transformation: a set of coefficients a, b, c, d for transforming a point of a form (x, y) into (a*x + b, c*y + d) and doing the reverse. Used by Leaflet in its projections code.

var transformation = new L.Transformation(2, 5, -1, 10),
	p = L.point(1, 2),
	p2 = transformation.transform(p), //  L.point(7, 8)
	p3 = transformation.untransform(p2); //  L.point(1, 2)

Creation

Methods

LineUtil

Various utility functions for polyine points processing, used by Leaflet internally to make polylines lightning-fast.

Methods

PolyUtil

Various utility functions for polygon geometries.

Methods

DomEvent

Utility functions to work with the DOM events, used by Leaflet internally.

Methods

L.DomEvent.addListener(div, 'click', function (e) {
	L.DomEvent.stopPropagation(e);
});

DomUtil

Utility functions to work with the DOM tree, used by Leaflet internally.

Methods

Properties

PosAnimation

Used internally for panning animations, utilizing CSS3 Transitions for modern browsers and a timer fallback for IE6-9.

var fx = new L.PosAnimation();
fx.run(el, [300, 500], 0.5);

Creation

Methods

Events

You can subscribe to the following events using these methods.

Draggable

A class for making DOM elements draggable (including touch support). Used internally for map and marker dragging. Only works for elements that were positioned with DomUtil#setPosition

var draggable = new L.Draggable(elementToDrag);
draggable.enable();

Creation

Events

You can subscribe to the following events using these methods.

Methods

Class

L.Class powers the OOP facilities of Leaflet and is used to create almost all of the Leaflet classes documented here.

In addition to implementing a simple classical inheritance model, it introduces several special properties for convenient code organization — options, includes and statics.

var MyClass = L.Class.extend({
	initialize: function (greeter) {
		this.greeter = greeter;
		// class constructor
	},

	greet: function (name) {
		alert(this.greeter + ', ' + name)
	}
});

// create instance of MyClass, passing "Hello" to the constructor
var a = new MyClass("Hello");

// call greet method, alerting "Hello, World"
a.greet("World");

Class Factories

You may have noticed that Leaflet objects are created without using the new keyword. This is achieved by complementing each class with a lowercase factory method:

new L.Map('map'); // becomes:
L.map('map');

The factories are implemented very easily, and you can do this for your own classes:

L.map = function (id, options) {
	return new L.Map(id, options);
};

Inheritance

You use L.Class.extend to define new classes, but you can use the same method on any class to inherit from it:

var MyChildClass = MyClass.extend({
	// ... new properties and methods
});

This will create a class that inherits all methods and properties of the parent class (through a proper prototype chain), adding or overriding the ones you pass to extend. It will also properly react to instanceof:

var a = new MyChildClass();
a instanceof MyChildClass; // true
a instanceof MyClass; // true

You can call parent methods (including constructor) from corresponding child ones (as you do with super calls in other languages) by accessing parent class prototype and using JavaScript's call or apply:

var MyChildClass = MyClass.extend({
	initialize: function () {
		MyClass.prototype.initialize.call("Yo");
	},

	greet: function (name) {
		MyClass.prototype.greet.call(this, 'bro ' + name + '!');
	}
});

var a = new MyChildClass();
a.greet('Jason'); // alerts "Yo, bro Jason!"

Options

options is a special property that unlike other objects that you pass to extend will be merged with the parent one instead of overriding it completely, which makes managing configuration of objects and default values convenient:

var MyClass = L.Class.extend({
	options: {
		myOption1: 'foo',
		myOption2: 'bar'
	}
});

var MyChildClass = L.Class.extend({
	options: {
		myOption1: 'baz',
		myOption3: 5
	}
});

var a = new MyChildClass();
a.options.myOption1; // 'baz'
a.options.myOption2; // 'bar'
a.options.myOption3; // 5

There's also L.Util.setOptions, a method for conveniently merging options passed to constructor with the defauls defines in the class:

var MyClass = L.Class.extend({
	options: {
		foo: 'bar',
		bla: 5
	},

	initialize: function (options) {
		L.Util.setOptions(this, options);
		...
	}
});

var a = new MyClass({bla: 10});
a.options; // {foo: 'bar', bla: 10}

Includes

includes is a special class property that merges all specified objects into the class (such objects are called mixins).

 var MyMixin = {
	foo: function () { ... },
	bar: 5
};

var MyClass = L.Class.extend({
	includes: MyMixin
});

var a = new MyClass();
a.foo();

You can also do such includes in runtime with the include method:

MyClass.include(MyMixin);

Statics

statics is just a convenience property that injects specified object properties as the static properties of the class, useful for defining constants:

var MyClass = L.Class.extend({
	statics: {
		FOO: 'bar',
		BLA: 5
	}
});

MyClass.FOO; // 'bar'

Constructor Hooks

If you're a plugin developer, you often need to add additional initialization code to existing classes (e.g. editing hooks for L.Polyline). Leaflet comes with a way to do it easily using the addInitHook method:

MyClass.addInitHook(function () {
	// ... do something in constructor additionally
	// e.g. add event listeners, set custom properties etc.
});

You can also use the following shortcut when you just need to make one additional method call:

MyClass.addInitHook('methodName', arg1, arg2, …);

Evented

When creating a plugin you may want your code to have access to the event methods. By extending the Evented class you can create a class which inherits event-related methods like on, off and fire

MyEventedClass = L.Evented.extend({
	fire: function(){
		this.fire('custom', {
			// you can attach optional data to an event as an object
		});
	}
});

var myEvents = new MyEventedClass();

myEvents.on('custom', function(e){
	// e.type will  be 'custom'
	// anything else you passed in the
});

myEvents.fire();

// this class will include all event methods
MyEventedClass = L.Class.extend({
	includes: L.Mixin.Events
});

Layer

The base class for all Leaflet layers that implements basic shared methods and functionality. Can be extended to create custom layers by extending L.Layer and implementing the onAdd and onRemove methods.

Implementing Custom Layers

Custom layers should extend the L.Layer base class. L.Layer provides convenience methods for your layer like addTo(map), removeFrom(map) and getPane().

The most important things know about when implementing custom layers are Map viewreset event and latLngToLayerPoint method. viewreset is fired when the map needs to reposition its layers (e.g. on zoom), and latLngToLayerPoint is used to get coordinates for the layer's new position.

Another event often used in layer implementations is moveend which fires after any movement of the map (panning, zooming, etc.).

Another thing to note is that you'll usually need to add leaflet-zoom-hide class to the DOM elements you create for the layer so that it hides during zoom animation. Implementing zoom animation for custom layers is a complex topic and will be documented separately in future, but meanwhile you can take a look at how it's done for Leaflet layers (e.g. ImageOverlay) in the source.

Methods

Every layer should extend from L.Layer and implement the following methods:

Custom Layer Example

Here's how a custom layer implementation usually looks:

var MyCustomLayer = L.Layer.extend({

	initialize: function (latlng) {
		// save position of the layer or any options from the constructor
		this._latlng = latlng;
	},

	// these events will be added and removed from the map with the layer
	getEvents: function(){
		return {
			viewreset: this._reset
		}
	},

	onAdd: function (map) {
		// create a DOM element and put it into one of the map panes, by default the overlayPane
		this._el = L.DomUtil.create('div', 'my-custom-layer leaflet-zoom-hide');
		this.getPane().appendChild(this._el);

		// add a viewreset event listener for updating layer's position, do the latter
		this._reset();
	},

	onRemove: function (map) {
		// remove layer's DOM elements and listeners
		this.getPane().removeChild(this._el);
	},

	_reset: function () {
		// update layer's position
		var pos = this._map.latLngToLayerPoint(this._latlng);
		L.DomUtil.setPosition(this._el, pos);
	}
});

var myLayer = new MyCustomLayer(latlng).addTo(map);

Inherited Options

Classes extending from L.Layer will also inherit the following options:

Inherited Events

Classes extending from L.Layer will also fire the following events:

Inherited Methods

Classes extending from L.Layer will also inherit the following methods:

Control

Controls represents a UI element in one of the corners of the map. Implemented by zoom, attribution, scale and layers controls. Can be used to create custom controls by extending L.Control and implementing the onAdd and onRemove methods.

Methods

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

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

Options

Classes extending from L.Control will also inherit the following options:

Inherited Methods

Classes extending from L.Control will also inherit the following methods:

Control Positions

Control positions (map corner to put a control to) are set using strings. Margins between controls and the map border are set with CSS, so that you can easily override them.

Handler

Implemented by map interaction handlers.

Projection

An object with methods for projecting geographical coordinates of the world onto a flat surface (and back). See Map projection.

Properties