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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>events example</title>
   6   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   7   <meta name="description" content="An example of basic interaction events">
   8   <meta name="author" content="Ryan Westphal">
   9   <link rel="stylesheet" type="text/css" href="css/style.css" />
  10   <style type="text/css">
  11     #map
  12     {
  13       position: fixed;
  14       left: 0;
  15       top: 0;
  16       right: 0;
  17       bottom: 0;
  18     }
  19     th
  20     {
  21       text-align: left;
  22     }
  23     th, td
  24     {
  25       margin: 0;
  26       padding: 4px;
  27       border-left: solid 2px #dedede;
  28     }
  29   </style>
  30 </head>
  31 <body>
  32   <div id="events">
  33     <div id="map">
  34     </div>
  35     <div class="info">
  36       <div class="links">
  37         <a href="../" class="docLink">&lt; docs</a>
  38         <a href="http://jsfiddle.net/ryanttb/fg6wv/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  39       </div>
  40       <h1>events</h1>
  41       <p>The basic interaction events are: move, click, dblclick, and bboxchange. jQuery Geo triggers then when a user interacts with the map.</p>
  42      <table cellspacing="0">
  43       <thead>
  44         <tr>
  45           <th>
  46             event (time)
  47           </th>
  48           <th>
  49             geo argument
  50           </th>
  51         </tr>
  52       </thead>
  53       <tbody>
  54         <tr class="geomapmove">
  55           <td>
  56             move (<span class="date"></span>)
  57           </td>
  58           <td class="data">
  59           </td>
  60         </tr>
  61         <tr class="geomapclick">
  62           <td>
  63             click (<span class="date"></span>)
  64           </td>
  65           <td class="data">
  66           </td>
  67         </tr>
  68         <tr class="geomapdblclick">
  69           <td>
  70             dblclick (<span class="date"></span>)
  71           </td>
  72           <td class="data">
  73           </td>
  74         </tr>
  75         <tr class="geomapbboxchange">
  76           <td>
  77             bboxchange (<span class="date"></span>)
  78           </td>
  79           <td class="data">
  80           </td>
  81         </tr>
  82       </tbody>
  83     </table>
  84    </div>
  85   </div>
  86   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  87   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  88   <script>
  89     $(function () {
  90       // create a map
  91       // hook into all the events and update the screen when they're triggered
  92       // we don't need to prefix the events with the widget's name during initialization
  93       var map = $("#map").geomap({
  94         center: [-71.0595678, 42.3604823],
  95         zoom: 8,
  96
  97         // position events get a GeoJSON Point object
  98         move: positionEventHandler,
  99         click: positionEventHandler,
 100         dblclick: positionEventHandler,
 101
 102         // bbox events get an object with a bbox property
 103         bboxchange: bboxEventHandler
 104       });
 105
 106       function positionEventHandler( e, geo ) {
 107         // jQuery stores the event type in e.type
 108         // outside of the initialization function,
 109         // the jQuery UI widget events all have a widget prefix
 110         // in this case it's: geomap
 111
 112         // this example builds a selector for the class
 113         // of the table's row for this event
 114         // if the event is, e.g., move, e.type is geomapmove and the row we want is .geomapmove
 115         var eventRowClass = "." + e.type;
 116
 117         // update the time stamp for this event
 118         $(eventRowClass + " .date").text($.now());
 119
 120         // contained in the geo argument as a GeoJSON Point object
 121
 122         // the coordinates property is an array,
 123         // this example joins them with an extra space so they look a little nicer
 124         var displayCoords = geo.coordinates.join( ", " );
 125
 126
 127         // convert the map coordinates to pixel locations to show them as well
 128         var displayPixels = map.geomap( "toPixel", geo.coordinates ).join( ", " );
 129
 130         // update the position data
 131         $(eventRowClass + " .data").html("pixels: [ " + displayPixels + " ]<br>coordinates: [ " + displayCoords + " ]");
 132       }
 133
 134       function bboxEventHandler( e, geo ) {
 135         // again, build a selector for the class of the table's row for this event
 136         // for example, the bboxchange event's e.type is geomapbboxchange
 137         // and the row we want is .geomapbboxchange
 138         var eventRowClass = "." + e.type;
 139
 140         // update the time stamp for this event
 141         $( eventRowClass + " .date" ).text( $.now( ) );
 142
 143         // update the position data,
 144         // contained in the geo argument as an object with a bbox property
 145         // currently that's all the object has
 146         $( eventRowClass + " .data" ).text( "[ " + geo.bbox.join( ", " ) + " ]" );
 147       }
 148     });
 149   </script>
 150
 151   <script>
 152     var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
 153     (function (d, t) {
 154       var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
 155       g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
 156       s.parentNode.insertBefore(g, s);
 157     } (document, 'script'));
 158   </script>
 159 </body>
 160 </html>