Point arrow to location (geolocation)

Question

i want to make a sort of compass on a mobile website. This is what I have:

This is what i want:

I save my current location in the localstorage. Then for example 1km further I check my location and check the distance between the two points.

Now I want an arrow from the current location to the location in the localstorage. The degrees from the phone I check with the javascript library "compass.js".

But now, how can I make the arrow to the location?

Answer 1

It looks as though you're trying to draw an image (an arrow) at a given rotation. Well, if we assume a modern browser (not a bad assumption for phones these days), that's quite easy. Just have an img on your page and apply a CSS transform on it.

See this site for more info on rotations in CSS: http://www.cssrotate.com/ (wow, somebody made an entire site for that…)

Now you also want to apply the rotation via JavaScript, so you'll need to change the CSS attribute dynamically. Since it's still quite new and has vendor prefixes, that's a little tricky, but not too hard. This site has a nice way to cope with it: http://www.javascriptkit.com/javatutors/setcss3properties.shtml

Putting it together, you could have this:

<img id="myarrow" src="myarrow.png" />
(blah)
<script>
// from http://www.javascriptkit.com/javatutors/setcss3properties.shtml
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>

Now just call setArrowRotation whenever you need to redirect the arrow.

Here's a fiddle which continuously rotates the arrow: http://jsfiddle.net/y2sxE/