<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style>
img {
border: 0;
}
#container {
}
#tweetList {
color: #ddd;
}
#tweetList .tweet {
padding: 8px;
background:rgba(64,64,64,0.5);
border: 1px solid rgba(128,128,128,0.5);
opacity: 0.8;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
margin-bottom: .5em;
}
#tweetList a {
color: #f30;
text-decoration: underline;
}
#tweetList .avatar {
float: left;
}
#tweetList .content {
padding-left: 55px;
}
#tweetList .extra {
color: #666;
font-size: 85%
}
</style>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
var url = "http://search.twitter.com/search.json?callback=getTweets";
var intervalID;
function preventBehavior(e) { e.preventDefault(); };
function onWinLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
function onDeviceReady()
{
var funk = function(position)
{
callback(position.coords.latitude, position.coords.longitude);
};
var fail = function(error)
{
alert("error :: " + error);
}
intervalID = navigator.geolocation.watchPosition(funk,fail);
window.addEventListener("unload",onWindowUnload,false);
}
function onBackBtn()
{
navigator.geolocation.clearWatch(intervalID);
}
function onWindowUnload()
{
}
function getCurrentLocation()
{
document.getElementById("location2").innerHTML = "Getting current location ...";
var funk = function(position)
{
document.getElementById("location2").innerHTML = "Lat: "+position.coords.latitude+ " Lon: " +position.coords.longitude;
};
var fail = function(error)
{
alert("error :: " + error);
}
navigator.geolocation.getCurrentPosition(funk,fail);
}
function callback(lat, lon)
{
//navigator.geolocation.stop();
//alert("Callback :: " + lat + "," + lon);
print(lat,lon);
var geocode = "&geocode=" + lat + "%2C" + lon + "%2C1mi";
var fullUrl = url + geocode;
var head = document.getElementsByTagName('head');
var script = document.createElement('script');
script.src = fullUrl;
head[0].appendChild(script);
}
function getTweets(json) {
var q;
var parent = document.getElementById('tweetList');
parent.innerHTML = '';
var child;
for (var i = 0; i < json.results.length; i++) {
q = json.results[i];
child = document.createElement("div");
child.setAttribute("class","tweet");
child.innerHTML = '<div class="avatar"><img src="'+q.profile_image_url+'" alt="avatar" width="48" height="48" /></div>';
child.innerHTML += '<div class="content"><a href="http://m.twitter.com/'+q.from_user+'">'+q.from_user+'</a> '+q.text+'<div class="extra">'+q.location+' ('+q.created_at+')</div></div>';
parent.appendChild(child);
}
}
function print(lat,lon)
{
document.getElementById("location1").innerHTML = "Lat: "+lat+ " Lon: " +lon;// + " TS: " + (new Date().getTime());
}
</script>
</head>
<body id="stage" class="theme" onload="onWinLoad()">
<div class="topBar">
<a href="index.html" onclick="onBackBtn()">
<span class="back_button">Back</span>
</a>
<span class="pageTitle">GeoLocation</span>
</div>
<div id="container">
<div class="item" style="text-align:center;" id="location1">Getting your current location ...</div>
<p>Find who are tweeting within 1 mile radius of where you are!</p>
<div id="tweetList">
</div>
</div>
</body>
</html>