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.

Usage example

var baseLayers = {
    "Mapbox": mapbox,
    "OpenStreetMap": osm
var overlays = {
    "Marker": marker,
    "Roads": roadsLayer
L.control.layers(baseLayers, overlays).addTo(map);

The baseLayers and overlays parameters are object literals 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}


Factory Description
L.control.layers(<Object> baselayers?, <Object> overlays?, <Control.Layers options> options?) Creates an attribution control with the given layers. Base layers will be switched with radio buttons, while overlays will be switched with checkboxes. Note that all base layers should be passed in the base layers object, but only one should be added to the map during map instantiation.


Option Type Default Description
collapsed Boolean true If true, the control will be collapsed into an icon and expanded on mouse hover or touch.
autoZIndex Boolean true If true, the control will assign zIndexes in increasing order to all of its layers so that the order is preserved when switching them on/off.
hideSingleBase Boolean false If true, the base layers in the control will be hidden when there is only one.
Option Type Default Description
position String 'topright' The position of the control (one of the map corners). Possible values are 'topleft', 'topright', 'bottomleft' or 'bottomright'


Method Returns Description
addBaseLayer(<Layer> layer, <String> name) this

Adds a base layer (radio button entry) with the given name to the control.

addOverlay(<Layer> layer, <String> name) this

Adds an overlay (checkbox entry) with the given name to the control.

removeLayer(<Layer> layer) this

Remove the given layer from the control.

expand() this

Expand the control container if collapsed.

collapse() this

Collapse the control container if expanded.

Method Returns Description
getPosition() string

Returns the position of the control.

setPosition(<string> position) this

Sets the position of the control.

getContainer() HTMLElement

Returns the HTMLElement that contains the control.

addTo(<Map> map) this

Adds the control to the given map.

remove() this

Removes the control from the map it is currently active on.

Props Wrld.Prop
Themes Wrld.themes
Heatmaps Wrld.Heatmap
Events Event objects
Services (Optional) WrldPoiApi