Tuesday, February 3, 2015

PhoneGap geolocation example

Hi friends, I am going to explain you how to retrive longitude and latitude values using gps and display map on the screen using this longitude and latitude values.i named this example as geolocation as we are displaying map on screen using geolocation values.

Step 1 :

Create a new phonegap based android project named geolocation and give package name as com.sree.geolocation.

Step 2 :

Create a javascript file named as geolocation.js

Step 3:

Please go through the code below,we are retriving longitude and latitude values from mobile using gps and googlemaps api.now using the coordinates we are diplaying map and embedding map in a rectangle using width and height.if there is any error function error will be displayed with error code or other wise it will display the success and displays coordinates and map.we are also giving some style features for our map.

var
getCurrentPosition = function() {
var map = document.getElementById(map);
var success = function(pos) {
var text = "<div>Latitude: " + pos.coords.latitude +
"<br/>" + "Longitude: " + pos.coords.longitude + "<br/>" +
"Accuracy: " + pos.coords.accuracy + "m<br/>" + "</div>";
document.getElementById(
cur_position).innerHTML = text;
console.log(text);
map.style.display =
block;
var mapwidth = 270; // a mungy compromise between the 2 sizes
var mapheight = 210; // since we cant get w / h dynamically
map.src =
"http://maps.googleapis.com/maps/api/staticmap?center=" +
pos.coords.latitude +
"," + pos.coords.longitude +
"&zoom=14&size=" + mapwidth + "x" + mapheight + "&maptype=roadmap&markers=color:green%7C" +
pos.coords.latitude +
"," + pos.coords.longitude + "&sensor=false";
};
var fail = function(error) {
document.getElementById(
cur_position).innerHTML = "Error getting geolocation: " + error.code;
console.log(
"Error getting geolocation: code=" + error.code + " message=" + error.message);
};
map.style.display =
none;
document.getElementById(
cur_position).innerHTML = "Getting geolocation . . .";
console.log(
"Getting geolocation . . .");
navigator.geolocation.getCurrentPosition(success, fail);
};

Step 4:
  
 If we want to watch the geolocation then we will use the functions below to display live geo location values.

// api-geolocation Watch Position
var
watchID = null;
function
clearWatch() {
if (watchID !== null) {
navigator.geolocation.clearWatch(watchID);
watchID =
null;
document.getElementById(
cur_position).innerHTML = "";
document.getElementById(
map).style.display = none;
}
}
var
wsuccess = function(pos) {
var map = document.getElementById(map);
document.getElementById(
cur_position).innerHTML = "Watching geolocation . . .";
map.style.display =
none;
var text = "<div>Latitude: " + pos.coords.latitude +
" (watching)<br/>" + "Longitude: " + pos.coords.longitude + "<br/>" +
"Accuracy: " + pos.coords.accuracy + "m<br/>" + "</div>";
document.getElementById(
cur_position).innerHTML = text;
console.log(text);
map.style.display =
block;
var mapwidth = 270; // a mungy compromise between the 2 sizes
var mapheight = 210; // since we cant get w / h dynamically
map.src =
"http://maps.googleapis.com/maps/api/staticmap?center=" +
pos.coords.latitude +
"," + pos.coords.longitude +
"&zoom=13&size=" + mapwidth + "x" + mapheight + "&maptype=roadmap&markers=color:green%7C" +
pos.coords.latitude +
"," + pos.coords.longitude + "&sensor=false";
};
var
wfail = function(error) {
document.getElementById(
cur_position).innerHTML = "Error getting geolocation: " + error.code;
console.log(
"Error getting geolocation: code=" + error.code + " message=" + error.message);
};
var
toggleWatchPosition = function() {
if (watchID) {
console.log(
"Stopped watching position");
clearWatch();
// sets watchID = null;
}
else {
document.getElementById(
map).style.display = none;
document.getElementById(
cur_position).innerHTML = "Watching geolocation . . .";
console.log(
"Watching geolocation . . .");
var options = { frequency: 3000, maximumAge: 5000, timeout: 5000, enableHighAccuracy: true };
watchID = navigator.geolocation.watchPosition(wsuccess, wfail, options);
}
};

Step 4:

now we are going to call all the above methods using index.html

edit index.html as below.

<!
DOCTYPE HTML>
<
html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Minimal AppLaud App</title>
<link rel="styleSheet" href="index.css"/>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
</head>
<body>
<h2>Geolocation</h2>
<blockquote>
<p>The <code>geolocation</code> object provides access to the devices GPS sensor.</p>
</blockquote>
<h4 class="help"><b>Toggle</b> to stop/start
geolocation watch.
<br/><b>Get Current</b> for one-time geolocation reading.</h4>
<a class="btn deux" onclick="toggleWatchPosition();">Toggle</a>
<a class="btn deux" onclick="getCurrentPosition();">Get Current</a>
<div class="result-block">
<span id="cur_position"></span>
</div>
<img id="map" alt="Location Map"/>
</div>
</div>
<
script src="geolocation.js"></script>
</body>
</
html>


Step 5:

Now add index.css file for our user interface look good.

body
{
background-color: #F6F4F2;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: .9em;
line-height: 1.1em;
margin: 0px;
}
h1,ul,li
{
margin: 0px;
padding: 0px;
}
#header
{
background-color: #515151;
background: #515151
-webkit-gradient(linear, left top, left bottom, color-stop(0.2, #515151),
color-stop(0.8, #302F2D) );
border-top: 1px solid #919192;
height: 32px;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
z-index: 1;
}
#subheader
{ display: none; }
#footer
{
display: none;
background-color: #515151;
background: #515151
-webkit-gradient(linear, left bottom, left top, color-stop(0.2, #515151),
color-stop(0.8, #302F2D) );
border-top: 1px solid #919192;
height: 32px;
position: fixed;
bottom: 0px;
width: 100%;
z-index: 1;
}
#sidebar
{
background-color: #ECEAE7;
overflow: auto;
padding: 30px 2% 20px 0px;
text-align: right;
/* position: fixed; */
float: left;
width: 22%;
top: 33px;
bottom: 0px;
z-index: 1;
border-right: 1px solid #999;
}
#sidebar
ul,#sidebar li {
margin: 0px;
padding: 0px;
}
#sidebar
li, #sidebar li a {
color: #767573;
font-size: 1.06em;
list-style: none;
margin: 1.05em 0px;
}
#scrollable
{
/* position: fixed; */
padding: 20px 2% 0px 1%;
float: right;
width: 72%;
overflow: auto;
top: 33px;
}
#content
{
margin: 20px 2% 0px;
color: #313131;
/* position:absolute;*/
/* overflow:auto;*/
z-index: 0;
}
#header
h1, #footer h1 {
color: #F6F4F2;
font-size: 1.2em;
font-weight: normal;
line-height: 32px;
margin: 0px;
text-align: center;
text-shadow: 0px -1px 1px #222222;
}
#footer
h1 {
font-size: .9em;
text-align: left;
padding-left: 16px;
}
#content
h2 {
border-bottom: 1px solid #ccc;
padding-bottom: 0.25em;
color: #e87a12;
font-size: 1.4em;
font-weight: bold;
margin: 1.3em 0px 0.8em 0px;
text-shadow: #FFFFFF 0px 1px 1px;
}
code
{
font-weight: bold;
font-size: 1.0em;
color: #bc6108;
}
blockquote
{
color: #767573;
font-style: normal;
margin-left: 30px;
margin-right: 10px;
padding-left: 6px;
position: relative;
text-shadow: #FFFFFF 0px 1px 0px;
}
blockquote
p {
padding: 5px 0px;
font-size: 0.8em;
}
blockquote
::before {
font-style: normal;
content: 201C;
font-size: 400%;
font-family: Georgia, Palatino, Times New Roman, Times;;
position: absolute;
left: -25px;
top: 0.2em;
color: #E0E0E0;
}
ul
{
margin-left: 40px;
}
ul
>li {
list-style: disc;
list-style-position: outside;
}
ul
ul {
margin-bottom: 0.5em;
margin-top: 0.5em;
}
a
.btn {
border: 1px solid #555;
-webkit-border-radius: 5px;
border-radius: 5px;
text-align:center;
display:block;
/* float:left; */
clear: both;
background:#eceae7;
width:90%;
color:#e87a12;
font-size:1.1em;
font-weight: bold;
text-decoration:none;
padding:0.7em 0.1em;
margin: 5px auto;
}
a
.btn.deux {
clear: none;
float:left;
width: 45%;
margin:6px 3px 3px;
}
a
.btn.trois {
clear: none;
float:left;
width: 30%;
margin:6px 2px 3px;
}
#deviceinfo
{
border-collapse:collapse;
width:75%;
margin: 20px auto;
}
#deviceinfo
tr th.alt, #deviceinfo tr td.alt {
text-align:left;
}
#deviceinfo
, th, td {
border: 1px solid #ccc;
}
#deviceinfo
th {
font-size:1.15em;
padding-top:4px;
padding-bottom:4px;
background-color:#e89442;
color:#f0f0f0;
height: 1.3em;
}
#deviceinfo
td, #deviceinfo th {
padding:3px 7px 2px 7px;
vertical-align:bottom;
text-align:right;
}
.result-block
{
clear: both;
margin-top: 0.3em;
}
#accel-data
{
margin-bottom: 15px;
width: 95%;
}
dl
{
clear:both;
list-style-type:none;
padding-left:2px;
overflow:auto;
}
dl
> dt{
float:left;
margin-top: 15px;
margin-left:5px;
}
dl
> dd{
float:left;
font-weight:bold;
margin-top: 15px;
margin-left: 10px;
margin-right: 25px;
}
.api-div
{
display: none;
margin-bottom: 0.6em;
}
.api-div
h4 {
display: block;
font-size: 0.8em;
font-weight: normal;
background: #eceae7;
border-left: 6px solid #de2c2c;
padding: 5px 8px;
}
.api-div
.help {
border-left: 6px solid #188f8f;
}
#cameraImage
{
border: 2px solid #666;
display: none;
margin: 1.7em auto;
width:200px;
height:150px;
}
#eventOutput
{
height:1.5em;
display: block;
}
#map
{
width: 180px;
height: 140px;
border: 2px solid #666;
display: none;
margin: 1.0em auto;
}
@media
screen and (max-width: 320px) and (orientation:portrait) {
/* #header h1 { color: #f00; } For TESTING */
#sidebar { display: none; }
#scrollable {
padding: 0px;
margin: 64px 1% 0px 1%;
float: left;
width: 97%;
overflow: auto;
}
#subheader {
display: block;
background-color: #CBCBCB;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F9F9F9),color-stop(1.0, #CBCBCB) );
border-top: 1px solid #383A3C;
border-bottom: 1px solid #919395;
height: 42px;
left: 0px;
position: fixed;
top: 33px;
width: 100%;
z-index: 1;
text-align:center;
}
select {
font-size: 1.65em;
font-weight: bold;
padding: 5px 16px 5px 20px;
color: #444;
background-color: #e8a35f;
margin: 3px auto;
}
#deviceinfo {
width:90%;
}
}
@media
all and (min-width: 800px){
/* #header h1 { color: #0f0; } FOR TESTING */
#content {
font-size: 1.0em;
line-height: 1.2em;
}
#content h2 {
padding-bottom: 0.4em;
font-size: 2em;
margin-top: 2em;
}
blockquote {
margin-top: 20px;
margin-bottom: 30px;
}
blockquote p {
/* padding: 5px 0px; 10px 0px; */
font-size: 0.95em;
}
blockquote code {
font-size: 1.2em;
}
#cameraImage {
width: 400px;
height: 300px;
}
#map {
width: 360px;
height: 280px;
margin: 1.5em auto;
}
#content {
margin: 30px 3% 0px;
}
#sidebar {
padding-top: 15px;
position: fixed;
}
#sidebar li,#sidebar li a {
font-size: 1.2em;
margin: 1.8em 0px;
}
.api-div h4 {
font-size: 0.9em;
}
#footer {
display: block;
}
}
@media
all and (min-width: 1200px){
/*#header h1 { color: #ff0; } FOR TESTING */
blockquote p {
/* padding: 5px 0px; 10px 0px; */
font-size: 1.0em;
}
blockquote code {
font-size: 1.3em;
}
#deviceinfo {
width:50%;
}
#deviceinfo th {
font-size:1.35em;
height: 1.4em;
}
#deviceinfo td, #deviceinfo th {
font-size: 1.1em;
}
#footer {
display: none;
}
}

run the application you will get the following output.





Posted by at
Labels: , ,

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)