Changing layer opacity

When you are working with many layers, both raster and vector layers, you will probably find situations where a layer that is on top of another layer obscures the one below it. This is more common when working with raster WMS layers without the transparent property set to true or tiled layers, such as OpenStreetMaps, and Bing Maps.

In this recipe, we'll create a slider that updates the layer opacity of the topmost layer, revealing a layer underneath as the opacity is lowered. The source code can be found in ch02/ch02-layer-opacity/. Here's a screenshot showing the layer opacity at 60%:

How to do it…

We used jQuery UI to create the slider widget. Here are the steps to create this recipe:

1. Create an HTML file adding the required OpenLayers dependencies, as well as jQuery UI and dependencies. In particular, here's the markup for the map and opacity panels:

   <div id="js-map" class="map"></div>
   <div class="pane&quot...