1 <html xmlns="http://www.w3.org/1999/xhtml">
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">
15 <script src="../lib/OpenLayers.js"></script>
16 <script type="text/javascript">
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'} );
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);
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>
39 <p> To place the Naviation Toolbar outside the map:</p>
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>