fix: PR feedback

src/components/my-map/controls.ts

@@ -1,10 +1,12 @@
+import Map from "ol/Map";
 import { Control, ScaleLine } from "ol/control";
 import "ol/ol.css";
 import "ol-ext/dist/ol-ext.css";
 import northArrowIcon from "./icons/north-arrow-n.svg";
 import trashCanIcon from "./icons/trash-can.svg";
 import printIcon from "./icons/printer.svg";
 import PrintDialog from "ol-ext/control/PrintDialog";
+import { Options } from "ol-ext/control/PrintDialog";
 import CanvasScaleLine from "ol-ext/control/CanvasScaleLine";
 import jsPDF from "jspdf";
 import { saveAs } from "file-saver";
@@ -105,22 +107,49 @@ PrintDialog.prototype.formats = [
   },
 ];
 
+export interface PrintControlOptions extends Options {
+  map: Map;
+}
+
 export class PrintControl extends PrintDialog {
-  constructor() {
+  mainMap: Map;
+
+  constructor({ map }: PrintControlOptions) {
     super({
       northImage: northArrowIcon,
       saveAs: saveAs,
       jsPDF: jsPDF,
       copy: false,
     });
+    this.mainMap = map;
     this.setSize("A4");
     this.setMargin(10);
     this.setOrientation("portrait");
     this.element.className = "ol-print ol-unselectable ol-control";
 
+    this.setupCanvasScaleLine();
     this.setupPrintButton();
   }
 
+  /**
+   * Toggle scaleControl when printControl is open
+   * Instead, display CanvasScaleLine which can be printed
+   */
+  private setupCanvasScaleLine() {
+    const scaleLineControl = this.mainMap
+      ?.getControls()
+      .getArray()
+      .filter(
+        (control: Control) => control instanceof ScaleLine
+      )[0] as ScaleLine;
+    if (!scaleLineControl) return;
+    // @ts-ignore
+    this.on("show", () => this.getMap().removeControl(scaleLineControl));
+    // @ts-ignore
+    this.on("hide", () => this.getMap().addControl(scaleLineControl));
+    this.mainMap.addControl(new CanvasScaleLine({ dpi: 96 }));
+  }
+
   /**
    * Setup custom styling and event listeners of print button displayed on map
    */

src/components/my-map/index.ts

@@ -3,7 +3,7 @@ import { customElement, property } from "lit/decorators.js";
 import { defaults as defaultControls } from "ol/control";
 import { GeoJSON } from "ol/format";
 import { Point } from "ol/geom";
-import { Control } from "ol/control";
+import { ScaleLine } from "ol/control";
 import { Feature } from "ol/index";
 import { defaults as defaultInteractions } from "ol/interaction";
 import { Vector as VectorLayer } from "ol/layer";
@@ -12,7 +12,6 @@ import { ProjectionLike, transform, transformExtent } from "ol/proj";
 import { Vector as VectorSource } from "ol/source";
 import { Circle, Fill, Icon, Stroke, Style } from "ol/style";
 import View from "ol/View";
-import CanvasScaleLine from "ol-ext/control/CanvasScaleLine";
 import { last } from "rambda";
 
 import {
@@ -270,7 +269,7 @@ export class MyMap extends LitElement {
     const modify = configureModify(this.drawPointer);
 
     // add custom scale line and north arrow controls to the map
-    let scale: Control;
+    let scale: ScaleLine;
     if (this.showNorthArrow) {
       map.addControl(northArrowControl());
     }
@@ -281,18 +280,8 @@ export class MyMap extends LitElement {
     }
 
     if (this.showPrint) {
-      const printControl = new PrintControl();
+      const printControl = new PrintControl({ map });
       map.addControl(printControl);
-
-      // Toggle scaleControl when printControl is open
-      // Instead, display CanvasScaleLine which can be printed
-      if (this.showScale) {
-        // @ts-ignore
-        printControl.on("show", () => map.removeControl(scale));
-        // @ts-ignore
-        printControl.on("hide", () => map.addControl(scale));
-        map.addControl(new CanvasScaleLine({ dpi: 96 }));
-      }
     }
 
     // add a custom 'reset' control to the map

src/components/my-map/styles.scss

@@ -82,7 +82,7 @@
 }
 
 .ol-print {
-  top: 175px;
+  bottom: 50px;
   left: 0.5em;
 }