javascript - Point arrow to location (geolocation) -

i want make sort of compass on mobile website. have:

this want:

i save current location in localstorage. example 1km further check location , check distance between 2 points.

now want arrow current location location in localstorage. degrees phone check javascript library "compass.js".

but now, how can make arrow location?

it looks though you're trying draw image (an arrow) @ given rotation. well, if assume modern browser (not bad assumption phones these days), that's quite easy. have img on page , apply css transform on it.

see site more info on rotations in css: http://www.cssrotate.com/ (wow, made entire site that…)

now want apply rotation via javascript, you'll need change css attribute dynamically. since it's still quite new , has vendor prefixes, that's little tricky, not hard. site has nice way cope it: http://www.javascriptkit.com/javatutors/setcss3properties.shtml

putting together, have this:

<img id="myarrow" src="myarrow.png" /> (blah) <script> // http://www.javascriptkit.com/javatutors/setcss3properties.shtml function getsupportedprop(proparray){     var root=document.documentelement;     (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 call setarrowrotation whenever need redirect arrow.

here's fiddle continuously rotates arrow: http://jsfiddle.net/y2sxe/