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>