]> dev.renevier.net Git - syp.git/blob - openlayers/examples/fractional-zoom.html
reset openlayers directory to its original state at the end of build.sh
[syp.git] / openlayers / examples / fractional-zoom.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
3     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
4     <link rel="stylesheet" href="style.css" type="text/css" />
5     <script src="../lib/OpenLayers.js"></script>
6     <script type="text/javascript">
7         var map;
8
9         function init() {
10             map = new OpenLayers.Map('map', 
11                  {controls: [new OpenLayers.Control.Navigation(), 
12                              new OpenLayers.Control.PanZoomBar()], 
13                   numZoomLevels: 10 });
14             var wms = new OpenLayers.Layer.WMS(
15                 "OpenLayers WMS",
16                 "http://labs.metacarta.com/wms/vmap0",
17                 {layers: 'basic'}
18             );
19             map.addLayers([wms]);
20
21             map.events.register("moveend", null, displayZoom);
22
23             map.zoomToMaxExtent();
24             
25             update(document.getElementById("fractional"));
26             
27         }
28         
29         function displayZoom() {
30             document.getElementById("zoom").innerHTML = map.zoom.toFixed(4);
31         }
32         
33         function update(input) {
34             map.fractionalZoom = input.checked;
35             map.zoomTo(Math.round(map.zoom));
36         }
37     </script>
38   </head>
39   <body onload="init()">
40     <h1 id="title">Fractional Zoom Example</h1>
41
42     <div id="tags">
43     </div>
44     <p id="shortdesc">
45             Shows the use of a map with fractional (or non-discrete) zoom levels.
46     </p>
47
48     <div id="map" class="smallmap"></div>
49         <input type="checkbox" name="fractional"
50                id="fractional" checked="checked" onclick="update(this)" />
51         <label for="fractional">Fractional Zoom</label>
52         (zoom: <span id="zoom"></span>)
53         <br /><br />
54     <div id="docs">
55             <p>
56             Setting the map.fractionalZoom property to true allows zooming to
57             an arbitrary level (between the min and max resolutions).  This
58             can be demonstrated by shift-dragging a box to zoom to an arbitrary
59             extent.
60             </p>
61     </div>
62   </body>
63 </html>
64
65
66
67