layersILayer[]ILayer[]nullcrsCRSCRSL.CRS.
EPSG3857addLayer(
- <ILayer> layer,
+ <ILayer> layer
thisremoveLayer(
- <ILayer> layer )
+ <ILayer> layer )
thishasLayer(
- <ILayer> layer )
+ <ILayer> layer )
BooleanaddControl(
- <IControl> control )
+ <IControl> control )
thisremoveControl(
- <IControl> control )
+ <IControl> control )
thisMap 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 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();draggingIHandlerIHandlertouchZoomIHandlerIHandlerdoubleClickZoomIHandlerIHandlerscrollWheelZoomIHandlerIHandlerboxZoomIHandlerIHandlerkeyboardIHandlerIHandlertapIHandlerIHandlerInteraction 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:
+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();IHandlerIHandlerL.popup(
<Popup options> options?,
- <ILayer> source? )
+ <ILayer> source? )
Used to load and display tile layers on the map, implements ILayer interface.
+Used to load and display tile layers on the map, implements ILayer interface.
crsCRSCRSnullUsed to load and display a single image over specific bounds of the map, implements ILayer interface.
+Used to load and display a single image over specific bounds of the map, implements ILayer interface.
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. Implements ILayer interface.
+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. Implements ILayer interface.
L.layerGroup([marker1, marker2])
.addLayer(polyline)
@@ -3090,8 +3088,8 @@ map.fitBounds(bounds);L.layerGroup(
- <ILayer[]> layers? )
+ L.LayerGroup(
+ <ILayer[]> layers? )
addLayer(
- <ILayer> layer )
+ <ILayer> layer )
thisremoveLayer(
- <ILayer> layer )
+ <ILayer> layer )
thishasLayer(
- <ILayer> layer )
+ <ILayer> layer )
BooleanILayerILayerExtended layerGroup that also has mouse events (propagated from members of the group) and a shared bindPopup method. Implements ILayer interface.
+Extended layerGroup that also has mouse events (propagated from members of the group) and a shared bindPopup method. Implements ILayer interface.
L.featureGroup([marker1, marker2, polyline])
.bindPopup('Hello world!')
@@ -3205,7 +3203,7 @@ map.fitBounds(bounds);L.featureGroup(
- <ILayer[]> layers? )
+ <ILayer[]> layers? )
onEachFeature(
<GeoJSON> featureData ,
- <ILayer> layer )
+ <ILayer> layer )
filter(
<GeoJSON> featureData ,
- <ILayer> layer )
+ <ILayer> layer )
ILayerILayerThe base class for all Leaflet controls. Implements IControl interface. You can add controls to the map like this:
- -control.addTo(map);
-// the same as
-map.addControl(control);| Factory | - -Description | -
|---|---|
L.control(
- |
-
-
-
- Creates a control with the given options. | -
| Option | -Type | -Default | -Description | -
|---|---|---|---|
position |
- String |
- 'topright' |
- The initial position of the control (one of the map corners). See control positions. | -
| Method | -Returns | -Description | -
|---|---|---|
setPosition(
- |
-
- this |
- Sets the position of the control. See control positions. | -
getPosition() |
- String |
- Returns the current position of the control. | -
addTo(
- |
-
- this |
- Adds the control to the map. | -
removeFrom(
- |
-
- this |
- Removes the control from the map. | -
getContainer() |
- HTMLElement |
- Returns the HTML container of the control. | -
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.
- -| Position | -Description | -
|---|---|
'topleft' |
- Top left of the map. | -
'topright' |
- Top right of the map. | -
'bottomleft' |
- Bottom left of the map. | -
'bottomright' |
- Bottom right of the map. | -
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.
addBaseLayer(
- <ILayer> layer ,
+ <ILayer> layer ,
<String> name )
thisaddOverlay(
- <ILayer> layer ,
+ <ILayer> layer ,
<String> name )
thisremoveLayer(
- <ILayer> layer )
+ <ILayer> layer )
thislayerILayerILayerlayerILayerILayerlayerILayerILayerL.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");
-The initialize method is your class's constructor function, meaning that it gets called when you do new MyClass(...).
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);
-};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(this, "Yo");
- },
-
- greet: function (name) {
- MyClass.prototype.greet.call(this, 'bro ' + name + '!');
- }
-});
-
-var a = new MyChildClass();
-a.greet('Jason'); // alerts "Yo, bro Jason!"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 = MyClass.extend({
- options: {
- myOption1: 'baz',
- myOption3: 5
- }
-});
-
-var a = new MyChildClass();
-a.options.myOption1; // 'baz'
-a.options.myOption2; // 'bar'
-a.options.myOption3; // 5There's also L.Util.setOptions, a method for conveniently merging options passed to constructor with the defaults defined 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 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 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'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, …);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
-});When implementing a custom layer the L.Layer class can be extended to implementing basic functionality that all layers need to share, these methods can be used when extending L.Layer when implementing custom layers.
| Option | -Type | -Default value | -Description | -
|---|---|---|---|
pane |
- String |
- 'overlayPane' |
- By default the layer will be added to the maps overlay pane. Overriding this option will cause the layer to be placed on another pane by default. | -
| Event | -Data | -Description | -
|---|---|---|
add |
- Event |
- Fired after the layer is added to a map. | -
remove |
- Event |
- Fired after the layer is removed from a map. | -
| Method | -Returns | -Description | -
|---|---|---|
addTo( |
- this |
- Adds the layer to the given map. | -
removeFrom( |
- this |
- Removes the layer to the given map. | -
remove() |
- this |
- Removes the layer from the map it is currently active on. | -
getPane( |
- HTMLElement |
- Returns the HTMLElement representing the named pane on the map. Or if name is omitted the pane for this layer. |
-
A namespace with properties for browser/feature detection used by Leaflet internally.
@@ -5392,6 +5016,7 @@ MyEventedClass = L.Class.extend({Functionfn with the given scope obj (so that this keyword refers to obj inside the function code). Has an L.bind shortcut. Not a polyfill for ES 5 bind (compare L.bind to the MDN-recommended polyfill for Function.prototype.bind).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");
+An interface implemented by interaction handlers.
+| Method | -Returns | -Description | -
|---|---|---|
enable() |
- - | -Enables the handler. | -
disable() |
- - | -Disables the handler. | -
enabled() |
- Boolean |
- Returns true if the handler is enabled. |
-
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);
+};Represents an object attached to a particular location (or a set of locations) on a map. Extends the L.Layer base class and is implemented by tile layers, markers, popups, image overlays, vector layers and layer groups.
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
+});| Method | -Returns | -Description | -
|---|---|---|
onAdd(
- |
+- | -Should contain code that creates DOM elements for the overlay, adds them to map panes where they should belong and puts listeners on relevant map events. Called on map.addLayer(layer). |
-
onRemove(
- |
+- | -Should contain all clean up code that removes the overlay's elements from the DOM and removes listeners previously added in onAdd. Called on map.removeLayer(layer). |
-
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 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; // 5There'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 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 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'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, …);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
+});The base class for all Leaflet layers that impliments basic shared methods and functionality. Can be extended to create custom layers by extending L.Layer and implimenting the onAdd and onRemove methods.
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.
Every layer should extend from L.Layer and impliment the following methods:
| Method | +Returns | +Description | +
|---|---|---|
onAdd( |
+ this |
+ Should contain code that creates DOM elements for the overlay, adds them to map panes where they should belong and puts listeners on relevant map events. Called on map.addLayer(layer). |
+
onRemove( |
+ this |
+ Should contain all clean up code that removes the overlay's elements from the DOM and removes listeners previously added in onAdd. Called on map.removeLayer(layer). |
+
getEvents() |
+ Object |
+ This optional method should return an object like { viewreset: this._reset }for addEventListener. These events will be automatically added and removed from the map with your layer. |
+
Here's how a custom layer implementation usually looks:
@@ -6176,7 +5956,7 @@ draggable.enable(); onRemove: function (map) { // remove layer's DOM elements and listeners - this.getPane().overlayPane.removeChild(this._el); + this.getPane().removeChild(this._el); }, _reset: function () { @@ -6189,9 +5969,82 @@ draggable.enable(); var myLayer = new MyCustomLayer(latlng).addTo(map); -Represents a UI element in one of the corners of the map. Implemented by zoom, attribution, scale and layers controls.
+Classes extending from L.Layer will also inherit the following options:
| Option | +Type | +Default value | +Description | +
|---|---|---|---|
pane |
+ String |
+ 'overlayPane' |
+ By default the layer will be added to the maps overlay pane. Overriding this option will cause the layer to be placed on another pane by default. | +
Classes extending from L.Layer will also fire the following events:
| Event | +Data | +Description | +
|---|---|---|
add |
+ Event |
+ Fired after the layer is added to a map. | +
remove |
+ Event |
+ Fired after the layer is removed from a map. | +
Classes extending from L.Layer will also inherit the following methods:
| Method | +Returns | +Description | +
|---|---|---|
addTo( |
+ this |
+ Adds the layer to the given map. | +
removeFrom( |
+ this |
+ Removes the layer to the given map. | +
remove() |
+ this |
+ Removes the layer from the map it is currently active on. | +
getPane( |
+ HTMLElement |
+ Returns the HTMLElement representing the named pane on the map. Or if name is omitted the pane for this layer. |
+
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 implimenting the onAdd and onRemove methods.
map.addControl(new MyControl('bar', {position: 'bottomleft'}));Classes extending from L.Control will also inherit the following options:
| Option | +Type | +Default | +Description | +
|---|---|---|---|
position |
+ String |
+ 'topright' |
+ The initial position of the control (one of the map corners). See control positions. | +
Classes extending from L.Control will also inherit the following methods:
| Method | +Returns | +Description | +
|---|---|---|
setPosition(
+ |
+
+ this |
+ Sets the position of the control. See control positions. | +
getPosition() |
+ String |
+ Returns the current position of the control. | +
addTo(
+ |
+
+ this |
+ Adds the control to the map. | +
removeFrom(
+ |
+
+ this |
+ Removes the control from the map. | +
getContainer() |
+ HTMLElement |
+ Returns the HTML container of the control. | +
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.
+ +| Position | +Description | +
|---|---|
'topleft' |
+ Top left of the map. | +
'topright' |
+ Top right of the map. | +
'bottomleft' |
+ Bottom left of the map. | +
'bottomright' |
+ Bottom right of the map. | +
An interface implemented by interaction handlers.
-| Method | +Returns | +Description | +
|---|---|---|
enable() |
+ - | +Enables the handler. | +
disable() |
+ - | +Disables the handler. | +
enabled() |
+ Boolean |
+ Returns true if the handler is enabled. |
+
An object with methods for projecting geographical coordinates of the world onto a flat surface (and back). See Map projection.
| Method | Returns | @@ -6317,13 +6286,13 @@ map.addControl(new MyControl()); -
|---|
| Method | Returns | @@ -6375,7 +6344,7 @@ map.addControl(new MyControl());
|---|
| Property | Type | @@ -6384,7 +6353,7 @@ map.addControl(new MyControl());||
|---|---|---|---|
projection |
- IProjection |
+ IProjection |
Projection that this CRS uses. |