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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>panning &amp; scroll example</title>
   6   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   7   <meta name="description" content="An example of panning &amp; scroll">
   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       <div class="links">
  28         <a href="../" class="docLink">&lt; docs</a>
  29         <a href="http://jsfiddle.net/ryanttb/aSFsK/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  30       </div>
  31       <h1>panning &amp; scroll</h1>
  32
  33       <p>The panning option can remove a user's ability to pan the map. The scroll option can remove a user's ability to use the mouse wheel to zoom.</p>
  34
  35       <p class="not-mobile">scroll options default and zoom work the same.</p>
  36
  37       <fieldset>
  38         <legend>pannable (click to toggle)</legend>
  39         <input type="checkbox" id="pannable" checked="checked" /><label for="pannable">pannable</label>
  40       </fieldset>
  41
  42       <fieldset>
  43         <legend>scroll</legend>
  44         <div id="scroll">
  45           <input type="radio" id="default" name="scroll" value="default" checked="checked" /><label for="default">default</label>
  46           <input type="radio" id="zoom" name="scroll" value="zoom" /><label for="zoom">zoom</label>
  47           <input type="radio" id="off" name="scroll" value="off" /><label for="off">off</label>
  48         </div>
  49       </fieldset>
  50
  51
  52
  53     </div>
  54   </div>
  55   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  56   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  57   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  58   <script>
  59     $(function () {
  60       // create a map
  61       // set pannable and scroll options based on current input values
  62       // in case the browser has cached them
  63       var map = $( "#map" ).geomap( {
  64         center: [ -71.0595678, 42.3604823 ],
  65         zoom: 8,
  66         pannable: $( "#pannable" ).prop( "checked" ),
  67         scroll: $( "input[name='scroll']:checked" ).val( )
  68       } );
  69
  70       $( "#pannable" ).button( ).click( function( ) {
  71         // toggle the pannable option based on the state
  72         // of the pannable button
  73         map.geomap( "option", "pannable", this.checked );
  74       } );
  75
  76       $( "#scroll" ).buttonset( ).find( "input" ).click( function( ) {
  77         // set the scroll option based on the currently checked radio's value
  78         var scrollValue = $( "input[name='scroll']:checked" ).val( );
  79         map.geomap( "option", "scroll", scrollValue );
  80       } );
  81
  82     });
  83   </script>
  84
  85   <script>
  86     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
  87     (function (d, t) {
  88       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
  89       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
  90       s.parentNode.insertBefore(g, s);
  91     } (document, 'script'));
  92   </script>
  93 </body>
  94 </html>