I am working on a project that takes the pass script from Phonegap and i would like to connect it to my currect GPS position and than point to a fixed GPS position (like a restaurant etc.) Basicly the arrow must be pointing in the direction of the restaurant so i know which way to go/walk.
These are the two i would like to bine: .0.0/cordova_geolocation_geolocation.md.html#Geolocation .0.0/cordova_pass_pass.md.html#Compass
I have this projec as the base:
Who can help me in the right direction :-) ?
Thnx Ewald
I am working on a project that takes the pass script from Phonegap and i would like to connect it to my currect GPS position and than point to a fixed GPS position (like a restaurant etc.) Basicly the arrow must be pointing in the direction of the restaurant so i know which way to go/walk.
These are the two i would like to bine: http://docs.phonegap./en/2.0.0/cordova_geolocation_geolocation.md.html#Geolocation http://docs.phonegap./en/2.0.0/cordova_pass_pass.md.html#Compass
I have this projec as the base: https://github./Rockncoder/PGCompass
Who can help me in the right direction :-) ?
Thnx Ewald
Share Improve this question edited Sep 18, 2012 at 12:13 Ewald Bos asked Sep 18, 2012 at 11:54 Ewald BosEwald Bos 1,7701 gold badge21 silver badges36 bronze badges1 Answer
Reset to default 6The following code basically does what you want. It calculates the distance and bearing from your current location (by GPS) to a destination position and uses the pass to determine your current heading. The difference between your current heading and the bearing to the destination is the angle for your arrow.
The code with assets and piled Android APK can be downloaded from here: http://ge.tt/4Kb2oQv/v/0
Here's the code, hope it helps!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Compass test</title>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src ="jquery-1.7.1.min.js">//</script> <!--http://code.jquery./jquery-1.7.1.min.js -->
<script type="text/javascript" src ="latlon.js">//</script> <!-- based on http://www.movable-type.co.uk/scripts/latlong.html -->
<style type="text/css">
#error, #results{
display: none;
}
#arrow{
position: absolute;
width: 30px;
height: 30px;
background: 50% 50% no-repeat;
background-size: 30px 30px;
background-image: url('arrow.png');
top: 0;
left: 50%;
margin: 30px 0 0 -15px;
}
#results .text{
margin-top: 100px;
}
</style>
<script type="text/javascript" >
var destinationPosition;
var destinationBearing;
var positionTimerId;
var currentPosition;
var prevPosition;
var prevPositionError;
var passTimerId;
var currentHeading;
var prevHeading;
var prevCompassErrorCode;
$(document).on("deviceready", function() {
minPositionAccuracy = 50; // Minimum accuracy in metres to accept as a reliable position
minUpdateDistance = 1; // Minimum number of metres to move before updating distance to destination
$targetLat = $('#target-lat');
$targetLon = $('#target-lon');
$error = $('#error');
$results = $('#results');
$distance = $('#distance');
$bearing = $('#bearing');
$heading = $('#heading');
$difference = $('#difference');
$arrow = $('#arrow');
watchPosition();
watchCompass();
// Set destination
$targetLat.change(updateDestination);
$targetLon.change(updateDestination);
updateDestination();
});
function watchPosition(){
if(positionTimerId) navigator.geolocation.clearWatch(positionTimerId);
positionTimerId = navigator.geolocation.watchPosition(onPositionUpdate, onPositionError, {
enableHighAccuracy: true,
timeout: 1000,
maxiumumAge: 0
});
}
function watchCompass(){
if(passTimerId) navigator.pass.clearWatch(passTimerId);
passTimerId = navigator.pass.watchHeading(onCompassUpdate, onCompassError, {
frequency: 100 // Update interval in ms
});
}
function onPositionUpdate(position){
if(position.coords.accuracy > minPositionAccuracy) return;
prevPosition = currentPosition;
currentPosition = new LatLon(position.coords.latitude, position.coords.longitude);
if(prevPosition && prevPosition.distanceTo(currentPosition)*1000 < minUpdateDistance) return;
updatePositions();
}
function onPositionError(error){
watchPosition();
if(prevPositionError && prevPositionError.code == error.code && prevPositionError.message == error.message) return;
$error.html("Error while retrieving current position. <br/>Error code: " + error.code + "<br/>Message: " + error.message);
if(!$error.is(":visible")){
$error.show();
$results.hide();
}
prevPositionError = {
code: error.code,
message: error.message
};
}
function onCompassUpdate(heading){
prevHeading = currentHeading;
currentHeading = heading.trueHeading >= 0 ? Math.round(heading.trueHeading) : Math.round(heading.magneticHeading);
if(currentHeading == prevHeading) return;
updateHeading();
}
function onCompassError(error){
watchCompass();
if(prevCompassErrorCode && prevCompassErrorCode == error.code) return;
var errorType;
switch(error.code){
case 1:
errorType = "Compass not supported";
break;
case 2:
errorType = "Compass internal error";
break;
default:
errorType = "Unknown pass error";
}
$error.html("Error while retrieving pass heading: "+errorType);
if(!$error.is(":visible")){
$error.show();
$results.hide();
}
prevCompassErrorCode = error.code;
}
function updateDestination(){
destinationPosition = new LatLon($targetLat.val(), $targetLon.val());
updatePositions();
}
function updatePositions(){
if(!currentPosition) return;
if(!$results.is(":visible")){
$results.show();
$error.hide();
}
destinationBearing = Math.round(currentPosition.bearingTo(destinationPosition));
$distance.html(Math.round(currentPosition.distanceTo(destinationPosition)*1000));
$bearing.html(destinationBearing);
updateDifference();
}
function updateHeading(){
$heading.html(currentHeading);
updateDifference();
}
function updateDifference(){
var diff = destinationBearing - currentHeading;
$difference.html(diff);
$arrow.css("-webkit-transform", "rotate("+diff+"deg)");
}
</script>
</head>
<body>
<div id="results">
<div id="arrow"></div>
<div class="text">
<p>Distance to destination: <span id="distance"></span> metres</p>
<p>Bearing to destination: <span id="bearing"></span> degrees</p>
<p>Current heading: <span id="heading"></span> degrees</p>
<p>Difference in heading and bearing: <span id="difference"></span> degrees</p>
</div>
</div>
<p id="error"></p>
<h2>Destination</h2>
<div>
<label for="target-lat">Latitude: </label>
<input id="target-lat" value="50.623966949462" />
</div>
<div>
<label for="target-lon">Longitude: </label>
<input id="target-lon" value="-4.7256830197787" />
</div>
</body>
</html>