Imagery compass rose enhancements (#6140)

* Fixes 6139
- Markup changes and improvements in CompassRose.vue.
- Improved sun and edge gradients.
- Related CSS styles updated.
- Changed compass key color from cyan to white to avoid conflict with staleness color.

* change var def to avoid collision

* compass rose should size itself based on image

* allow heading or camera pan for fixed cameras

* suppress HUD if no camera pan

* allow image to display compass rose for other cams

* update example imagery to accept transformations

* remove comments

Co-authored-by: David Tsay <david.e.tsay@nasa.gov>
Co-authored-by: David Tsay <3614296+davetsay@users.noreply.github.com>

example/imagery/plugin.js

@@ -242,6 +242,13 @@ function pointForTimestamp(timestamp, name, imageSamples, delay) {
     const url = imageSamples[Math.floor(timestamp / delay) % imageSamples.length];
     const urlItems = url.split('/');
     const imageDownloadName = `example.imagery.${urlItems[urlItems.length - 1]}`;
+    const navCamTransformations = {
+        "translateX": 0,
+        "translateY": 18,
+        "rotation": 0,
+        "scale": 0.3,
+        "cameraAngleOfView": 70
+    };
 
     return {
         name,
@@ -251,6 +258,7 @@ function pointForTimestamp(timestamp, name, imageSamples, delay) {
         sunOrientation: getCompassValues(0, 360),
         cameraPan: getCompassValues(0, 360),
         heading: getCompassValues(0, 360),
+        transformations: navCamTransformations,
         imageDownloadName
     };
 }