Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

96 lines (91 sloc) 3.491 kb
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Layer Opacity Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
body {
font-family: sans-serif;
p {
width: 512px;
a {
text-decoration: none;
color: black;
font-weight: bold;
font-size: 1.1em;
#opacity {
padding: 0;
text-align: center;
width: 2em;
font-family: sans-serif;
background: transparent;
color: black;
border: 0;
p.note {
font-style: italic;
font-size: 0.8em;
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map = null;
var shade = null;
var maxOpacity = 0.9;
var minOpacity = 0.1;
function changeOpacity(byOpacity) {
var newOpacity = (parseFloat(OpenLayers.Util.getElement('opacity').value) + byOpacity).toFixed(1);
newOpacity = Math.min(maxOpacity,
Math.max(minOpacity, newOpacity));
OpenLayers.Util.getElement('opacity').value = newOpacity;
function init(){
var options = {
maxExtent: new OpenLayers.Bounds(-110.994, 45.885, -110.950, 45.929),
maxResolution: "auto"
map = new OpenLayers.Map('map', options);
var drg = new OpenLayers.Layer.WMS("Topo Maps",
{layers: "DRG"});
shade = new OpenLayers.Layer.WMS("Shaded Relief",
{layers: "HR-NED.IMAGE", reaspect: "false", transparent: 'true'},
{isBaseLayer: false, opacity: 0.3});
map.addLayers([drg, shade]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
<body onload="init()">
<h1 id="title">Layer Opacity Example</h1>
<div id="tags">
opacity, transparent, transparency, light
<p id="shortdesc">
Demonstrate a change in the opacity for an overlay layer.
<div id="map" class="smallmap"></div>
<div id="docs">
Note that if you also have the setOpacity method defined on the Layer
class, you can tweak the layer opacity after it has been added to the map.
<a title="decrease opacity" href="javascript: changeOpacity(-0.1);">&lt;&lt;</a>
<input id="opacity" type="text" value="0.3" size="3" disabled="true" />
<a title="increase opacity" href="javascript: changeOpacity(0.1);">&gt;&gt;</a>
<p class="note">IE users: Wait until the shade layer has finished loading to try this.</p>
Jump to Line
Something went wrong with that request. Please try again.