I'm looking to display a compass heading using HTML, CSS, and Typescript for my Ionic project. I've got the heading available as a number between 0-360, and a true heading which is obviously 360.
How can I best go about doing this? I'd like it to be animated in real time.
A couple ideas:
- Have a background image of a compass, overlay a needle image on the compass image and rotate that needle depending on the degree of heading.
- Build out a circle and needle using CSS entirely, with no images, and use the same logic of rotation.