forked from phonegap/phonegap-start
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (95 loc) · 3.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<title>Whereami?</title>
<!-- Load CSS assets -->
<link rel="stylesheet" href="assets/css/jquery.mobile-1.0.1.min.css"/>
<!-- Load JavaScript assets -->
<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/jquery.mobile-1.0.1.min.js" type="text/javascript" charset="utf-8"></script>
<!-- Application logic -->
<script type="text/javascript">
var my_position = false;
// Wait for PhoneGap to load
window.addEventListener('load', function() {
document.addEventListener('deviceready', onDeviceReady, false);
}, false);
// PhoneGap is ready
function onDeviceReady() {}
// jQuery Mobile Event Handling
$( function() {
$('#location_button').click(function() {
// Determine the current location
navigator.geolocation.getCurrentPosition( onLocated, onError,
{ maximumAge: 3000, timeout: 15000, enableHighAccuracy: true });
});
$('#tweets_button').click( fetchTweets );
});
// On successful geolocation
function onLocated( position ) {
// Store the position
my_position = position;
// Get the element to update
var element = $('#location_text');
// Display the latitude, longitude, and timestamp
element.html(
'Latitude: ' + position.coords.latitude + '<br />'
+ 'Longitude: ' + position.coords.longitude + '<br />'
+ 'Timestamp: ' + new Date(position.timestamp) + '<br />' );
// Get a detailed textual description of the location
$.get("http://datafluency.com/geo/info/" + position.coords.latitude + '/' + position.coords.longitude + '/text',
function( text ) {
element.append($(document.createElement('p')).html(text));
$('#tweet_p').show();
}
);
}
function fetchTweets() {
if ( my_position === false ) {
alert( "Unable to show local tweets. Location unknown." );
} else {
$.get("http://search.twitter.com/search.json?rpp=5&geocode=" +
[my_position.coords.latitude,my_position.coords.longitude,'8mi'].join(','),
function ( data ) {
$.each(data.results, function(i,v) {
$('#tweets').append($(document.createElement('p')).html(v.text));
});
}
);
}
}
// On error
function onError( error ) {
alert( 'code: ' + error.code + '\n'
+'message: ' + error.message + '\n');
}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="home">
<div data-role="header">
<h1>Where Am I?</h1>
</div>
<div data-role="content">
<p>It's good to know where you are!</p>
<p><a href="#location" id="location_button" data-role="button">Find My Location</a></p>
</div>
</div>
<!-- Location -->
<div data-role="page" id="location">
<div data-role="content">
<p id="location_text">Determining your location...</p>
<p id="tweet_p" style="display:none;"><a href="#tweets" id="tweets_button" data-role="button">Local Tweets</a></p>
<p><a href="#home" data-role="button">Home</a></p>
</div>
</div>
<!-- Tweets -->
<div data-role="page" id="tweets">
<p>Loading nearby tweets from Twitter...</p>
<p><a href="#home" data-role="button">Home</a></p>
</div>
</body>
</html>