openlayers/examples/teleportation.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers Teleporter Example</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <script src="../lib/OpenLayers.js"></script>
   7
   8     <style type="text/css">
   9         #wrapper {
  10             position: relative;
  11         }
  12         .spot1 {
  13             width: 250px;
  14         }
  15         .spot2 {
  16             width: 300px;
  17             position: absolute;
  18             left: 300px;
  19             top: 0;
  20         }
  21     </style>
  22
  23     <script type="text/javascript">
  24
  25         var map, layer, spot=1;
  26         function init(){
  27             map = new OpenLayers.Map({
  28                 div: "spot1"
  29             });
  30             map.addControl(new OpenLayers.Control.OverviewMap());
  31             layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  32                     "http://labs.metacarta.com/wms/vmap0",
  33                     {layers: 'basic'} );
  34             map.addLayer(layer);
  35             map.zoomTo(2);
  36         }
  37
  38         function teleport() {
  39             if (spot == 1) {
  40                 spot = 2;
  41             } else {
  42                 spot = 1;
  43             }
  44             map.render("spot" + spot);
  45         }
  46
  47     </script>
  48   </head>
  49   <body onload="init()">
  50     <h1 id="title">Map "Teleportation" and Rendering</h1>
  51
  52     <div id="tags"></div>
  53
  54     <p id="shortdesc">Call the map's render method to change its container.</p>
  55
  56     <div id="wrapper">
  57         <div id="spot1" class="smallmap spot1"></div>
  58         <div id="spot2" class="smallmap spot2"></div>
  59     </div>
  60
  61     <input type="button" onclick="teleport()" value="Teleport!"></input>
  62
  63     <div id="docs">
  64         This example demonstrates how a map can be rendered initially in one
  65         container and then moved to a new container.  At any point after map
  66         construction, the map's render method can be called with the id of
  67         an empty container, moving the map to the new container.
  68     </div>
  69   </body>
  70 </html>