5 <title>panning & 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 & 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">
28 <a href="../" class="docLink">< docs</a>
29 <a href="http://jsfiddle.net/ryanttb/aSFsK/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
31 <h1>panning & scroll</h1>
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>
35 <p class="not-mobile">scroll options default and zoom work the same.</p>
38 <legend>pannable (click to toggle)</legend>
39 <input type="checkbox" id="pannable" checked="checked" /><label for="pannable">pannable</label>
43 <legend>scroll</legend>
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>
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>
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 ],
66 pannable: $( "#pannable" ).prop( "checked" ),
67 scroll: $( "input[name='scroll']:checked" ).val( )
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 );
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 );
86 var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
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'));