openlayers/examples/layerswitcher.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3       <title>OpenLayers Layer Switcher 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     <script src="../lib/OpenLayers.js"></script>
   7     <script type="text/javascript">
   8         var map;
   9         function init(){
  10             map = new OpenLayers.Map('map', { controls: [] });
  11             map.addControl(new OpenLayers.Control.Navigation());
  12
  13             map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')}));
  14
  15             var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  16                 "http://labs.metacarta.com/wms/vmap0",
  17                 {layers: 'basic'}, {'displayInLayerSwitcher':false} );
  18
  19             var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
  20                 "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
  21                 {layers: "landsat7"}, {'isBaseLayer': false});
  22
  23             var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
  24                 "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
  25                 {layers: "bathymetry,land_fn,park,drain_fn,drainage," +
  26                          "prov_bound,fedlimit,rail,road,popplace",
  27                  transparent: "true", format: "image/png" });
  28
  29             jpl_wms.setVisibility(false);
  30             dm_wms.setVisibility(false);
  31
  32             map.addLayers([ol_wms, jpl_wms, dm_wms]);
  33             if (!map.getCenter()) map.zoomToMaxExtent();
  34         }
  35     </script>
  36   </head>
  37   <body onload="init()">
  38     <h1 id="title">Layer Switcher Example</h1>
  39
  40     <div id="tags">
  41     </div>
  42
  43     <p id="shortdesc">
  44         Demonstrates the use of the LayerSwitcher outside of the OpenLayers window.
  45     </p>
  46
  47     <div id="layerswitcher"></div>
  48     <div id="map" class="smallmap"></div>
  49     <div id="docs">
  50       <p>This demonstrates use of the LayerSwitcher outside the map div. It also shows use
  51          of the displayInLayerSwitcher option on the Layer to cause it to not display in the
  52          LayerSwitcher.</p>
  53    </div>
  54   </body>
  55 </html>