openlayers/examples/layer-opacity.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3       <title>OpenLayers Layer Opacity Example</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <style type="text/css">
   7         body {
   8             font-family: sans-serif;
   9         }
  10         p {
  11             width: 512px;
  12         }
  13         a {
  14             text-decoration: none;
  15             color: black;
  16             font-weight: bold;
  17             font-size: 1.1em;
  18         }
  19         #opacity {
  20             padding: 0;
  21             text-align: center;
  22             width: 2em;
  23             font-family: sans-serif;
  24             background: transparent;
  25             color: black;
  26             border: 0;
  27         }
  28         p.note {
  29             font-style: italic;
  30             font-size: 0.8em;
  31         }
  32     </style>
  33     <script src="../lib/OpenLayers.js"></script>
  34     <script type="text/javascript">
  35         var map = null;
  36         var shade = null;
  37         var maxOpacity = 0.9;
  38         var minOpacity = 0.1;
  39         function changeOpacity(byOpacity) {
  40             var newOpacity = (parseFloat(OpenLayers.Util.getElement('opacity').value) + byOpacity).toFixed(1);
  41             newOpacity = Math.min(maxOpacity,
  42                                   Math.max(minOpacity, newOpacity));
  43             OpenLayers.Util.getElement('opacity').value = newOpacity;
  44             shade.setOpacity(newOpacity);
  45         }
  46         function init(){
  47             var options = {
  48                 maxExtent: new OpenLayers.Bounds(-110.994, 45.885, -110.950, 45.929),
  49                 maxResolution: "auto"
  50             };
  51             map = new OpenLayers.Map('map', options);
  52             var drg = new OpenLayers.Layer.WMS("Topo Maps",
  53                 "http://terraservice.net/ogcmap.ashx",
  54                 {layers: "DRG"});
  55             shade = new OpenLayers.Layer.WMS("Shaded Relief",
  56                 "http://gisdata.usgs.gov/wmsconnector/com.esri.wms.Esrimap?ServiceName=USGS_EDC_Elev_NED_3",
  57                 {layers: "HR-NED.IMAGE", reaspect: "false", transparent: 'true'},
  58                 {isBaseLayer: false, opacity: 0.3});
  59             map.addLayers([drg, shade]);
  60             map.addControl(new OpenLayers.Control.LayerSwitcher());
  61             map.zoomToMaxExtent();
  62         }
  63     </script>
  64   </head>
  65   <body onload="init()">
  66     <h1 id="title">Layer Opacity Example</h1>
  67
  68     <div id="tags"></div>
  69
  70     <p id="shortdesc">
  71         Demonstrate a change in the opacity for an overlay layer.
  72     </p>
  73
  74     <div id="map" class="smallmap"></div>
  75
  76     <div id="docs">
  77         <p>
  78             Note that if you also have the setOpacity method defined on the Layer
  79             class, you can tweak the layer opacity after it has been added to the map.
  80         </p>
  81         <p>Opacity:
  82             <a title="decrease opacity" href="javascript: changeOpacity(-0.1);">&lt;&lt;</a>
  83             <input id="opacity" type="text" value="0.3" size="3" disabled="true" />
  84             <a title="increase opacity" href="javascript: changeOpacity(0.1);">&gt;&gt;</a>
  85         </p>
  86         <p class="note">IE users: Wait until the shade layer has finished loading to try this.</p>
  87     </div>
  88   </body>
  89 </html>