Archief - Pijl (onder een hoek) naar een locatie rekening houden met oriëntatie smartphone

<div class="container">
            <h1>Find your location</h1>
            <div class="row">
                <div class="span12">
                    <!-- Save your current location -->
                    <button class="grey" id="btnSaveCurrLocation">Save my current location!</button> 
                    <!-- Show direction to previous location -->
                    <button class="grey" id="btnShowDirection">Show direction to previous location!</button> <br><br>
                    <p class="degrees"></p>
                    <!-- Arrow in direction to location -->
                    <img id="myarrow" class="deviceorientation" src="arrow.png" />
                </div>
            </div>
 </div>
<script>
        var anobject = {};
        $(window).ready(function(){ 
            /* Find location button */ 
            $("#btnFindLocation").click(findLocation);
            /* Show direction button */ 
            $("#btnShowDirection").click(showDirection);
<p class="degrees"></p>
            // Device orientation
            window.addEventListener("deviceorientation", handleOrientation, true);
        });

        function findLocation(){
            // Check if geolocation is supported in browser
            if (navigator.geolocation)
            {
                // Succes function: geoSucces       Error function: geoError
                navigator.geolocation.getCurrentPosition(geoSucces,geoError, { maximumAge: 100, timeout: 6000, enableHighAccuracy: true});  
            }
            else
            {
                alert("Geolocation is not supported!");
            }
        }

        function geoSucces(position)
        {
            // Check if localstorage is supported in browser
            if (Modernizr.localstorage) 
            {   
                // Object declaration in localStorage
                localStorage.setItem('position', '{}');
                // Save position object in localstorage
                localStorage.setItem('position', JSON.stringify(position));
            } 
            else 
            {   
                alert("localStorage is not available!");
            }
        }

        var watchProcess = null;  
        function showDirection(){
            if (navigator.geolocation)
            {
                if (watchProcess == null) {
                    // Succes function: geoWatchSucces      Error function: geoError
                    navigator.geolocation.watchPosition(geoShowRoute,geoError, { maximumAge: 100, timeout: 6000, enableHighAccuracy: true});  
                }
            }
            else
            {
                alert("Geolocation is not supported!");
            }
        }

        function geoShowRoute(position)
        {
            // Check if localStorage is supported in browser
            if (Modernizr.localstorage) 
            {   
                // Get previous location out of localstorage
                var location = JSON.parse(localStorage.getItem('position'));
            } 
            else 
            {   
                alert("localStorage is not available!");
            }

            // lat/lon of location in localstorage and current location
            var lat1 = location.coords.latitude;
            var lon1 = location.coords.longitude;
            var lat2 = position.coords.latitude;
            var lon2 = position.coords.longitude;

            // angle to location
            var angle = Math.atan2(lon2 - lon1, lat2 - lat1);

            // degrees device 
            var degrees = anobject.value;

            var result = (degrees - angle);

            // Set arrow to direction location
            setArrowRotation(result);
        }

        function handleOrientation(orientData) {
            var absolute = orientData.absolute;
            var alpha = orientData.alpha;
            var beta = orientData.beta;
            var gamma = orientData.gamma;

            anobject.value = alpha;
        }

        // Error function geolocation
        function geoError(error)  
        {  
            switch(error.code)  
            {  
                case error.PERMISSION_DENIED: alert("user did not share geolocation data");  
                break;  
                case error.POSITION_UNAVAILABLE: alert("could not detect current position");  
                break;  
                case error.TIMEOUT: alert("retrieving position timed out");  
                break;  
                default: alert("unknown error");  
                break; 
            }  
        }

        // Functions to set Rotation
        function getsupportedprop(proparray){
            var root=document.documentElement;
            for (var i=0; i<proparray.length; i++){
                if (proparray[i] in root.style){
                    return proparray[i];
                }
            }
            return false;
        }

        var cssTransform;
        function setArrowRotation(x){
            if(cssTransform===undefined){
                cssTransform=getsupportedprop(['transform','webkitTransform','MozTransform','OTransform','msTransform']);
            }
            if(cssTransform){
                document.getElementById('myarrow').style[cssTransform]='rotate('+x+'deg)';
            }
        }

        </script>
    </body>