openlayers/examples/fullScreen.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2     <head>
   3         <title>Full Screen 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                 margin: 0;
   9             }
  10             #map {
  11                 width: 100%;
  12                 height: 100%;
  13             }
  14
  15             #text {
  16                 position: absolute;
  17                 bottom: 1em;
  18                 left: 1em;
  19                 width: 512px;
  20             }
  21         </style>
  22         <script src="../lib/OpenLayers.js"></script>
  23         <script type="text/javascript">
  24             var map;
  25             function init(){
  26                 map = new OpenLayers.Map('map');
  27
  28             var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  29                     "http://labs.metacarta.com/wms/vmap0",
  30                     {layers: 'basic'} );
  31             var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
  32                 "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
  33                 {layers: "landsat7"});
  34
  35                 var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
  36                     "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
  37                     {layers: "bathymetry,land_fn,park,drain_fn,drainage," +
  38                              "prov_bound,fedlimit,rail,road,popplace",
  39                      transparent: "true", format: "image/png" });
  40
  41                 map.addLayers([ol_wms, jpl_wms, dm_wms]);
  42                 map.addControl(new OpenLayers.Control.LayerSwitcher());
  43                 // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
  44                 map.zoomToMaxExtent();
  45             }
  46         </script>
  47     </head>
  48     <body onload="init()">
  49         <div id="map"></div>
  50
  51           <div id="text">
  52               <h1 id="title">Full Screen Example</h1>
  53
  54               <div id="tags"></div>
  55
  56               <p id="shortdesc">
  57                 Demonstrate a map that fill the entire browser window.
  58             </p>
  59
  60             <div id="docs">
  61                 This example uses CSS to define the dimensions of the map element in order to fill the screen.
  62                 When the user resizes the window, the map size changes correspondingly. No scroll bars!
  63             </div>
  64         </div>
  65     </body>
  66 </html>