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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>TEMPLATE example</title>
   6   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
   7   <meta name="description" content="An example of TEMPLATE">
   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/==JSFIDDLE==/embedded/" class="fiddleLink"><img src="img/jsfiddle.png" alt="" /> jsFiddle &gt;</a>
  30       </div>
  31       <h1>Is Geodetic?</h1>
  32       <table class="tests">
  33         <tr><th>[-71.05, 42.36]</th><td></td></tr> <!-- position / Point -->
  34         <tr><th>[-8102018.97, 5011809.33]</th><td></td></tr>
  35         <tr><th>[-72.78, 40.99, -69.33, 43.69]</th><td></td></tr> <!-- bbox -->
  36         <tr><th>[-8102018.97, 5011809.33, -7718610.83, 5418454.32]</th><td></td></tr>
  37         <tr><th>[[-72.78, 43.32], [-71.33, 42.43]]</th><td></td></tr> <!-- LineString / MultiPoint -->
  38         <tr><th>[[-8102018.97, 5011809.33], [-7718610.83, 5418454.32]]</th><td></td></tr>
  39         <tr><th>[[[-72.78, 43.32], [-71.33, 42.43], [-70.12, 43.16], [-72.78, 43.32]]]</th><td></td></tr> <!-- Polygon / MultiLineString-->
  40         <tr><th>[[[-8102018.97, 5011809.33], [-7718610.83, 5418454.32], [-8102018.83, 5418454.32], [-8102018.97, 5011809.33]]]</th><td></td></tr>
  41         <tr><th>[[[[-72.78, 43.32], [-71.33, 42.43], [-70.12, 43.16], [-72.78, 43.32]]]]</th><td></td></tr> <!-- MultiPolygon -->
  42         <tr><th>[[[[-8102018.97, 5011809.33], [-7718610.83, 5418454.32], [-8102018.83, 5418454.32], [-8102018.97, 5011809.33]]]]</th><td></td></tr>
  43       </table>
  44     </div>
  45   </div>
  46   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  47   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  48   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  49   <script>
  50     $(function () {
  51       // create a map
  52       var map = $("#map").geomap({
  53         center: [-71.0595678, 42.3604823],
  54         zoom: 8
  55       });
  56
  57       $( ".tests tr" ).each( function( ) {
  58         var testJson = $( this ).find( "th" ).text(),
  59             testVal = testJson != "" ? JSON.parse( testJson ) : "",
  60             isGeodetic = $.geo._isGeodetic( testVal );
  61
  62
  63
  64         $( this ).find( "td" ).text( isGeodetic ? "geodetic" : "projected" );
  65
  66       } );
  67     });
  68   </script>
  69 </body>
  70 </html>