# OpenLayers.Control.LayerSwitcher

The LayerSwitcher control displays a table of contents for the map. This allows the user interface to switch between BaseLasyers and to show or hide Overlays. By default the switcher is shown minimized on the right edge of the map, the user may expand it by clicking on the handle.

To create the LayerSwitcher outside of the map, pass the Id of a html div as the first argument to the constructor.

#### Inherits from

- OpenLayers.Control

Summary

OpenLayers.Control.LayerSwitcher | The LayerSwitcher control displays a table of contents for the map.
Properties |
roundedCorner | {Boolean} If true the Rico library is used for rounding the corners of the layer switcher div, defaults to true.
roundedCornerColor | {String} The color of the rounded corners, only applies if roundedCorner is true, defaults to “darkblue”.
layerStates | {Array(Object)} Basically a copy of the “state” of the map’s layers the last time the control was drawn.
layersDiv | {DOMElement}
baseLayersDiv | {DOMElement}
baseLayers | {Array(OpenLayers.Layer)}
dataLbl | {DOMElement}
dataLayersDiv | {DOMElement}
dataLayers | {Array(OpenLayers.Layer)}
minimizeDiv | {DOMElement}
maximizeDiv | {DOMElement}
ascending | {Boolean}
Constructor |
OpenLayers.Control.LayerSwitcher |
Functions |
destroy |
setMap |
draw | {DOMElement} A reference to the DIV DOMElement containing the switcher tabs.
clearLayersArray | User specifies either “base” or “data”.
checkRedraw | Checks if the layer state has changed since the last redraw() call.
redraw | Goes through and takes the current state of the Map and rebuilds the control to display that state.
onLayerClick | Need to update the map accordingly whenever user clicks in either of the layers.
updateMap | Cycles through the loaded data and base layer input arrays and makes the necessary calls to the Map object such that that the map’s visual state corresponds to what the user has selected in the control.
maximizeControl | Set up the labels and divs for the control
minimizeControl | Hide all the contents of the control, shrink the size, add the maximize icon
showControls | Hide/Show all LayerSwitcher controls depending on whether we are minimized or not
loadContents | Set up the labels and divs for the control
ignoreEvent |
mouseDown | Register a local ‘mouseDown’ flag so that we’ll know whether or not to ignore a mouseUp event
mouseUp | If the ‘isMouseDown’ flag has been set, that means that the drag was started from within the LayerSwitcher control, and thus we can ignore the mouseup.

### Properties

### roundedCorner

{Boolean} If true the Rico library is used for rounding the corners of the layer switcher div, defaults to true.

### roundedCornerColor

{String} The color of the rounded corners, only applies if roundedCorner is true, defaults to “darkblue”.

### layerStates

{Array(Object)} Basically a copy of the “state” of the map’s layers the last time the control was drawn. We have this in order to avoid unnecessarily redrawing the control.

### layersDiv

{DOMElement}

### baseLayersDiv

{DOMElement}

### baseLayers

{Array(OpenLayers.Layer)}

### dataLbl

{DOMElement}

### dataLayersDiv

{DOMElement}

### dataLayers

{Array(OpenLayers.Layer)}

### minimizeDiv

{DOMElement}

### maximizeDiv

{DOMElement}

### ascending

{Boolean}

### Constructor

### OpenLayers.Control.LayerSwitcher

#### Parameters

options | {Object}

### Functions

### destroy

> destroy: function()

### setMap

> setMap: function( | map | )

#### Properties

map | {OpenLayers.Map}

### draw

> draw: function()

#### Returns

{DOMElement} A reference to the DIV DOMElement containing the switcher tabs.

### clearLayersArray

> clearLayersArray: function( | layersType | )

User specifies either “base” or “data”. we then clear all the corresponding listeners, the div, and reinitialize a new array.

#### Parameters

layersType | {String}

### checkRedraw

> checkRedraw: function()

Checks if the layer state has changed since the last redraw() call.

#### Returns

{Boolean} The layer state changed since the last redraw() call.

### redraw

> redraw: function()

Goes through and takes the current state of the Map and rebuilds the control to display that state. Groups base layers into a radio-button group and lists each data layer with a checkbox.

#### Returns

{DOMElement} A reference to the DIV DOMElement containing the control

### onLayerClick

> onLayerClick: function( | e | )

Need to update the map accordingly whenever user clicks in either of the layers.

#### Parameters

e | {Event}

### updateMap

> updateMap: function()

Cycles through the loaded data and base layer input arrays and makes the necessary calls to the Map object such that that the map’s visual state corresponds to what the user has selected in the control.

### maximizeControl

> maximizeControl: function( | e | )

Set up the labels and divs for the control

#### Parameters

e | {Event}

### minimizeControl

> minimizeControl: function( | e | )

Hide all the contents of the control, shrink the size, add the maximize icon

#### Parameters

e | {Event}

### showControls

> showControls: function( | minimize | )

Hide/Show all LayerSwitcher controls depending on whether we are minimized or not

#### Parameters

minimize | {Boolean}

### loadContents

> loadContents: function()

Set up the labels and divs for the control

### ignoreEvent

> ignoreEvent: function( | evt | )

#### Parameters

evt | {Event}

### mouseDown

> mouseDown: function( | evt | )

Register a local ‘mouseDown’ flag so that we’ll know whether or not to ignore a mouseUp event

#### Parameters

evt | {Event}

### mouseUp

> mouseUp: function( | evt | )

If the ‘isMouseDown’ flag has been set, that means that the drag was started from within the LayerSwitcher control, and thus we can ignore the mouseup. Otherwise, let the Event continue.

#### Parameters

evt | {Event}

> destroy: function()

> setMap: function( | map | )

> draw: function()

{DOMElement} A reference to the DIV DOMElement containing the switcher tabs.

> clearLayersArray: function( | layersType | )

User specifies either “base” or “data”.

> checkRedraw: function()

Checks if the layer state has changed since the last redraw() call.

> redraw: function()

Goes through and takes the current state of the Map and rebuilds the control to display that state.

> onLayerClick: function( | e | )

Need to update the map accordingly whenever user clicks in either of the layers.

> updateMap: function()

Cycles through the loaded data and base layer input arrays and makes the necessary calls to the Map object such that that the map’s visual state corresponds to what the user has selected in the control.

> maximizeControl: function( | e | )

Set up the labels and divs for the control

> minimizeControl: function( | e | )

Hide all the contents of the control, shrink the size, add the maximize icon

> showControls: function( | minimize | )

Hide/Show all LayerSwitcher controls depending on whether we are minimized or not

> loadContents: function()

Set up the labels and divs for the control

> ignoreEvent: function( | evt | )

> mouseDown: function( | evt | )

Register a local ‘mouseDown’ flag so that we’ll know whether or not to ignore a mouseUp event

> mouseUp: function( | evt | )

If the ‘isMouseDown’ flag has been set, that means that the drag was started from within the LayerSwitcher control, and thus we can ignore the mouseup.
Controls affect the display or behavior of the map.
Instances of OpenLayers.Map are interactive maps embedded in a web page.
Close