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">
18 display: inline-block;
32 <a href="../" class="docLink">< docs</a>
36 This page has a couple basic interactive tests of the default $.geo.proj object.</p>
38 direct conversion</h2>
40 Enter a lon/lat in the top inputs (remember, longitude is first here and throughout jQuery Geo but usually spoken second) & click fromGeodetic to convert it to web mercator and store the new values in the bottom two inputs. Click toGeodetic to reverse.</p>
42 <span>longitude</span>
43 <input type="text" id="txtLon" value="-71.0597732" />
47 <input type="text" id="txtLat" value="42.3584308" />
49 <button type="button" id="cmdFrom">
50 \/ fromGeodetic</button>
51 <button type="button" id="cmdTo">
52 /\ toGeodetic</button>
54 <span>web mercator x</span>
55 <input type="text" id="txtX" value="-7910337.768509507" />
58 <span>web mercator y</span>
59 <input type="text" id="txtY" value="5214822.77694091" />
64 Enter a search term in the input and click search. If successful, geodetic & 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>
67 <input type="text" id="txtQuery" value="Boston,MA" />
69 <button type="button" id="cmdSearch">search</button>
73 Status result for any test.</p>
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>
81 $("#cmdFrom").click(function () {
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());
88 $("#lblStatus").html("error" + e.toString());
91 $("#cmdTo").click(function () {
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());
98 $("#lblStatus").html("error" + e.toString());
102 $("#cmdSearch").click(function () {
104 var query = "http://open.mapquestapi.com/nominatim/v1/search?format=json&q=" + $("#txtQuery").val();
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());
118 $("#lblStatus").html("nothing found :(");
121 error: function (xhr) {
122 $("#lblStatus").html(xhr.statusText);
126 $("#lblStatus").html("error" + e.toString());