O'Reilly logo

OpenLayers 2.10 by Erik Hazzard

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required