]> dev.renevier.net Git - syp.git/blob - openlayers/examples/layer-opacity.html
err_lonlat_invalid exceptions not thrown correctly
[syp.git] / 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>