Book Image

OpenLayers Cookbook

Book Image

OpenLayers Cookbook

Overview of this book

Data visualization and analysis has become an important task for many companies. Understanding the basic concepts of GIS and knowing how to visualize data on a map is a required ability for many professionals today. OpenLayers is a JavaScript library to load, display, and render maps from multiple sources on web pages."OpenLayers Cookbook" teaches how to work with OpenLayers, one of the most important and complete open source JavaScript libraries.Through an extensive set of recipes, this book shows how to work with the main concepts required to build a GIS web applicationñ maps, raster and vector layers, styling, theming, and so on."OpenLayers Cookbook" includes problem solving and how-to recipes for the most common and important tasks. A wide range of topics are covered.The range of recipes includes: creating basic maps, working with raster and vector layers, understanding events and working with main controls, reading features from different data sources, styling features, and understanding the underlying architecture."OpenLayers Cookbook" describes solutions and optimizations to problems commonly found.
Table of Contents (15 chapters)
OpenLayers Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Changing the 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 hides 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, Google, and Bing. The layer opacity is set to 50% in the following screenshot:

The OpenLayers.Layer base class has an opacity property, implemented by concrete subclasses, that allows us to modify the opacity of the layers. It is a float value that can range from 0.0 (completely transparent) to 1.0 (completely opaque).

How to do it...

The opacity of the layers can be changed. To change the opacity of the layer, perform the following steps:

  1. Create an HTML file adding the required OpenLayers dependencies.

    Note

    We have intentionally omitted the HTML code required for the slider control. Here, we have focused on the code for OpenLayers. If interested in knowing...