]> dev.renevier.net Git - syp.git/blob - openlayers/examples/teleportation.html
when selecting a cluster, zoom until features are detached
[syp.git] / 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>