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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta charset="utf-8">
   5   <title>proj test</title>
   6   <meta name="description" content="Small test of $.geo.proj">
   7   <meta name="author" content="Ryan Westphal">
   8   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   9   <link rel="stylesheet" type="text/css" href="css/style.css" />
  10   <style type="text/css">
  11     label
  12     {
  13       display: block;
  14       margin: .25em;
  15     }
  16     label span
  17     {
  18       display: inline-block;
  19       font-weight: bold;
  20       width: 8em;
  21     }
  22     #lblStatus
  23     {
  24       background: #ee4;
  25       border-radius: .5em;
  26       padding: .5em;
  27     }
  28   </style>
  29 </head>
  30 <body>
  31   <div>
  32     <a href="../" class="docLink">&lt; docs</a>
  33     <h1>
  34       proj test</h1>
  35     <p>
  36       This page has a couple basic interactive tests of the default $.geo.proj object.</p>
  37     <h2>
  38       direct conversion</h2>
  39     <p>
  40       Enter a lon/lat in the top inputs (remember, longitude is first here and throughout jQuery Geo but usually spoken second) &amp; click fromGeodetic to convert it to web mercator and store the new values in the bottom two inputs. Click toGeodetic to reverse.</p>
  41     <label>
  42       <span>longitude</span>
  43       <input type="text" id="txtLon" value="-71.0597732" />
  44     </label>
  45     <label>
  46       <span>latitude</span>
  47       <input type="text" id="txtLat" value="42.3584308" />
  48     </label>
  49     <button type="button" id="cmdFrom">
  50       \/ fromGeodetic</button>
  51     <button type="button" id="cmdTo">
  52       /\ toGeodetic</button>
  53     <label>
  54       <span>web mercator x</span>
  55       <input type="text" id="txtX" value="-7910337.768509507" />
  56     </label>
  57     <label>
  58       <span>web mercator y</span>
  59       <input type="text" id="txtY" value="5214822.77694091" />
  60     </label>
  61     <h2>
  62       osm nominatim</h2>
  63     <p>
  64       Enter a search term in the input and click search. If successful, geodetic &amp; web mercator coordinates are written to the inputs above. This example uses MapQuest's OSM API: <a href="http://open.mapquestapi.com/nominatim/">http://open.mapquestapi.com/nominatim</a>.</p>
  65     <label>
  66       <span>query</span>
  67       <input type="text" id="txtQuery" value="Boston,MA" />
  68     </label>
  69     <button type="button" id="cmdSearch">search</button>
  70     <h2>
  71       status</h2>
  72     <p>
  73       Status result for any test.</p>
  74     <div id="lblStatus">
  75       ready</div>
  76   </div>
  77   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  78   <script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  79   <script>
  80     $(function () {
  81       $("#cmdFrom").click(function () {
  82         try {
  83           var projected = $.geo.proj.fromGeodetic([[parseFloat($("#txtLon").val()), parseFloat($("#txtLat").val())]]);
  84           $("#txtX").val(projected[0][0])
  85           $("#txtY").val(projected[0][1])
  86           $("#lblStatus").html("done " + (new Date()).toString());
  87         } catch (e) {
  88           $("#lblStatus").html("error" + e.toString());
  89         }
  90       });
  91       $("#cmdTo").click(function () {
  92         try {
  93           var geodetic = $.geo.proj.toGeodetic([[parseFloat($("#txtX").val()), parseFloat($("#txtY").val())]]);
  94           $("#txtLon").val(geodetic[0][0])
  95           $("#txtLat").val(geodetic[0][1])
  96           $("#lblStatus").html("done " + (new Date()).toString());
  97         } catch (e) {
  98           $("#lblStatus").html("error" + e.toString());
  99         }
 100       });
 101
 102       $("#cmdSearch").click(function () {
 103         try {
 104           var query = "http://open.mapquestapi.com/nominatim/v1/search?format=json&q=" + $("#txtQuery").val();
 105           $.ajax({
 106             url: query,
 107             dataType: "jsonp",
 108             jsonp: "json_callback",
 109             success: function (result) {
 110               if (result && result.length > 0) {
 111                 $("#txtLon").val(result[0].lon)
 112                 $("#txtLat").val(result[0].lat)
 113                 var projected = $.geo.proj.fromGeodetic([[result[0].lon, result[0].lat]]);
 114                 $("#txtX").val(projected[0][0])
 115                 $("#txtY").val(projected[0][1])
 116                 $("#lblStatus").html("done " + (new Date()).toString());
 117               } else {
 118                 $("#lblStatus").html("nothing found :(");
 119               }
 120             },
 121             error: function (xhr) {
 122               $("#lblStatus").html(xhr.statusText);
 123             }
 124           });
 125         } catch (e) {
 126           $("#lblStatus").html("error" + e.toString());
 127         }
 128       });
 129     });
 130   </script>
 131 </body>
 132 </html>
 133