openlayers/examples/pan-zoom-panels.html

   1 <html>
   2 <head>
   3     <title>Pan and Zoom Panels</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5
   6     <!--
   7       -- Special stylesheet inclusion for ie6, which doesn't handle the alpha
   8       -- channel of images correctly. The special ie6 stylesheet will only
   9       -- be included if the browser running is ie6. For now, the only thing it
  10       -- does is load alternative, non-alpha pngs for the zoom/pan panels.
  11       -->
  12
  13     <!--[if lte IE 6]>
  14         <link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" />
  15     <![endif]-->
  16
  17     <link rel="stylesheet" href="style.css" type="text/css" />
  18     <script type="text/javascript" src="../lib/OpenLayers.js"></script>
  19     <script>
  20     var map;
  21     var lon = 5;
  22     var lat = 40;
  23     var zoom = 5;
  24     function init(){
  25         map = new OpenLayers.Map("map", {
  26             controls: [
  27                 new OpenLayers.Control.Navigation(),
  28                 new OpenLayers.Control.PanPanel(),
  29                 new OpenLayers.Control.ZoomPanel()
  30             ]
  31         });
  32
  33         var wms = new OpenLayers.Layer.WMS(
  34             "OpenLayers WMS",
  35             "http://labs.metacarta.com/wms/vmap0",
  36             {layers: 'basic'}
  37         );
  38         map.addLayers([wms]);
  39
  40         map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
  41     }
  42     </script>
  43 </head>
  44 <body onload='init();'>
  45     <h1 id="title">Pan and Zoom Panels</h1>
  46     <div id="tags"></div>
  47     <p id="shortdesc">Customizable pan and zoom panels</p>
  48     </p>
  49     <div id="map" class="smallmap"></div>
  50     <p id="docs">
  51         The pan and zoom panels allow you to use CSS styling to change the
  52         look and feel of the panels, including changing their position
  53         and their icons without needing to change any code.
  54     </p>
  55 </body>
  56 </html>