Book Image

OpenLayers 2.10 Beginner's Guide

Book Image

OpenLayers 2.10 Beginner's Guide

Overview of this book

Table of Contents (18 chapters)
OpenLayers 2.10
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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