4 <title>zoom mode example</title>
6 <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
7 <meta name="description" content="An example of zoom mode">
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/e6YHv/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle ></a>
33 <p>When a geomap widget's mode option is "zoom", you can your your mouse to draw a rectangle. jQuery Geo will change the bbox of the map to match the rectangle as closely as possible based on the tiling scheme and viewport size.</p>
34 <p class="not-mobile">This mode is more useful for dynamic map services and may be more familiar to GIS professionals.</p>
35 <p class="not-mobile">Hint: in pan or any of the draw modes, you can hold the shift key to temporarily switch to zoom mode.</p>
37 <input type="radio" id="pan" name="mode" value="pan" /><label for="pan">pan</label>
38 <input type="radio" id="zoom" name="mode" value="zoom" checked="checked" /><label for="zoom">zoom</label>
42 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
43 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
44 <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
47 // create a map, setting mode to zoom initially
48 var map = $("#map").geomap({
49 center: [-71.0595678, 42.3604823],
54 // jQuery UI for pretty buttons
55 $("#modes").buttonset();
57 $("#modes input").click(function () {
58 // set the map's mode option based on value of the input clicked
59 // this will change the map's mode to pan or zoom
60 map.geomap("option", "mode", $(this).val());
66 var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
68 var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
69 g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
70 s.parentNode.insertBefore(g, s);
71 } (document, 'script'));