openlayers/examples/navigation-history.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2     <head>
   3         <title>OpenLayers Navigation History Example</title>
   4         <link rel="stylesheet" href="style.css" type="text/css" />
   5         <style>
   6             #panel {
   7                 right: 0px;
   8                 height: 30px;
   9                 width: 200px;
  10             }
  11             #panel div {
  12                 float: left;
  13                 margin: 5px;
  14             }
  15         </style>
  16         <script src="../lib/OpenLayers.js"></script>
  17         <script type="text/javascript">
  18             var map, nav, panel;
  19
  20             function init() {
  21                 map = new OpenLayers.Map('map');
  22
  23                 nav = new OpenLayers.Control.NavigationHistory();
  24                 // parent control must be added to the map
  25                 map.addControl(nav);
  26
  27                 panel = new OpenLayers.Control.Panel(
  28                     {div: document.getElementById("panel")}
  29                 );
  30                 panel.addControls([nav.next, nav.previous]);
  31                 map.addControl(panel);
  32
  33                 var layer = new OpenLayers.Layer.WMS(
  34                     "OpenLayers WMS",
  35                     "http://labs.metacarta.com/wms/vmap0",
  36                     {layers: 'basic'}
  37                 );
  38                 map.addLayer(layer);
  39                 map.zoomToMaxExtent();
  40             }
  41         </script>
  42     </head>
  43     <body onload="init()">
  44         <h1 id="title">Map Navigation History Example</h1>
  45
  46         <div id="tags">
  47         </div>
  48
  49         <p id="shortdesc">
  50             A control for zooming to previous and next map extents.
  51         </p>
  52
  53         <div id="map" class="smallmap"></div>
  54         Map navigation history controls<div id="panel"></div>
  55         <div id="docs"></div>
  56     </body>
  57 </html>