Phonegap with Compass and GPS coordinates

StackOverflow https://stackoverflow.com/questions/12476515

Question

I am working on a project that takes the compass 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 combine: http://docs.phonegap.com/en/2.0.0/cordova_geolocation_geolocation.md.html#Geolocation http://docs.phonegap.com/en/2.0.0/cordova_compass_compass.md.html#Compass

I have this projec as the base: https://github.com/Rockncoder/PGCompass

Who can help me in the right direction :-) ?

Thnx Ewald

Was it helpful?

Solution

The 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 compass 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 compiled 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.com/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 compassTimerId;
        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(compassTimerId) navigator.compass.clearWatch(compassTimerId);
            compassTimerId = navigator.compass.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 compass error";
            }

            $error.html("Error while retrieving compass 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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top