diff --git a/.eslintrc.json b/.eslintrc.json
index 73ad1fa3..71c289e0 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -16,6 +16,10 @@
         "@typescript-eslint"
     ],
     "rules": {
+        "@typescript-eslint/type-annotation-spacing": ["warn", {
+            "before": false,
+            "after": true
+        }],
         "no-redeclare":"off",
         "prefer-destructuring":"off",
         "no-underscore-dangle":"off",
diff --git a/lib/crosshair-manager.ts b/lib/crosshair-manager.ts
index c68a29cb..3b21bb09 100644
--- a/lib/crosshair-manager.ts
+++ b/lib/crosshair-manager.ts
@@ -1,120 +1,120 @@
 import { Map as MaplibreMap } from 'maplibre-gl';
 
 export default class CrosshairManager {
-    private map: MaplibreMap | undefined;
+  private map: MaplibreMap | undefined;
 
-    private width: number | undefined;
+  private width: number | undefined;
 
-    private height: number | undefined;
+  private height: number | undefined;
 
-    private svgCanvas: SVGElement | undefined;
+  private svgCanvas: SVGElement | undefined;
 
-    private xLine: SVGElement | undefined;
+  private xLine: SVGElement | undefined;
 
-    private yLine: SVGElement | undefined;
+  private yLine: SVGElement | undefined;
 
-    private color = '#535353';
+  private color = '#535353';
 
-    constructor(
-      map: MaplibreMap | undefined,
-    ) {
-      this.map = map;
-      this.mapResize = this.mapResize.bind(this);
-    }
+  constructor(
+    map: MaplibreMap | undefined,
+  ) {
+    this.map = map;
+    this.mapResize = this.mapResize.bind(this);
+  }
 
-    public create() {
-      this.updateValues();
-      if (this.map !== undefined) {
-        this.map.on('resize', this.mapResize);
-        this.createCanvas(this.map.getCanvasContainer());
-      } else {
-        console.error('map object is null');
-      }
+  public create() {
+    this.updateValues();
+    if (this.map !== undefined) {
+      this.map.on('resize', this.mapResize);
+      this.createCanvas(this.map.getCanvasContainer());
+    } else {
+      console.error('map object is null');
     }
+  }
 
-    private updateValues() {
-      this.width = this.map?.getCanvas().clientWidth;
-      this.height = this.map?.getCanvas().clientHeight;
-    }
+  private updateValues() {
+    this.width = this.map?.getCanvas().clientWidth;
+    this.height = this.map?.getCanvas().clientHeight;
+  }
 
-    private mapResize() {
-      this.updateValues();
-      this.updateCanvas();
-    }
+  private mapResize() {
+    this.updateValues();
+    this.updateCanvas();
+  }
 
-    private updateCanvas() {
-      if (
-        this.svgCanvas !== undefined
+  private updateCanvas() {
+    if (
+      this.svgCanvas !== undefined
             && this.yLine !== undefined
             && this.xLine !== undefined
             && this.width !== undefined
             && this.height !== undefined) {
-        this.svgCanvas.setAttribute('width', `${this.width}px`);
-        this.svgCanvas.setAttribute('height', `${this.height}px`);
-        const halfWidth = this.width / 2;
-        const halfHeight = this.height / 2;
-        this.yLine.setAttribute('x1', `${halfWidth}px`);
-        this.yLine.setAttribute('y1', '0px');
-        this.yLine.setAttribute('x2', `${halfWidth}px`);
-        this.yLine.setAttribute('y2', `${this.height}px`);
-
-        this.xLine.setAttribute('x1', `${0}px`);
-        this.xLine.setAttribute('y1', `${halfHeight}px`);
-        this.xLine.setAttribute('x2', `${this.width}px`);
-        this.xLine.setAttribute('y2', `${halfHeight}px`);
-      } else {
-        console.error('element value is null');
-      }
+      this.svgCanvas.setAttribute('width', `${this.width}px`);
+      this.svgCanvas.setAttribute('height', `${this.height}px`);
+      const halfWidth = this.width / 2;
+      const halfHeight = this.height / 2;
+      this.yLine.setAttribute('x1', `${halfWidth}px`);
+      this.yLine.setAttribute('y1', '0px');
+      this.yLine.setAttribute('x2', `${halfWidth}px`);
+      this.yLine.setAttribute('y2', `${this.height}px`);
+
+      this.xLine.setAttribute('x1', `${0}px`);
+      this.xLine.setAttribute('y1', `${halfHeight}px`);
+      this.xLine.setAttribute('x2', `${this.width}px`);
+      this.xLine.setAttribute('y2', `${halfHeight}px`);
+    } else {
+      console.error('element value is null');
     }
+  }
 
-    private createCanvas(container) {
-      if (
-        this.width !== undefined
+  private createCanvas(container) {
+    if (
+      this.width !== undefined
             && this.height !== undefined) {
-        const canvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        canvas.style.position = 'relative';
-        canvas.setAttribute('width', `${this.width}px`);
-        canvas.setAttribute('height', `${this.height}px`);
-        const halfWidth = this.width / 2;
-        const halfHeight = this.height / 2;
-        this.yLine = canvas.appendChild(this.createLine(halfWidth, 0, halfWidth, this.height, this.color, '2px'));
-        this.xLine = canvas.appendChild(this.createLine(0, halfHeight, this.width, halfHeight, this.color, '2px'));
-        container?.appendChild(canvas);
-        this.svgCanvas = canvas;
-      }
+      const canvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      canvas.style.position = 'relative';
+      canvas.setAttribute('width', `${this.width}px`);
+      canvas.setAttribute('height', `${this.height}px`);
+      const halfWidth = this.width / 2;
+      const halfHeight = this.height / 2;
+      this.yLine = canvas.appendChild(this.createLine(halfWidth, 0, halfWidth, this.height, this.color, '2px'));
+      this.xLine = canvas.appendChild(this.createLine(0, halfHeight, this.width, halfHeight, this.color, '2px'));
+      container?.appendChild(canvas);
+      this.svgCanvas = canvas;
+    }
+  }
+
+  private createLine(x1, y1, x2, y2, color, w) {
+    const aLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    aLine.setAttribute('x1', x1);
+    aLine.setAttribute('y1', y1);
+    aLine.setAttribute('x2', x2);
+    aLine.setAttribute('y2', y2);
+    aLine.setAttribute('stroke-dasharray', '5,5');
+    aLine.setAttribute('stroke', color);
+    aLine.setAttribute('stroke-width', w);
+    return aLine;
+  }
+
+  public destroy() {
+    if (this.xLine !== undefined) {
+      this.xLine.remove();
+      this.xLine = undefined;
+    }
+
+    if (this.yLine !== undefined) {
+      this.yLine.remove();
+      this.yLine = undefined;
     }
 
-    private createLine(x1, y1, x2, y2, color, w) {
-      const aLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-      aLine.setAttribute('x1', x1);
-      aLine.setAttribute('y1', y1);
-      aLine.setAttribute('x2', x2);
-      aLine.setAttribute('y2', y2);
-      aLine.setAttribute('stroke-dasharray', '5,5');
-      aLine.setAttribute('stroke', color);
-      aLine.setAttribute('stroke-width', w);
-      return aLine;
+    if (this.svgCanvas !== undefined) {
+      this.svgCanvas.remove();
+      this.svgCanvas = undefined;
     }
 
-    public destroy() {
-      if (this.xLine !== undefined) {
-        this.xLine.remove();
-        this.xLine = undefined;
-      }
-
-      if (this.yLine !== undefined) {
-        this.yLine.remove();
-        this.yLine = undefined;
-      }
-
-      if (this.svgCanvas !== undefined) {
-        this.svgCanvas.remove();
-        this.svgCanvas = undefined;
-      }
-
-      if (this.map !== undefined) {
-        this.map.off('resize', this.mapResize);
-        this.map = undefined;
-      }
+    if (this.map !== undefined) {
+      this.map.off('resize', this.mapResize);
+      this.map = undefined;
     }
+  }
 }
diff --git a/lib/export-control.ts b/lib/export-control.ts
index 7ca9358e..7cde1c59 100644
--- a/lib/export-control.ts
+++ b/lib/export-control.ts
@@ -30,247 +30,239 @@ type Options = {
  * @param {Object} targets - Object of layer.id and title
  */
 export default class MaplibreExportControl implements IControl {
-    private controlContainer: HTMLElement;
+  private controlContainer: HTMLElement;
 
-    private exportContainer: HTMLElement;
+  private exportContainer: HTMLElement;
 
-    private crosshair: CrosshairManager | undefined;
+  private crosshair: CrosshairManager | undefined;
 
-    private printableArea: PrintableAreaManager | undefined;
+  private printableArea: PrintableAreaManager | undefined;
 
-    private map?: MaplibreMap;
+  private map?: MaplibreMap;
 
-    private exportButton: HTMLButtonElement;
+  private exportButton: HTMLButtonElement;
 
-    private options: Options = {
-      PageSize: Size.A4,
-      PageOrientation: PageOrientation.Landscape,
-      Format: Format.PDF,
-      DPI: DPI[300],
-      Crosshair: false,
-      PrintableArea: false,
-      Local: 'en',
-      AllowedSizes: Object.keys(Size) as ('A2'|'A3'|'A4'|'A5'|'A6'|'B2'|'B3'|'B4'|'B5'|'B6')[],
-      Filename: 'map'
-    }
+  private options: Options = {
+    PageSize: Size.A4,
+    PageOrientation: PageOrientation.Landscape,
+    Format: Format.PDF,
+    DPI: DPI[300],
+    Crosshair: false,
+    PrintableArea: false,
+    Local: 'en',
+    AllowedSizes: Object.keys(Size) as ('A2'|'A3'|'A4'|'A5'|'A6'|'B2'|'B3'|'B4'|'B5'|'B6')[],
+    Filename: 'map',
+  };
 
-    constructor(options: Options) {
-      if (options) {
-        this.options = Object.assign(this.options, options);
-      }
-      this.onDocumentClick = this.onDocumentClick.bind(this);
+  constructor(options: Options) {
+    if (options) {
+      this.options = Object.assign(this.options, options);
     }
+    this.onDocumentClick = this.onDocumentClick.bind(this);
+  }
 
-    public getDefaultPosition(): ControlPosition {
-      const defaultPosition = 'top-right';
-      return defaultPosition;
-    }
+  public getDefaultPosition(): ControlPosition {
+    const defaultPosition = 'top-right';
+    return defaultPosition;
+  }
 
-    public getTranslation(): Translation {
-      switch (this.options.Local) {
-        case 'en':
-          return english;
-        case 'fr':
-          return french;
-        case 'fi':
-          return finnish;
-        case 'sv':
-          return swedish;
-        case 'es':
-          return spanish;
-        default:
-          return english;
-      }
+  public getTranslation(): Translation {
+    switch (this.options.Local) {
+      case 'en':
+        return english;
+      case 'fr':
+        return french;
+      case 'fi':
+        return finnish;
+      case 'sv':
+        return swedish;
+      case 'es':
+        return spanish;
+      default:
+        return english;
     }
+  }
 
-    public onAdd(map: MaplibreMap): HTMLElement {
-      this.map = map;
-      this.controlContainer = document.createElement('div');
-      this.controlContainer.classList.add('mapboxgl-ctrl');
-      this.controlContainer.classList.add('mapboxgl-ctrl-group');
-      this.exportContainer = document.createElement('div');
-      this.exportContainer.classList.add('maplibregl-export-list');
-      this.exportButton = document.createElement('button');
-      this.exportButton.classList.add('maplibregl-ctrl-icon');
-      this.exportButton.classList.add('maplibregl-export-control');
-      this.exportButton.type = 'button';
-      this.exportButton.addEventListener('click', () => {
-        this.exportButton.style.display = 'none';
-        this.exportContainer.style.display = 'block';
-        this.toggleCrosshair(true);
-        this.togglePrintableArea(true);
-      });
-      document.addEventListener('click', this.onDocumentClick);
-      this.controlContainer.appendChild(this.exportButton);
-      this.controlContainer.appendChild(this.exportContainer);
+  public onAdd(map: MaplibreMap): HTMLElement {
+    this.map = map;
+    this.controlContainer = document.createElement('div');
+    this.controlContainer.classList.add('mapboxgl-ctrl');
+    this.controlContainer.classList.add('mapboxgl-ctrl-group');
+    this.exportContainer = document.createElement('div');
+    this.exportContainer.classList.add('maplibregl-export-list');
+    this.exportButton = document.createElement('button');
+    this.exportButton.classList.add('maplibregl-ctrl-icon');
+    this.exportButton.classList.add('maplibregl-export-control');
+    this.exportButton.type = 'button';
+    this.exportButton.addEventListener('click', () => {
+      this.exportButton.style.display = 'none';
+      this.exportContainer.style.display = 'block';
+      this.toggleCrosshair(true);
+      this.togglePrintableArea(true);
+    });
+    document.addEventListener('click', this.onDocumentClick);
+    this.controlContainer.appendChild(this.exportButton);
+    this.controlContainer.appendChild(this.exportContainer);
 
-      const table = document.createElement('TABLE');
-      table.className = 'print-table';
+    const table = document.createElement('TABLE');
+    table.className = 'print-table';
 
-      const sizes = {};
-      this.options.AllowedSizes?.forEach((size) => {
-        const dimensions = Size[size];
-        if (dimensions) {
-          sizes[size] = Size[size];
-        }
-      });
-      const tr1 = this.createSelection(
-        sizes, this.getTranslation().PageSize, 'page-size', this.options.PageSize, (data, key) => JSON.stringify(data[key]),
-      );
-      table.appendChild(tr1);
+    const sizes = {};
+    this.options.AllowedSizes?.forEach((size) => {
+      const dimensions = Size[size];
+      if (dimensions) {
+        sizes[size] = Size[size];
+      }
+    });
+    const tr1 = this.createSelection(sizes, this.getTranslation().PageSize, 'page-size', this.options.PageSize, (data, key) => JSON.stringify(data[key]));
+    table.appendChild(tr1);
 
-      const tr2 = this.createSelection(
-        PageOrientation, this.getTranslation().PageOrientation, 'page-orientation', this.options.PageOrientation, (data, key) => data[key],
-      );
-      table.appendChild(tr2);
+    const tr2 = this.createSelection(PageOrientation, this.getTranslation().PageOrientation, 'page-orientation', this.options.PageOrientation, (data, key) => data[key]);
+    table.appendChild(tr2);
 
-      const tr3 = this.createSelection(
-        Format, this.getTranslation().Format, 'format-type', this.options.Format, (data, key) => data[key],
-      );
-      table.appendChild(tr3);
+    const tr3 = this.createSelection(Format, this.getTranslation().Format, 'format-type', this.options.Format, (data, key) => data[key]);
+    table.appendChild(tr3);
 
-      const tr4 = this.createSelection(
-        DPI, this.getTranslation().DPI, 'dpi-type', this.options.DPI, (data, key) => data[key],
-      );
-      table.appendChild(tr4);
+    const tr4 = this.createSelection(DPI, this.getTranslation().DPI, 'dpi-type', this.options.DPI, (data, key) => data[key]);
+    table.appendChild(tr4);
 
-      this.exportContainer.appendChild(table);
+    this.exportContainer.appendChild(table);
 
-      const generateButton = document.createElement('button');
-      generateButton.type = 'button';
-      generateButton.textContent = this.getTranslation().Generate;
-      generateButton.classList.add('generate-button');
-      generateButton.addEventListener('click', () => {
-        const pageSize: HTMLSelectElement = <HTMLSelectElement>document.getElementById('mapbox-gl-export-page-size');
-        const pageOrientation: HTMLSelectElement = <HTMLSelectElement>document.getElementById('mapbox-gl-export-page-orientation');
-        const formatType: HTMLSelectElement = <HTMLSelectElement>document.getElementById('mapbox-gl-export-format-type');
-        const dpiType: HTMLSelectElement = <HTMLSelectElement>document.getElementById('mapbox-gl-export-dpi-type');
-        const orientValue = pageOrientation.value;
-        let pageSizeValue = JSON.parse(pageSize.value);
-        if (orientValue === PageOrientation.Portrait) {
-          pageSizeValue = pageSizeValue.reverse();
-        }
-        const mapGenerator = new MapGenerator(
-          map,
-          pageSizeValue,
-          Number(dpiType.value),
-          formatType.value,
-          Unit.mm,
-          this.options.Filename
-        );
-        mapGenerator.generate();
-      });
-      this.exportContainer.appendChild(generateButton);
+    const generateButton = document.createElement('button');
+    generateButton.type = 'button';
+    generateButton.textContent = this.getTranslation().Generate;
+    generateButton.classList.add('generate-button');
+    generateButton.addEventListener('click', () => {
+      const pageSize: HTMLSelectElement = <HTMLSelectElement>document.getElementById('mapbox-gl-export-page-size');
+      const pageOrientation: HTMLSelectElement = <HTMLSelectElement>document.getElementById('mapbox-gl-export-page-orientation');
+      const formatType: HTMLSelectElement = <HTMLSelectElement>document.getElementById('mapbox-gl-export-format-type');
+      const dpiType: HTMLSelectElement = <HTMLSelectElement>document.getElementById('mapbox-gl-export-dpi-type');
+      const orientValue = pageOrientation.value;
+      let pageSizeValue = JSON.parse(pageSize.value);
+      if (orientValue === PageOrientation.Portrait) {
+        pageSizeValue = pageSizeValue.reverse();
+      }
+      const mapGenerator = new MapGenerator(
+        map,
+        pageSizeValue,
+        Number(dpiType.value),
+        formatType.value,
+        Unit.mm,
+        this.options.Filename,
+      );
+      mapGenerator.generate();
+    });
+    this.exportContainer.appendChild(generateButton);
 
-      return this.controlContainer;
-    }
+    return this.controlContainer;
+  }
 
-    private createSelection(
-      data : Object,
-      title: string,
-      type:string,
-      defaultValue: any,
-      converter: Function,
-    ): HTMLElement {
-      const label = document.createElement('label');
-      label.textContent = title;
+  private createSelection(
+    data: Object,
+    title: string,
+    type: string,
+    defaultValue: any,
+    converter: Function,
+  ): HTMLElement {
+    const label = document.createElement('label');
+    label.textContent = title;
 
-      const content = document.createElement('select');
-      content.setAttribute('id', `mapbox-gl-export-${type}`);
-      content.style.width = '100%';
-      Object.keys(data).forEach((key) => {
-        const optionLayout = document.createElement('option');
-        optionLayout.setAttribute('value', converter(data, key));
-        optionLayout.appendChild(document.createTextNode(key));
-        optionLayout.setAttribute('name', type);
-        if (defaultValue === data[key]) {
-          optionLayout.selected = true;
-        }
-        content.appendChild(optionLayout);
-      });
-      content.addEventListener('change', () => { this.updatePrintableArea(); });
+    const content = document.createElement('select');
+    content.setAttribute('id', `mapbox-gl-export-${type}`);
+    content.style.width = '100%';
+    Object.keys(data).forEach((key) => {
+      const optionLayout = document.createElement('option');
+      optionLayout.setAttribute('value', converter(data, key));
+      optionLayout.appendChild(document.createTextNode(key));
+      optionLayout.setAttribute('name', type);
+      if (defaultValue === data[key]) {
+        optionLayout.selected = true;
+      }
+      content.appendChild(optionLayout);
+    });
+    content.addEventListener('change', () => { this.updatePrintableArea(); });
 
-      const tr1 = document.createElement('TR');
-      const tdLabel = document.createElement('TD');
-      const tdContent = document.createElement('TD');
-      tdLabel.appendChild(label);
-      tdContent.appendChild(content);
-      tr1.appendChild(tdLabel);
-      tr1.appendChild(tdContent);
-      return tr1;
-    }
+    const tr1 = document.createElement('TR');
+    const tdLabel = document.createElement('TD');
+    const tdContent = document.createElement('TD');
+    tdLabel.appendChild(label);
+    tdContent.appendChild(content);
+    tr1.appendChild(tdLabel);
+    tr1.appendChild(tdContent);
+    return tr1;
+  }
 
-    public onRemove(): void {
-      if (!this.controlContainer
+  public onRemove(): void {
+    if (!this.controlContainer
         || !this.controlContainer.parentNode
         || !this.map
         || !this.exportButton) {
-        return;
-      }
-      this.exportButton.removeEventListener('click', this.onDocumentClick);
-      this.controlContainer.parentNode.removeChild(this.controlContainer);
-      document.removeEventListener('click', this.onDocumentClick);
-
-      if (this.crosshair !== undefined) {
-        this.crosshair.destroy();
-        this.crosshair = undefined;
-      }
+      return;
+    }
+    this.exportButton.removeEventListener('click', this.onDocumentClick);
+    this.controlContainer.parentNode.removeChild(this.controlContainer);
+    document.removeEventListener('click', this.onDocumentClick);
 
-      this.map = undefined;
+    if (this.crosshair !== undefined) {
+      this.crosshair.destroy();
+      this.crosshair = undefined;
     }
 
-    private onDocumentClick(event: MouseEvent): void {
-      if (
-        this.controlContainer
+    this.map = undefined;
+  }
+
+  private onDocumentClick(event: MouseEvent): void {
+    if (
+      this.controlContainer
         && !this.controlContainer.contains(event.target as Element)
         && this.exportContainer
         && this.exportButton) {
-        this.exportContainer.style.display = 'none';
-        this.exportButton.style.display = 'block';
-        this.toggleCrosshair(false);
-        this.togglePrintableArea(false);
-      }
+      this.exportContainer.style.display = 'none';
+      this.exportButton.style.display = 'block';
+      this.toggleCrosshair(false);
+      this.togglePrintableArea(false);
     }
+  }
 
-    private toggleCrosshair(state: boolean) {
-      if (this.options.Crosshair === true) {
-        if (state === false) {
-          if (this.crosshair !== undefined) {
-            this.crosshair.destroy();
-            this.crosshair = undefined;
-          }
-        } else {
-          this.crosshair = new CrosshairManager(this.map);
-          this.crosshair.create();
+  private toggleCrosshair(state: boolean) {
+    if (this.options.Crosshair === true) {
+      if (state === false) {
+        if (this.crosshair !== undefined) {
+          this.crosshair.destroy();
+          this.crosshair = undefined;
         }
+      } else {
+        this.crosshair = new CrosshairManager(this.map);
+        this.crosshair.create();
       }
     }
+  }
 
-    private togglePrintableArea(state: boolean) {
-      if (this.options.PrintableArea === true) {
-        if (state === false) {
-          if (this.printableArea !== undefined) {
-            this.printableArea.destroy();
-            this.printableArea = undefined;
-          }
-        } else {
-          this.printableArea = new PrintableAreaManager(this.map);
-          this.updatePrintableArea();
+  private togglePrintableArea(state: boolean) {
+    if (this.options.PrintableArea === true) {
+      if (state === false) {
+        if (this.printableArea !== undefined) {
+          this.printableArea.destroy();
+          this.printableArea = undefined;
         }
+      } else {
+        this.printableArea = new PrintableAreaManager(this.map);
+        this.updatePrintableArea();
       }
     }
+  }
 
-    private updatePrintableArea() {
-      if (this.printableArea === undefined) {
-        return;
-      }
-      const pageSize: HTMLSelectElement = <HTMLSelectElement>document.getElementById('mapbox-gl-export-page-size');
-      const pageOrientation: HTMLSelectElement = <HTMLSelectElement>document.getElementById('mapbox-gl-export-page-orientation');
-      const orientValue = pageOrientation.value;
-      let pageSizeValue = JSON.parse(pageSize.value);
-      if (orientValue === PageOrientation.Portrait) {
-        pageSizeValue = pageSizeValue.reverse();
-      }
-      this.printableArea.updateArea(pageSizeValue[0], pageSizeValue[1]);
+  private updatePrintableArea() {
+    if (this.printableArea === undefined) {
+      return;
+    }
+    const pageSize: HTMLSelectElement = <HTMLSelectElement>document.getElementById('mapbox-gl-export-page-size');
+    const pageOrientation: HTMLSelectElement = <HTMLSelectElement>document.getElementById('mapbox-gl-export-page-orientation');
+    const orientValue = pageOrientation.value;
+    let pageSizeValue = JSON.parse(pageSize.value);
+    if (orientValue === PageOrientation.Portrait) {
+      pageSizeValue = pageSizeValue.reverse();
     }
+    this.printableArea.updateArea(pageSizeValue[0], pageSizeValue[1]);
+  }
 }
diff --git a/lib/map-generator.ts b/lib/map-generator.ts
index aee38a26..663f77f4 100644
--- a/lib/map-generator.ts
+++ b/lib/map-generator.ts
@@ -84,11 +84,20 @@ export const DPI = {
 type DPI = typeof DPI[keyof typeof DPI];
 
 export default class MapGenerator {
+  private map: MaplibreMap;
 
   private width: number;
 
   private height: number;
 
+  private dpi: number;
+
+  private format: string;
+
+  private unit: Unit;
+
+  private fileName: string;
+
   /**
    * Constructor
    * @param map MaplibreMap object
@@ -96,17 +105,23 @@ export default class MapGenerator {
    * @param dpi dpi value. deafult is 300
    * @param format image format. default is PNG
    * @param unit length unit. default is mm
+   * @param fileName file name. default is 'map'
    */
   constructor(
-    private map:MaplibreMap,
+    map: MaplibreMap,
     size: Size = Size.A4,
-    private dpi: number = 300,
-    private format:string = Format.PNG.toString(),
-    private unit: Unit = Unit.mm,
-    private fileName: string = 'map'
+    dpi: number = 300,
+    format: string = Format.PNG.toString(),
+    unit: Unit = Unit.mm,
+    fileName: string = 'map',
   ) {
+    this.map = map;
     this.width = size[0];
     this.height = size[1];
+    this.dpi = dpi;
+    this.format = format;
+    this.unit = unit;
+    this.fileName = fileName;
   }
 
   /**
@@ -177,10 +192,11 @@ export default class MapGenerator {
       transformRequest: (this.map as any)._requestManager._transformRequestFn,
     });
 
-    const images = (this.map.style.imageManager||{}).images||[];
-    for (const key in images) {
-        renderMap.addImage(key, images[key].data);
-    }
+    // @ts-ignore
+    const images = (this.map.style.imageManager || {}).images || [];
+    Object.keys(images).forEach((key) => {
+      renderMap.addImage(key, images[key].data);
+    });
 
     renderMap.once('idle', () => {
       const canvas = renderMap.getCanvas();
@@ -318,7 +334,7 @@ export default class MapGenerator {
    * @param length mm/inch length
    * @param conversionFactor DPI value. default is 96.
    */
-  private toPixels(length:number, conversionFactor = 96) {
+  private toPixels(length: number, conversionFactor = 96) {
     if (this.unit === Unit.mm) {
       conversionFactor /= 25.4;
     }
diff --git a/lib/printable-area-manager.ts b/lib/printable-area-manager.ts
index 62c82a2f..4ccb10e8 100644
--- a/lib/printable-area-manager.ts
+++ b/lib/printable-area-manager.ts
@@ -4,95 +4,95 @@ import {
 } from './map-generator';
 
 export default class PrintableAreaManager {
-    private map: MaplibreMap | undefined;
+  private map: MaplibreMap | undefined;
 
-    private width: number;
+  private width: number;
 
-    private height: number;
+  private height: number;
 
-    private unit: string;
+  private unit: string;
 
-    private svgCanvas: SVGElement | undefined;
+  private svgCanvas: SVGElement | undefined;
 
-    private svgPath: SVGElement | undefined;
+  private svgPath: SVGElement | undefined;
 
-    constructor(
-      map: MaplibreMap | undefined,
-    ) {
-      this.map = map;
-      if (this.map === undefined) {
-        return;
-      }
-      this.mapResize = this.mapResize.bind(this);
-      this.map.on('resize', this.mapResize);
-      const clientWidth = this.map?.getCanvas().clientWidth;
-      const clientHeight = this.map?.getCanvas().clientHeight;
-      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-      svg.style.position = 'absolute';
-      svg.style.top = '0px';
-      svg.style.left = '0px';
-      svg.setAttribute('width', `${clientWidth}px`);
-      svg.setAttribute('height', `${clientHeight}px`);
-      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-      path.setAttribute('style', 'fill:#888888;stroke-width:0');
-      path.setAttribute('fill-opacity', '0.5');
-      svg.append(path);
-      this.map?.getCanvasContainer().appendChild(svg);
-      this.svgCanvas = svg;
-      this.svgPath = path;
+  constructor(
+    map: MaplibreMap | undefined,
+  ) {
+    this.map = map;
+    if (this.map === undefined) {
+      return;
     }
+    this.mapResize = this.mapResize.bind(this);
+    this.map.on('resize', this.mapResize);
+    const clientWidth = this.map?.getCanvas().clientWidth;
+    const clientHeight = this.map?.getCanvas().clientHeight;
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.style.position = 'absolute';
+    svg.style.top = '0px';
+    svg.style.left = '0px';
+    svg.setAttribute('width', `${clientWidth}px`);
+    svg.setAttribute('height', `${clientHeight}px`);
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('style', 'fill:#888888;stroke-width:0');
+    path.setAttribute('fill-opacity', '0.5');
+    svg.append(path);
+    this.map?.getCanvasContainer().appendChild(svg);
+    this.svgCanvas = svg;
+    this.svgPath = path;
+  }
 
-    private mapResize() {
-      this.generateCutOut();
-    }
+  private mapResize() {
+    this.generateCutOut();
+  }
 
-    public updateArea(width: number, height: number) {
-      this.width = width;
-      this.height = height;
-      this.unit = Unit.mm;
-      this.generateCutOut();
-    }
+  public updateArea(width: number, height: number) {
+    this.width = width;
+    this.height = height;
+    this.unit = Unit.mm;
+    this.generateCutOut();
+  }
 
-    private generateCutOut() {
-      if (this.map === undefined
+  private generateCutOut() {
+    if (this.map === undefined
         || this.svgCanvas === undefined
         || this.svgPath === undefined) {
-        return;
-      }
-      const width = this.toPixels(this.width);
-      const height = this.toPixels(this.height);
-      const clientWidth = this.map?.getCanvas().clientWidth;
-      const clientHeight = this.map?.getCanvas().clientHeight;
-      const startX = clientWidth / 2 - width / 2;
-      const endX = startX + width;
-      const startY = clientHeight / 2 - height / 2;
-      const endY = startY + height;
-
-      this.svgCanvas.setAttribute('width', `${clientWidth}px`);
-      this.svgCanvas.setAttribute('height', `${clientHeight}px`);
-      this.svgPath.setAttribute('d', `M 0 0 L ${clientWidth} 0 L ${clientWidth} ${clientHeight} L 0 ${clientHeight} M ${startX} ${startY} L ${startX} ${endY} L ${endX} ${endY} L ${endX} ${startY}`);
+      return;
     }
+    const width = this.toPixels(this.width);
+    const height = this.toPixels(this.height);
+    const clientWidth = this.map?.getCanvas().clientWidth;
+    const clientHeight = this.map?.getCanvas().clientHeight;
+    const startX = clientWidth / 2 - width / 2;
+    const endX = startX + width;
+    const startY = clientHeight / 2 - height / 2;
+    const endY = startY + height;
 
-    public destroy() {
-      if (this.svgCanvas !== undefined) {
-        this.svgCanvas.remove();
-        this.svgCanvas = undefined;
-      }
+    this.svgCanvas.setAttribute('width', `${clientWidth}px`);
+    this.svgCanvas.setAttribute('height', `${clientHeight}px`);
+    this.svgPath.setAttribute('d', `M 0 0 L ${clientWidth} 0 L ${clientWidth} ${clientHeight} L 0 ${clientHeight} M ${startX} ${startY} L ${startX} ${endY} L ${endX} ${endY} L ${endX} ${startY}`);
+  }
+
+  public destroy() {
+    if (this.svgCanvas !== undefined) {
+      this.svgCanvas.remove();
+      this.svgCanvas = undefined;
+    }
 
-      if (this.map !== undefined) {
-        this.map = undefined;
-      }
+    if (this.map !== undefined) {
+      this.map = undefined;
     }
+  }
 
-    /**
+  /**
      * Convert mm/inch to pixel
      * @param length mm/inch length
      * @param conversionFactor DPI value. default is 96.
      */
-    private toPixels(length:number, conversionFactor = 96) {
-      if (this.unit === Unit.mm) {
-        conversionFactor /= 25.4;
-      }
-      return conversionFactor * length;
+  private toPixels(length: number, conversionFactor = 96) {
+    if (this.unit === Unit.mm) {
+      conversionFactor /= 25.4;
     }
+    return conversionFactor * length;
+  }
 }
diff --git a/package.json b/package.json
index f0c67973..cab5a531 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,8 @@
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "eslint lib/**/*.ts",
-    "lint:fix": "eslint --fix lib/**/*.ts",
+    "lint": "eslint lib/*.ts",
+    "lint:fix": "eslint --fix lib/*.ts",
     "build": "tsc && npm run build:cdn && npm run build:example",
     "build:example": "webpack --mode production --config webpack.config.js",
     "build:cdn": "webpack --mode production --config webpack.cdn.config.js && cp ./dist/cdn/maplibre-gl-export.js ./example/. && cp ./css/styles.css ./example/maplibre-gl-export.css",
diff --git a/tsconfig.json b/tsconfig.json
index 73cd74d0..95b23001 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,5 +21,5 @@
       "target": "es6",
       "esModuleInterop": true,
   },
-  "include" : ["lib/**/*"] 
+  "include" : ["lib/*"] 
 }
\ No newline at end of file