libs/js/jquery-geo-1.0b2/docs/examples/drag.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>drag example</title>
   6   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   7   <meta name="description" content="An example of drag modes">
   8   <meta name="author" content="Ryan Westphal">
   9   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/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/==JSFIDDLE==/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  30       </div>
  31
  32       <h1>drag</h1>
  33
  34       <p>There are currently two drag modes: dragBox and dragCircle. This demo tests only dragBox when set as the mode during init.</p>
  35     </div>
  36   </div>
  37   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  38   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
  39   <script src="../jquery.geo-test.min.js"></script>
  40   <script>
  41     $( function ( ) {
  42       // create a map, setting the mode to dragBox
  43       var map = $( "#map" ).geomap( {
  44         center: [ -71.0595678, 42.3604823 ],
  45         zoom: 8,
  46         mode: "dragBox",
  47         shape: function( e, geo ) {
  48           // drag modes generate GeoJSON objects and send them as the geo argument
  49           // you can append them to the map
  50           map.geomap( "append", geo );
  51         }
  52       } );
  53     } );
  54   </script>
  55
  56   <script>
  57     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
  58     (function (d, t) {
  59       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
  60       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
  61       s.parentNode.insertBefore(g, s);
  62     } (document, 'script'));
  63   </script>
  64 </body>
  65 </html>