How can I create a navigational compass using Typescript and HTML?

Question

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.

Answer 1

You can try to obtain or create an SVG of a compass and animate the compass needle.

Instead of building the compass out of CSS from scratch you can also look for pre-built ones on the internet.Search for pure CSS compass and you'll find some impressive compasses

Personally i would go for the SVG option as you dont have to go through the trouble of aligning the divs. All you need to do is figure out where the code for the needle is and rotate it using CSS classes.