Time for Action – styling the LayerSwitcher control

Let's take a look now at how to style the LayerSwitcher control. Unlike the previous example, we'll place this control in a div element outside the map.

1. Start a new page. We'll link to an external CSS file that will override the base LayerSwitcher control style, like in the previous example. Include a <link> tag that references a file called ex3_layerswitcher_style.css, which we'll create soon.

2. Next, we'll need to create a div element that will house our control. Create a div tag after the map_element div:

   <div id='layer_switcher_control'></div>

3. Now, in your JavaScript code, create the map and WMS layer object as normal. Add a LayerSwitcher control, and pass in the layer_switcher_control element as the div property:

   map.addControl(new OpenLayers.Control.LayerSwitcher({
     div: document.getElementById('layer_switcher_control')
   }));

4. Now, if you open up the map you should see the map with the layer switcher control beneath it:

   

5. By...