]> dev.renevier.net Git - syp.git/blob - openlayers/examples/navtoolbar-outsidemap.html
avoid html injection in item title
[syp.git] / 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>