Introduction

In this article we are going to have a very interesting session with a PhoneGapPhoto application. In this application we will find the different geo locations with a PhoneGap Application.

Let's see how to get a latitude and longitude of Geolocation with PhoneGap.

Step 1 : Open Visual Studio 2010

pg 2.jpg

Step 2 : Open File menu -select new - Choose Project then.

pg 3.jpg


Step 3 : Select the new phone application and rename it according to your requirement.

new.jpg

Step 4 : After opening up the source code, replace the code with the given code for the index.html file:

out 1.jpg

Scripting for getting User interface

<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
 <title>PhoneGap WP7</title>
 <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
 <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
 <script type="text/javascript">
 // provide our own console if it does not exist ,huge dev aid'
 if (typeof window.console == "Undefined") {
window.console = { log: function (str) { window.external.Notify(str); } };
}
// output any errors to console log ,created above'
 window.onerror = function (e) {
console.log("window.onError::" + JSON.stringify(e));
};
console.log("Installed console !");
</script>
 <script type="text/javascript" charset="uft-8" src="photo.js"></script>
 </head>
 <body>
 <h1> Photo Location</h1>
 <div>
 <input id="loadImageButton" type="button" value="Select Photo" onclick="selectPhoto(false);" />
 <input id="TakePictureButton" type="button" value="Take Photo" onclick="selectPhoto(true);" />
 </div>
 <div>
 <img id="imageControl" alt="" />
 </div>
<div>
<span>Current Location : </span>
 <ul>
 <li> Latitude : <span id="latSpan"></span></li>
 <li> Longitude:<span id="lonSpan"></span></li>
</ul>
 </div>
 </body>
</html>

Designing

out.jpg

Step 5 : Code for the Master.css file.

body
{
background:#000 none repeat scroll 0 0;
color:#ccc;
font-family:Helvetica, Verdana, Geneva, sans-serif;
margin:0;
border-top:1px solid #393939;
}
h1
 {
text-align:center;
font-size:18px;
color:#FFC312; /* Mango me! */
 }
input[tpye=button]
 {
background-color:#000;
border:4px Solid #fff;
padding:4px;
color:#fff;
}
div input[type=button]:nth-child(n+2)
 {
margin-left:6px;
}
#imageControl
 {
margin-top:80px;
margin-left:10px;
width:300px;
height:300px;
}

Step 6 : In this section we use JavaScript for various functionality for the PhoneGapPhoto application. To create a new main.js file, go to www then right-click - add new items then select Text file and rename to main.js.

output0.jpg

out 2.jpg


Scripting for getting info using JavaScript

Put the given JavaScript in the photo.js file.

 /* js file the operations */

var pictureSource;
var destinationType;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
getCurrentLocation();
}
function selectPhoto(useCamera) {
if (useCamera) { // take picture
 navigator.camera.getPicture(photoLoaded, onError, { allowEdit: true, destinationType: destinationType.FILE_URI });
}
else {
// select from library
navigator.camera.getPicture(photoLoaded, onError, { allowEdit: true, sourceType: pictureSource.PHOTOLIBRARY, destinationType: destinationType.FILE_URI });
}
}
function photoLoaded(imageData) {
var image = document.getElementById("imageControl");
image.src = imageData;
}
function onError(message) {
navigator.notification.alert(message, "", "Error");
}
function getCurrentLocation() {
navigator.geolocation.getCurrentPosition(locationSuccess, onError);
}
function locationSuccess(position) {
var lat = document.getElementById("latSpan");
var lon = document.getElementById("lonSpan");
lat.innerText = position.coords.latitude;
lon.innerText = position.coords.longitude;
}

Step 7 : Output Pres F5

ou.jpg

Additional Tools window:

o.jpg

Getting latitude and longitude for the New Delhi location.

output 2.jpg

Getting latitude and longitude for the Palwal location.

output 1.jpg

Getting latitude and longitude for the Aligarh location.

output 3.jpg

Getting latitude and longitude for the Varanasi location.

output 4.jpg