--- layout: api title: "v2.0.0 JavaScript Library: L.Control.Layers" categories: api version: v2.0.0 permalink: /api/v2.0.0/l-control-layers ---

## 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 = {
    	"CloudMade": cloudmade,
    	"OpenStreetMap": osm
    };

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

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

### Creation

Factory | Description
--- | ---
`L.control.layers( <Layer Config> baseLayers?, <Layer Config> 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.

### Methods

Method | Returns | Description
--- | --- | ---
`addBaseLayer( <ILayer> layer, <String> name )` | `this` | Adds a base layer (radio button entry) with the given name to the control.
`addOverlay( <ILayer> layer, <String> name )` | `this` | Adds an overlay (checkbox entry) with the given name to the control.
`removeLayer( <ILayer> layer )` | `this` | Remove the given layer from the control.

### Options

Option | Type | Default | Description
--- | --- | --- | ---
`position` | `String` | `'topright'` | The position of the control (one of the map corners). See control positions.
`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.

### 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.

Event | Data | Description
--- | --- | ---
`baselayerchange` | `LayersControlEvent` | Fired when the base layer is changed through the control.
`overlayadd` | `LayersControlEvent` | Fired when an overlay is selected through the control.
`overlayremove` | `LayersControlEvent` | Fired when an overlay is deselected through the control.