fixes

CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG: Freeboard
 
+### v2.12.0
+
+- **Added**: Define chart sources from within the Charts List including: WMTS, Mapbox Style and TileJSON.
+- **Updated**: Measure distances < 1km are displayed in meters and < 0.5NM uses depth units (#194). 
+- **Updated**: Ensure weather forecast times use 24 hr format. (#193).
+- **Updated**: OpenSea Map min / max zoom levels.
+- **Updated**: OpenLayers v10. 
+- **Fixed**: gybeAngle null value handling.
+
 ### v2.11.5
 
 - **Fixed**: Issue when moving waypoint.

helper/weather/openweather.ts

@@ -117,7 +117,11 @@ export class OpenWeather implements IWeatherService {
   fetchData = async (position: Position): Promise<ParsedResponse> => {
     const url = this.getUrl(position);
     const response = await fetch(url);
-    return this.parseResponse(response as OWResponse);
+    if ('cod' in response) {
+      throw new Error(response.message);
+    } else {
+      return this.parseResponse(response as OWResponse);
+    }
   };
 
   private parseResponse = (owData: OWResponse): ParsedResponse => {

helper/weather/weather-service.ts

@@ -380,14 +380,13 @@ const fetchWeatherData = () => {
     server.debug(
       `*** Weather: Calling service API.....(attempt: ${retryCount})`
     );
-
     server.debug(`Position: ${JSON.stringify(pos.value)}`);
     server.debug(`*** Weather: polling weather provider.`);
     weatherService
       .fetchData(pos.value)
       .then((data) => {
         server.debug(`*** Weather: data received....`);
-        //server.debug(JSON.stringify(data));
+        server.debug(JSON.stringify(data));
         retryCount = 0;
         lastFetch = Date.now();
         lastWake = Date.now();
@@ -419,7 +418,8 @@ const fetchWeatherData = () => {
             retryInterval / 1000
           } sec)`
         );
-        server.debug(err.message);
+        console.log(err.message);
+        server.setPluginError(err.message);
         // sleep and retry
         retryTimer = setTimeout(() => fetchWeatherData(), retryInterval);
       });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalk/freeboard-sk",
-  "version": "2.11.5",
+  "version": "2.12.0",
   "description": "Openlayers chart plotter implementation for Signal K",
   "keywords": [
     "signalk-webapp",
@@ -79,8 +79,8 @@
     "karma-jasmine-html-reporter": "^1.5.0",
     "ng-packagr": "^18.1.0",
     "ngeohash": "^0.6.3",
-    "ol": "^9.0.0",
-    "ol-mapbox-style": "^12.3.3",
+    "ol": "^10.2.1",
+    "ol-mapbox-style": "^12.3.5",
     "pmtiles": "^2.7.0",
     "prettier": "^2.5.1",
     "prettier-plugin-organize-attributes": "^0.0.5",

src/app/app.component.html

@@ -36,6 +36,7 @@
         <mat-icon>save</mat-icon>
         &nbsp;Save to GPX
       </button>
+
       @if(app.config.resources.paths.length !== 0) {
       <div>
         <mat-divider></mat-divider>
@@ -534,6 +535,7 @@
               [charts]="app.data.charts"
               [selectedCharts]="app.config.selections.charts"
               (select)="skres.chartSelected()"
+              (delete)="skres.showChartDelete($event)"
               (orderChange)="skres.chartOrder()"
               (refresh)="skres.getCharts()"
               (closed)="displayLeftMenu()"

src/app/app.info.ts

@@ -51,8 +51,8 @@ export const OSM = [
       name: 'Sea Map',
       description: 'Open Sea Map',
       url: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
-      minzoom: 12,
-      maxzoom: 18,
+      minzoom: 1,
+      maxzoom: 24,
       bounds: [-180, -90, 180, 90],
       type: 'tilelayer'
     }),
@@ -160,7 +160,7 @@ export class AppInfo extends Info {
     this.name = 'Freeboard-SK';
     this.shortName = 'Freeboard';
     this.description = `Signal K Chart Plotter.`;
-    this.version = '2.11.5';
+    this.version = '2.12.0';
     this.url = 'https://github.com/signalk/freeboard-sk';
     this.logo = './assets/img/app_logo.png';
 
@@ -657,9 +657,16 @@ export class AppInfo extends Info {
           ? `${value.toFixed(1)} m`
           : `${Convert.metersToFeet(value).toFixed(1)} ft`;
       } else {
-        return this.config.units.distance !== 'ft'
-          ? `${(value / 1000).toFixed(1)} km`
-          : `${Convert.kmToNauticalMiles(value / 1000).toFixed(1)} NM`;
+        if (this.config.units.distance !== 'ft') {
+          return value < 1000
+            ? `${value.toFixed(0)} m`
+            : `${(value / 1000).toFixed(1)} km`;
+        } else {
+          const nm = Convert.kmToNauticalMiles(value / 1000);
+          return nm < 0.5
+            ? this.formatValueForDisplay(value, 'm', true)
+            : `${nm.toFixed(1)} NM`;
+        }
       }
     } else if (sourceUnits === 'm/s') {
       switch (this.config.units.speed) {

src/app/app.messages.ts

@@ -1,23 +1,21 @@
 const WHATS_NEW = [
-  {
+  /*{
     type: 'signalk-server-node',
-    title: 'AIS Vessels',
+    title: 'Chart Sources',
     message: `
-        The following new features have been added:
+        Initial support for defining the following chart sources directly 
+        from the Chart List:
+        <li>WMTS (WebMap Tile Server)</li>
+        <li>TileJSON</li>
+        <li>Mapbox Style</li>
+        <br>
+        <i>Note: This functionality requires an upcoming release of 
+        Signal K Server.</i>
         <br>&nbsp;<br>
-        <li>Ability to Flag vessels.</li>
-        <li>COG line is now displayed for AIS vessels.</li>
+        See <a href="assets/help/index.html" target="help">HELP</a> 
+                  for more details.
       `
-  },
-  {
-    type: 'signalk-server-node',
-    title: 'Racing Support',
-    message: `
-        This release contains initial support for <i>navigation.racing</i> paths.
-        <br>&nbsp;<br>
-        <li>Display start line.</li>
-      `
-  }
+  }*/
 ];
 
 export const WELCOME_MESSAGES = {

src/app/modules/map/fb-map.component.ts

@@ -91,6 +91,7 @@ import {
   SKNotification
 } from 'src/app/types';
 import { S57Service } from './ol/lib/s57.service';
+import { Position as SKPosition } from '@signalk/server-api';
 
 interface IResource {
   id: string;
@@ -1231,15 +1232,24 @@ export class FBMapComponent implements OnInit, OnDestroy {
         this.app.data.vessels.self.performance.beatAngle ?? Math.PI / 4
       );
 
-      const ga_deg = Convert.radiansToDegrees(
-        this.app.data.vessels.self.performance.gybeAngle ?? Math.PI / 9
-      );
+      let ga_deg: number;
+      let ga_diff: number;
+      if (
+        typeof this.app.data.vessels.self.performance.gybeAngle === 'number'
+      ) {
+        ga_deg = Convert.radiansToDegrees(
+          this.app.data.vessels.self.performance.gybeAngle
+        );
+        ga_diff = Math.abs(180 - ga_deg);
+      }
 
-      const destInTarget =
-        destUpwind &&
-        Math.abs(
-          Angle.difference(this.app.data.navData.bearing.value, twd_deg)
-        ) < ba_deg;
+      const destInTarget = destUpwind
+        ? Math.abs(
+            Angle.difference(this.app.data.navData.bearing.value, twd_deg)
+          ) < ba_deg
+        : Math.abs(
+            Angle.difference(this.app.data.navData.bearing.value, twd_inv)
+          ) < (ga_diff ?? 0);
 
       const dtg =
         this.app.config.units.distance === 'm'
@@ -1265,7 +1275,7 @@ export class FBMapComponent implements OnInit, OnDestroy {
           this.dfeat.navData.position,
           [bapt2.longitude, bapt2.latitude]
         ];
-      } else {
+      } else if (typeof ga_deg === 'number') {
         const gapt1 = computeDestinationPoint(
           this.dfeat.navData.position,
           dtg,
@@ -1287,30 +1297,58 @@ export class FBMapComponent implements OnInit, OnDestroy {
       vl.targetAngle = markLines;
 
       // vessel laylines
-      if (destInTarget && destUpwind) {
-        // Vector angles
+      if (destInTarget) {
         const hbd_deg = Angle.difference(
           twd_deg,
           this.app.data.navData.bearing.value
         );
-        const C_RAD = Convert.degreesToRadians(ba_deg - hbd_deg);
-        const B_RAD = Convert.degreesToRadians(ba_deg + hbd_deg);
-        const A_RAD = Math.PI - (B_RAD + C_RAD);
         // Vector lengths
-        const b = (dtg * Math.sin(B_RAD)) / Math.sin(A_RAD);
-        const c = (dtg * Math.sin(C_RAD)) / Math.sin(A_RAD);
+        let b: number;
+        let c: number;
         // intersection points
-        const ipts = computeDestinationPoint(
-          this.app.data.vessels.active.position,
-          b,
-          Angle.add(twd_deg, ba_deg)
-        );
-        const iptp = computeDestinationPoint(
-          this.app.data.vessels.active.position,
-          c,
-          Angle.add(twd_deg, 0 - ba_deg)
-        );
-
+        let ipts: SKPosition;
+        let iptp: SKPosition;
+
+        if (destUpwind) {
+          // Vector angles
+          const C_RAD = Convert.degreesToRadians(ba_deg - hbd_deg);
+          const B_RAD = Convert.degreesToRadians(ba_deg + hbd_deg);
+          const A_RAD = Math.PI - (B_RAD + C_RAD);
+          b = (dtg * Math.sin(B_RAD)) / Math.sin(A_RAD);
+          c = (dtg * Math.sin(C_RAD)) / Math.sin(A_RAD);
+          // intersection points
+          ipts = computeDestinationPoint(
+            this.app.data.vessels.active.position,
+            b,
+            Angle.add(twd_deg, ba_deg)
+          );
+          iptp = computeDestinationPoint(
+            this.app.data.vessels.active.position,
+            c,
+            Angle.add(twd_deg, 0 - ba_deg)
+          );
+        } else {
+          // downwind
+          if (markLines.length !== 0 && typeof ga_diff === 'number') {
+            // Vector angles
+            const C_RAD = Convert.degreesToRadians(ga_diff - hbd_deg);
+            const B_RAD = Convert.degreesToRadians(ga_diff + hbd_deg);
+            const A_RAD = Math.PI - (B_RAD + C_RAD);
+            b = (dtg * Math.sin(B_RAD)) / Math.sin(A_RAD);
+            c = (dtg * Math.sin(C_RAD)) / Math.sin(A_RAD);
+            // intersection points
+            ipts = computeDestinationPoint(
+              this.app.data.vessels.active.position,
+              b,
+              Angle.add(twd_deg, ga_diff)
+            );
+            iptp = computeDestinationPoint(
+              this.app.data.vessels.active.position,
+              c,
+              Angle.add(twd_deg, 0 - ga_diff)
+            );
+          }
+        }
         vl.laylines = {
           port: [
             [

src/app/modules/map/mapconfig.ts

@@ -719,7 +719,7 @@ export const targetAngleStyle = new Style({
   stroke: new Stroke({
     color: 'gray',
     width: 1,
-    lineDash: [5, 5]
+    lineDash: [15, 5, 3, 5]
   })
 });
 

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

@@ -6,8 +6,8 @@ import {
   SimpleChanges
 } from '@angular/core';
 import { Feature } from 'ol';
-import { Style, Icon, Stroke } from 'ol/style';
-import { LineString, Point } from 'ol/geom';
+import { Style, Stroke } from 'ol/style';
+import { LineString } from 'ol/geom';
 import { fromLonLat } from 'ol/proj';
 import { MapComponent } from '../map.component';
 import { AISBaseLayerComponent } from './ais-base.component';
@@ -75,10 +75,8 @@ export class AISWindLayerComponent extends AISBaseLayerComponent {
       }
       const f = new Feature(new LineString(v));
       f.setId('wind-' + id);
-      //const s = this.buildStyle('').clone();
-      //f.setStyle(this.setRotation(s, target.orientation));
       f.setStyle(this.buildVectorStyle());
-      this.source.addFeature(f);
+      this.source?.addFeature(f);
     }
   }
 
@@ -93,19 +91,6 @@ export class AISWindLayerComponent extends AISBaseLayerComponent {
     });
   }
 
-  /*private buildStyle(label?: string) {
-    return new Style({
-      image: new Icon({
-        src: './assets/img/ais_flag.svg',
-        rotateWithView: true,
-        scale: 0.2,
-        anchor: [27, 187],
-        anchorXUnits: 'pixels',
-        anchorYUnits: 'pixels'
-      })
-    });
-  }*/
-
   // reload all Features from this.targets
   override onReloadTargets() {
     this.extractKeys(this.targets).forEach((id) => {
@@ -117,7 +102,7 @@ export class AISWindLayerComponent extends AISBaseLayerComponent {
   override onUpdateTargets(ids: Array<string>) {
     ids.forEach((id: string) => {
       if (id.includes(this.targetContext)) {
-        const f = this.source.getFeatureById('wind-' + id) as Feature;
+        const f = this.source?.getFeatureById('wind-' + id) as Feature;
         if (this.okToRenderTarget(id)) {
           if (this.targets.has(id)) {
             if (f) {

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

@@ -192,7 +192,7 @@ export class FreeboardChartLayerComponent
                 : charts[i][1].minZoom;
             const maxZ = charts[i][1].maxZoom;
 
-            if (charts[i][1].type === 'mapstyleJSON') {
+            if (charts[i][1].type.toLowerCase() === 'mapboxstyle') {
               const lg = new LayerGroup({
                 zIndex: this.zIndex + parseInt(i)
               });
@@ -208,7 +208,7 @@ export class FreeboardChartLayerComponent
                   charts[i][1]
                 );
               layer = styleFactory.CreateLayer();
-              styleFactory.ApplyStyle(layer as VectorTileLayer<FeatureLike>);
+              styleFactory.ApplyStyle(layer as VectorTileLayer<never>);
               layer.setZIndex(this.zIndex + parseInt(i));
             } else {
               // raster tile
@@ -266,7 +266,8 @@ export class FreeboardChartLayerComponent
               ) {
                 // tileJSON
                 source = new TileJSON({
-                  url: charts[i][1].url
+                  url: charts[i][1].url,
+                  crossOrigin: 'anonymous'
                 });
               } else {
                 // XYZ tilelayer