libs/js/jquery-geo-1.0a4/docs/examples/zoom.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>zoom example</title>
   5   <meta charset="utf-8">
   6   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   7   <meta name="description" content="An example of zoom">
   8   <meta name="author" content="Ryan Westphal">
   9   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css" />
  10   <link rel="stylesheet" type="text/css" href="css/style.css" />
  11   <style type="text/css">
  12     #map
  13     {
  14       position: fixed;
  15       left: 0;
  16       top: 0;
  17       right: 0;
  18       bottom: 0;
  19     }
  20   </style>
  21 </head>
  22 <body>
  23   <div>
  24     <div id="map">
  25     </div>
  26     <div class="info">
  27       <a href="../" class="docLink">&lt; docs</a>
  28       <h1>
  29         zoom</h1>
  30       <p>
  31         This example uses the zoom method (as opposed to the zoom option) to change the zoom by relative amounts. Input a number of levels by which to change and click zoom. Negative values zoom out.</p>
  32       <input type="number" id="zoom" value="1" /><button type="button">zoom</button>
  33     </div>
  34   </div>
  35   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  36   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  37   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  38   <script>
  39     $(function () {
  40       var map = $("#map").geomap({
  41         center: [-71.0595678, 42.3604823],
  42         zoom: 8
  43       });
  44
  45       $("button").button().click(function () {
  46         var value = parseInt($("input").val());
  47         if (value) {
  48           map.geomap("zoom", value);
  49         }
  50       });
  51     });
  52   </script>
  53
  54   <script>
  55     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
  56     (function (d, t) {
  57       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
  58       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
  59       s.parentNode.insertBefore(g, s);
  60     } (document, 'script'));
  61   </script>
  62 </body>
  63 </html>