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