feature: limit zoom to selected maps.

SignalK · Jul 6, 2023 · afa7b34 · afa7b34
1 parent 6487c67
commit afa7b34
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 19 deletions.
diff --git a/projects/fb-openlayers/src/lib/view.directive.ts b/projects/fb-openlayers/src/lib/view.directive.ts
@@ -115,6 +115,18 @@ export class ViewDirective
         } else {
           properties[key] = fromLonLat(changes[key].currentValue);
         }
+      } else if (key === 'minZoom') {
+        if (this.view) {
+          this.view.setMinZoom(changes[key].currentValue);
+        } else {
+          properties[key] = changes[key].currentValue;
+        }
+      } else if (key === 'maxZoom') {
+        if (this.view) {
+          this.view.setMaxZoom(changes[key].currentValue);
+        } else {
+          properties[key] = changes[key].currentValue;
+        }
       } else {
         properties[key] = changes[key].currentValue;
       }

diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -59,6 +59,9 @@ mat-nav-list {
     background-color: rgba(130,130,130,.3);
     padding: 10px 2px 2px 2px;
 }
+.rightUtilsPanel div { 
+    height: 60px;
+}
 
 .mapButton {
     position: fixed;

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -624,6 +624,20 @@
               <br />&nbsp;<br />
             </div>
 
+            <!-- constrain zoom to selected map(s) extent -->
+            <div>
+              <button
+                mat-mini-fab
+                [color]="app.config.map.limitZoom ? 'accent' : ''"
+                (click)="toggleLimitMapZoom()"
+                matTooltip="Constrain map zoom."
+                matTooltipPosition="left"
+              >
+                <mat-icon>zoom_in_map</mat-icon>
+              </button>
+              <br />&nbsp;<br />
+            </div>
+
             <!-- Drop Waypoint button -->
             <div>
               <button

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -288,6 +288,14 @@ export class AppComponent {
       : 'rotate(' + (0 - this.app.data.vessels.active.orientation) + 'rad)';
   }
 
+  public toggleLimitMapZoom() {
+    this.app.config.map.limitZoom = this.app.config.map.limitZoom
+      ? false
+      : true;
+    this.skres.setMapZoomRange();
+    this.app.saveConfig();
+  }
+
   public toggleFullscreen() {
     const docel = document.documentElement;
     const fscreen =

diff --git a/src/app/app.info.ts b/src/app/app.info.ts
@@ -40,7 +40,8 @@ const FreeboardConfig = {
     rotation: 0,
     moveMap: false,
     northUp: true,
-    animate: false
+    animate: false,
+    limitZoom: false
   },
   vesselTrail: false, // display trail
   vesselWindVectors: true, // display vessel TWD, AWD vectors
@@ -165,11 +166,17 @@ interface PluginInfo {
 @Injectable({ providedIn: 'root' })
 export class AppInfo extends Info {
   private DEV_SERVER = {
-    host: 'localhost', // host name || ip address
+    host: '192.168.86.32', //'localhost', // host name || ip address
     port: 3000, // port number
     ssl: false
   };
 
+  // controls map zoom limits
+  public MAP_ZOOM_EXTENT = {
+    min: 2,
+    max: 28
+  };
+
   public hostName: string;
   public hostPort: number;
   public hostSSL: boolean;
@@ -223,28 +230,37 @@ export class AppInfo extends Info {
         ? this.DEV_SERVER.host
         : window.location.hostname;
 
+    this.hostSSL =
+      window.location.protocol === 'https:' ||
+      (this.devMode && this.DEV_SERVER.ssl)
+        ? true
+        : false;
+
     this.hostPort =
       typeof this.hostParams.port !== 'undefined'
         ? parseInt(this.hostParams.port)
         : this.devMode && this.DEV_SERVER.port
         ? this.DEV_SERVER.port
         : parseInt(window.location.port);
 
-    this.hostSSL =
-      window.location.protocol === 'https:' ||
-      (this.devMode && this.DEV_SERVER.ssl)
-        ? true
-        : false;
+    // if no port specified then set to 80 | 443
+    this.hostPort = isNaN(this.hostPort)
+      ? this.hostSSL
+        ? 443
+        : 80
+      : this.hostPort;
 
     this.host = `${this.hostSSL ? 'https:' : 'http:'}//${this.hostName}:${
       this.hostPort
     }`;
 
+    this.debug('host:', this.host);
+
     this.id = 'freeboard';
     this.name = 'Freeboard';
     this.shortName = 'freeboard';
     this.description = `Signal K Chart Plotter.`;
-    this.version = '2.0.2';
+    this.version = '2.1.0';
     this.url = 'https://github.com/signalk/freeboard-sk';
     this.logo = './assets/img/app_logo.png';
 
@@ -556,6 +572,10 @@ export class AppInfo extends Info {
   cleanConfig(settings) {
     this.debug('Cleaning config keys...');
 
+    if (typeof settings.map.limitZoom === 'undefined') {
+      settings.map.limitZoom = false;
+    }
+
     if (typeof settings.anchorRadius === 'undefined') {
       settings.anchorRadius = 40;
     }

diff --git a/src/app/modules/map/fb-map.component.html b/src/app/modules/map/fb-map.component.html
@@ -13,7 +13,8 @@
   [zoom]="fbMap.zoomLevel"
   [center]="fbMap.center"
   [rotation]="fbMap.rotation"
-  [minZoom]="fbMap.minZoom"
+  [minZoom]="app.MAP_ZOOM_EXTENT.min"
+  [maxZoom]="app.MAP_ZOOM_EXTENT.max"
   [enableAnimation]="false"
 >
   <!-- Draw / modify -->
@@ -48,7 +49,7 @@
         <button
           mat-mini-fab
           (click)="zoomMap(false)"
-          [disabled]="fbMap.zoomLevel <= fbMap.minZoom"
+          [disabled]="fbMap.zoomLevel <= app.MAP_ZOOM_EXTENT.min"
           matTooltip="Zoom out"
         >
           <mat-icon>remove</mat-icon>
@@ -57,7 +58,7 @@
         <button
           mat-mini-fab
           (click)="zoomMap(true)"
-          [disabled]="fbMap.zoomLevel >= fbMap.maxZoom"
+          [disabled]="fbMap.zoomLevel >= app.MAP_ZOOM_EXTENT.max"
           matTooltip="Zoom in"
         >
           <mat-icon>add</mat-icon>

diff --git a/src/app/modules/map/fb-map.component.ts b/src/app/modules/map/fb-map.component.ts
@@ -109,9 +109,6 @@ interface IDrawInfo {
   properties: { [key: string]: any };
 }
 
-const MAP_MAX_ZOOM = 28;
-const MAP_MIN_ZOOM = 2;
-
 enum INTERACTION_MODE {
   MEASURE,
   DRAW,
@@ -207,8 +204,6 @@ export class FBMapComponent implements OnInit, OnDestroy {
 
   // ** map ctrl **
   fbMap = {
-    minZoom: MAP_MIN_ZOOM,
-    maxZoom: MAP_MAX_ZOOM,
     rotation: 0,
     center: [0, 0],
     zoomLevel: 1,
@@ -924,11 +919,11 @@ export class FBMapComponent implements OnInit, OnDestroy {
   // ** handle map zoom controls
   public zoomMap(zoomIn: boolean) {
     if (zoomIn) {
-      if (this.app.config.map.zoomLevel < MAP_MAX_ZOOM) {
+      if (this.app.config.map.zoomLevel < this.app.MAP_ZOOM_EXTENT.max) {
         ++this.app.config.map.zoomLevel;
       }
     } else {
-      if (this.app.config.map.zoomLevel > MAP_MIN_ZOOM) {
+      if (this.app.config.map.zoomLevel > this.app.MAP_ZOOM_EXTENT.min) {
         --this.app.config.map.zoomLevel;
       }
     }

diff --git a/src/app/modules/skresources/resources.service.ts b/src/app/modules/skresources/resources.service.ts
@@ -486,6 +486,8 @@ export class SKResources {
     this.app.config.selections.charts = t.filter((i) => {
       return i ? true : false;
     });
+    // set map zoom extent
+    this.setMapZoomRange();
     this.app.saveConfig();
     this.updateSource.next({ action: 'selected', mode: 'chart' });
   }
@@ -687,10 +689,43 @@ export class SKResources {
   }
 
   // **** CHARTS ****
+
+  /** calc aggregated min-max zoom from selected charts */
+  setMapZoomRange(useDefault?: boolean) {
+    const defaultExtent = {
+      min: 2,
+      max: 28
+    };
+    if (useDefault || !this.app.config.map.limitZoom) {
+      this.app.MAP_ZOOM_EXTENT = defaultExtent;
+    } else {
+      const derivedExtent = {
+        min: 1000,
+        max: -1
+      };
+      this.app.data.charts.forEach((c) => {
+        if (c[2]) {
+          // selected
+          if (c[1].minZoom < derivedExtent.min) {
+            derivedExtent.min = c[1].minZoom;
+          }
+          if (c[1].maxZoom > derivedExtent.max) {
+            derivedExtent.max = c[1].maxZoom;
+          }
+        }
+        this.app.MAP_ZOOM_EXTENT.min =
+          derivedExtent.min === 1000 ? defaultExtent.min : derivedExtent.min;
+        this.app.MAP_ZOOM_EXTENT.max =
+          derivedExtent.max === -1 ? defaultExtent.max : derivedExtent.max;
+      });
+      this.app.debug('*** MAP_ZOOM_EXTENT', this.app.MAP_ZOOM_EXTENT);
+    }
+  }
+
   OSMCharts = [].concat(OSM);
   // ** get charts from sk server
   getCharts(apiVersion = this.app.config.chartApi ?? 1) {
-    // ** fetch charts from server
+    // fetch charts from server
     this.signalk.api.get(apiVersion, `/resources/charts`).subscribe(
       (res: Charts) => {
         this.app.data.charts = [];
@@ -750,6 +785,9 @@ export class SKResources {
         // arrange the chart layers
         this.arrangeChartLayers();
 
+        // set map zoom extent
+        this.setMapZoomRange();
+
         // emit update
         this.updateSource.next({ action: 'get', mode: 'chart' });
       },
@@ -770,6 +808,8 @@ export class SKResources {
           : false;
         dc.push(this.OSMCharts[1]);
         this.app.data.charts = dc;
+        // set map zoom extent
+        this.setMapZoomRange();
       }
     );
   }