scale AIS and AtoN icons

src/app/modules/map/mapconfig.ts

@@ -275,15 +275,18 @@ export const destinationStyles = {
   })
 };
 
+const aisScale = 1.3;
 const aisActive = new Icon({
   src: './assets/img/ais_active.png',
   rotateWithView: true,
-  rotation: 0
+  rotation: 0,
+  scale: aisScale
 });
 const aisInactive = new Icon({
   src: './assets/img/ais_inactive.png',
   rotateWithView: true,
-  rotation: 0
+  rotation: 0,
+  scale: aisScale
 });
 const aisFocus = new Icon({
   src: './assets/img/ais_self.png',
@@ -298,37 +301,44 @@ const aisFocus = new Icon({
 const ais40 = new Icon({
   src: './assets/img/ais_highspeed.png',
   rotateWithView: true,
-  rotation: 0
+  rotation: 0,
+  scale: aisScale
 });
 const ais50 = new Icon({
   src: './assets/img/ais_special.png',
   rotateWithView: true,
-  rotation: 0
+  rotation: 0,
+  scale: aisScale
 });
 const ais60 = new Icon({
   src: './assets/img/ais_passenger.png',
   rotateWithView: true,
-  rotation: 0
+  rotation: 0,
+  scale: aisScale
 });
 const ais70 = new Icon({
   src: './assets/img/ais_cargo.png',
   rotateWithView: true,
-  rotation: 0
+  rotation: 0,
+  scale: aisScale
 });
 const ais80 = new Icon({
   src: './assets/img/ais_tanker.png',
   rotateWithView: true,
-  rotation: 0
+  rotation: 0,
+  scale: aisScale
 });
 const ais90 = new Icon({
   src: './assets/img/ais_other.png',
   rotateWithView: true,
-  rotation: 0
+  rotation: 0,
+  scale: aisScale
 });
 const aisBuddy = new Icon({
   src: './assets/img/ais_buddy.png',
   rotateWithView: true,
-  rotation: 0
+  rotation: 0,
+  scale: aisScale
 });
 
 export const aisVesselStyles = {
@@ -552,7 +562,8 @@ export const atonStyles = {
       rotation: 0,
       anchor: [12.5, 12.5],
       anchorXUnits: 'pixels',
-      anchorYUnits: 'pixels'
+      anchorYUnits: 'pixels',
+      scale: 0.75
     }),
     text: new Text({
       text: '',
@@ -570,7 +581,8 @@ export const basestationStyles = {
       rotation: 0,
       anchor: [12.5, 14.5],
       anchorXUnits: 'pixels',
-      anchorYUnits: 'pixels'
+      anchorYUnits: 'pixels',
+      scale: 0.75
     }),
     text: new Text({
       text: '',
@@ -628,7 +640,8 @@ export const meteoStyles = {
       size: [35, 25],
       anchor: [1, 25],
       anchorXUnits: 'pixels',
-      anchorYUnits: 'pixels'
+      anchorYUnits: 'pixels',
+      scale: 0.75
     }),
     text: new Text({
       text: '',

src/app/modules/map/popovers/aton-popover.component.ts

@@ -76,6 +76,7 @@ import { Convert } from 'src/app/lib/convert';
             [heading]="convert.radiansToDegrees(aton.twd)"
             [speed]="app.formatSpeed(aton.tws)"
             [label]="app.formattedSpeedUnits"
+            [windtrue]="true"
           >
           </ap-compass-northup>
         </div>

src/app/modules/map/popovers/compass.component.ts

@@ -256,8 +256,8 @@ export class NorthUpCompassComponent extends SvgDialBase {
   @Input() label = '';
   @Input() speed: number | undefined;
   @Input() heading: number | undefined;
-  @Input() windtrue: number | undefined;
-  @Input() windapparent: number | undefined;
+  @Input() windtrue: boolean;
+  @Input() windapparent: boolean;
   @ViewChild('labeltext', { static: true }) labeltext: ElementRef;
   @ViewChild('headingtext', { static: true }) headingtext: ElementRef;
   @ViewChild('speedtext', { static: true }) speedtext: ElementRef;
@@ -296,10 +296,10 @@ export class NorthUpCompassComponent extends SvgDialBase {
 
   updateDial(changes?: SimpleChanges) {
     const d = {
-      heading: null,
-      windtrue: null,
-      windapparent: null,
+      windtrue: false,
+      windapparent: false,
       label: null,
+      heading: null,
       speed: null
     };
     d.heading =
@@ -308,14 +308,6 @@ export class NorthUpCompassComponent extends SvgDialBase {
         : this.heading;
     d.speed =
       changes && changes['speed'] ? changes['speed'].currentValue : this.speed;
-    d.windtrue =
-      changes && changes['windtrue']
-        ? changes['windtrue'].currentValue
-        : this.windtrue;
-    d.windapparent =
-      changes && changes['windapparent']
-        ? changes['windapparent'].currentValue
-        : this.windapparent;
     d.label =
       changes && changes['label'] ? changes['label'].currentValue : this.label;
 
@@ -337,8 +329,11 @@ export class NorthUpCompassComponent extends SvgDialBase {
 
     const rHeading = this.renderValue(d.heading, 0);
     const rAngle = rHeading === '--' ? this.minValue : d.heading;
-    this.showPointer = rHeading === '--' ? false : true;
 
+    this.showPointer =
+      (rHeading === '--' ? false : true) &&
+      !this.windtrue &&
+      !this.windapparent;
     if (this.pointer && this.pointer.nativeElement) {
       this.renderer.setAttribute(
         this.pointer.nativeElement,
@@ -354,27 +349,22 @@ export class NorthUpCompassComponent extends SvgDialBase {
       );
     }
 
-    const rWindTrue = this.renderValue(d.windtrue, 0);
-    const rTAngle = rWindTrue === '--' ? this.minValue : d.windtrue;
-    this.showWindTrue = rWindTrue === '--' ? false : true;
-
+    this.showWindTrue = (rHeading === '--' ? false : true) && this.windtrue;
     if (this.needlehi && this.needlehi.nativeElement) {
       this.renderer.setAttribute(
         this.needlehi.nativeElement,
         'transform',
-        'rotate(' + this.getAngle(rTAngle) + ' 100 100)'
+        'rotate(' + this.getAngle(rAngle) + ' 100 100)'
       );
     }
 
-    const rWindApp = this.renderValue(d.windapparent, 0);
-    const rAAngle = rWindApp === '--' ? this.minValue : d.windapparent;
-    this.showWindApparent = rWindApp === '--' ? false : true;
-
+    this.showWindApparent =
+      (rHeading === '--' ? false : true) && this.windapparent && !this.windtrue;
     if (this.needlehi && this.needlehi.nativeElement) {
       this.renderer.setAttribute(
         this.needlelo.nativeElement,
         'transform',
-        'rotate(' + this.getAngle(rAAngle) + ' 100 100)'
+        'rotate(' + this.getAngle(rAngle) + ' 100 100)'
       );
     }
   }