Use AIS shiptype to format AIS vessel display. (#162, #164)

src/app/modules/map/mapconfig.ts

@@ -318,7 +318,150 @@ export const aisVesselStyles = {
       text: '',
       offsetY: -12
     })
-  })
+  }),
+  // vessel state
+  moored: new Style({
+    // moored state
+    image: new Circle({
+      radius: 5,
+      stroke: new Stroke({
+        width: 2,
+        color: 'white'
+      }),
+      fill: new Fill({
+        color: '#FF00FF'
+      })
+    }),
+    text: new Text({
+      text: '',
+      offsetY: -12
+    })
+  }),
+  // vessel type & state
+  50: {
+    // special
+    default: new Style({
+      image: new Icon({
+        src: './assets/img/ais_special.png',
+        rotateWithView: true,
+        rotation: 0
+      }),
+      text: new Text({
+        text: '',
+        offsetY: -12
+      })
+    }),
+    moored: new Style({
+      // moored state
+      image: new Circle({
+        radius: 5,
+        stroke: new Stroke({
+          width: 2,
+          color: '#000000'
+        }),
+        fill: new Fill({
+          color: '#808080'
+        })
+      }),
+      text: new Text({
+        text: '',
+        offsetY: -12
+      })
+    })
+  },
+  60: {
+    // passenger
+    default: new Style({
+      image: new Icon({
+        src: './assets/img/ais_passenger.png',
+        rotateWithView: true,
+        rotation: 0
+      }),
+      text: new Text({
+        text: '',
+        offsetY: -12
+      })
+    }),
+    moored: new Style({
+      // moored state
+      image: new Circle({
+        radius: 5,
+        stroke: new Stroke({
+          width: 2,
+          color: '#7F6A00'
+        }),
+        fill: new Fill({
+          color: '#FFE97F'
+        })
+      }),
+      text: new Text({
+        text: '',
+        offsetY: -12
+      })
+    })
+  },
+  70: {
+    // cargo
+    default: new Style({
+      image: new Icon({
+        src: './assets/img/ais_cargo.png',
+        rotateWithView: true,
+        rotation: 0
+      }),
+      text: new Text({
+        text: '',
+        offsetY: -12
+      })
+    }),
+    moored: new Style({
+      // moored state
+      image: new Circle({
+        radius: 5,
+        stroke: new Stroke({
+          width: 2,
+          color: '#267F00'
+        }),
+        fill: new Fill({
+          color: '#4CFF00'
+        })
+      }),
+      text: new Text({
+        text: '',
+        offsetY: -12
+      })
+    })
+  },
+  80: {
+    // tanker
+    default: new Style({
+      image: new Icon({
+        src: './assets/img/ais_tanker.png',
+        rotateWithView: true,
+        rotation: 0
+      }),
+      text: new Text({
+        text: '',
+        offsetY: -12
+      })
+    }),
+    moored: new Style({
+      // moored state
+      image: new Circle({
+        radius: 5,
+        stroke: new Stroke({
+          width: 2,
+          color: '#0026FF'
+        }),
+        fill: new Fill({
+          color: '#0094FF'
+        })
+      }),
+      text: new Text({
+        text: '',
+        offsetY: -12
+      })
+    })
+  }
 };
 
 export const atonStyles = {

src/app/modules/map/ol/lib/resources/layer-skvessels.component.ts

@@ -338,12 +338,13 @@ export class SKVesselsLayerComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   // build target style
-  buildTargetStyle(id: string, item, setStale = false): Style {
+  buildTargetStyle(id: string, item: SKVessel, setStale = false): Style {
     let s: Style;
     const lbl = item.name ?? item.callsign ?? item.mmsi ?? '';
 
     // ** stale check time ref
     const now = new Date().valueOf();
+    const st = item.type.id ? Math.floor(item.type.id / 10) * 10 : -1;
     if (typeof this.targetStyles !== 'undefined') {
       if (id === this.focusId && this.targetStyles.focus) {
         s = this.targetStyles.focus;
@@ -354,10 +355,24 @@ export class SKVesselsLayerComponent implements OnInit, OnDestroy, OnChanges {
       ) {
         // stale
         s = this.targetStyles.inactive;
+      } else if (item.type && this.targetStyles[st]) {
+        // ship type & state
+        if (item.state && this.targetStyles[st][item.state]) {
+          s = this.targetStyles[st][item.state];
+        } else {
+          s = this.targetStyles[st]['default'];
+        }
       } else if (item.buddy && this.targetStyles.buddy) {
+        // buddy
         s = this.targetStyles.buddy;
       } else {
-        s = this.targetStyles.default;
+        // all others
+        if (item.state && this.targetStyles[item.state]) {
+          // state only
+          s = this.targetStyles[item.state];
+        } else {
+          s = this.targetStyles.default;
+        }
       }
     } else if (this.layerProperties && this.layerProperties.style) {
       s = this.layerProperties.style;

src/app/modules/skresources/resource-dialogs.ts

@@ -248,7 +248,12 @@ export class ResourceDialog implements OnInit {
               <div class="key-label">MMSI:</div>
               <div style="flex: 1 1 auto;">{{ vInfo.mmsi }}</div>
             </div>
-            @if(vInfo.flag) {
+            @if(vInfo.shipType) {
+            <div style="display:flex;">
+              <div class="key-label">Type:</div>
+              <div style="flex: 1 1 auto;">{{ vInfo.shipType }}</div>
+            </div>
+            } @if(vInfo.flag) {
             <div style="display:flex;">
               <div class="key-label">Flag:</div>
               <div style="flex: 1 1 auto;">{{ vInfo.flag }}</div>

src/assets/help/index.html

@@ -1508,17 +1508,51 @@ <h4>Vessels</h4>
             </div>
             <div>Vessel associated Signal K "self"</div>
           </div>
+          <div style="display: flex">
+            <div style="width: 30px; text-align: center">
+              <img src="../img/ais_self.png" style="width: 12px" alt="" />
+            </div>
+            <div>Focussed Vessel</div>
+          </div>
           <div style="display: flex">
             <div style="width: 30px; text-align: center">
               <img src="../img/ais_active.png" style="width: 24px" alt="" />
             </div>
-            <div>Vessel with updated data (&lt;6 mins since last update)</div>
+            <div>
+              Vessel with updated data <i>(&lt;6 mins since last update)</i>
+            </div>
           </div>
           <div style="display: flex">
             <div style="width: 30px; text-align: center">
               <img src="../img/ais_inactive.png" style="width: 24px" alt="" />
             </div>
-            <div>Vessel with stale data (&gt;6 mins since last update)</div>
+            <div>
+              Vessel with stale data <i>(&gt;6 mins since last update)</i>
+            </div>
+          </div>
+          <div style="display: flex">
+            <div style="width: 30px; text-align: center">
+              <img src="../img/ais_special.png" style="width: 24px" alt="" />
+            </div>
+            <div>Special Vessel <i>(AIS type 50-59)</i></div>
+          </div>
+          <div style="display: flex">
+            <div style="width: 30px; text-align: center">
+              <img src="../img/ais_passenger.png" style="width: 24px" alt="" />
+            </div>
+            <div>Passenger Vessel <i>(AIS type 60-69)</i></div>
+          </div>
+          <div style="display: flex">
+            <div style="width: 30px; text-align: center">
+              <img src="../img/ais_cargo.png" style="width: 24px" alt="" />
+            </div>
+            <div>Cargo Vessel <i>(AIS type 70-79)</i></div>
+          </div>
+          <div style="display: flex">
+            <div style="width: 30px; text-align: center">
+              <img src="../img/ais_tanker.png" style="width: 24px" alt="" />
+            </div>
+            <div>Tanker Vessel <i>(AIS type 80-89)</i></div>
           </div>
           <div style="display: flex">
             <div style="width: 30px; text-align: center">