openlayers/examples/navtoolbar-outsidemap.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers: Custom Navigation Toolbar</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         #paneldiv {
   8             height: 80px;
   9         }
  10         #paneldiv div {
  11             top: 10px;
  12         }
  13
  14     </style>
  15     <script src="../lib/OpenLayers.js"></script>
  16     <script type="text/javascript">
  17         var lon = 5;
  18         var lat = 40;
  19         var zoom = 5;
  20         var map, layer;
  21
  22         function init(){
  23             map = new OpenLayers.Map( 'map', { controls: [new OpenLayers.Control.PanZoom()] } );
  24             layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  25                     "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
  26             map.addLayer(layer);
  27             var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
  28             map.addControl(panel);
  29             map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
  30
  31         }
  32     </script>
  33   </head>
  34   <body onload="init()">
  35     <h1 id="title">Navigation Toolbar: Outside the Map</h1>
  36     <div id="map" class="smallmap"></div>
  37     <div id="paneldiv" class="olControlNavToolbar"></div>
  38     <div id="docs">
  39      <p> To place the Naviation Toolbar outside the map:</p>
  40       <ul>
  41         <li>Load the default stylesheet into the page.</li>
  42         <li>Override the location of the Navigation toolbar in your CSS by setting <tt>#yourElementId div</tt> to have a top of 0px</li>
  43         <li>Specify the HTML element as a 'div' option in your NavToolbar constructor</li>
  44         <li>Add the olControlNavToolbar class to your div.</li>
  45       </ul>
  46    </div>
  47
  48   </body>
  49 </html>