An Interactive Nautical Compass Rose
Using Angular to Create an Intelligent Compass Map Control
For a recent project demo project (which is not public) I wanted to create a “Nautical Compass Rose” control for an interactive web map using Angular.
This turned out to be a really interesting problem. I thought it would make a good article.
What is a Nautical Compass Control
Nautical Charts include compass roses on the chart showing locally both the true north and the magnetic north in that location.
Magnetic North, as I am sure most people know, is the north indicated by a compass and is not the same as the true north (i.e. the direction pointing to the North Pole). The angle difference between Magnetic North and True North varies as you move around the world — varying between currently about 0° in London at the moment and about 13° in New York at the moment, for instance. Magnetic North also moves with time. You can play with values here.
The Problem
The compass roses printed on the paper charts are of course unique to each location and for a fixed date.
