@mapcatch/util 1.0.15 → 2.0.0

package/src/gl-operations/index.js

@@ -1,17 +1,17 @@
-import defaultOptions from "./default_options";
+import defaultOptions from './default_options'
 import * as util from './util'
-import Renderer from "./renderer";
-import { EARTH_CIRCUMFERENCE } from './constants';
+import Renderer from './renderer'
+import { EARTH_CIRCUMFERENCE } from './constants'
 
 export default class GLOperations {
-  constructor(options) {
+  constructor (options) {
     this.options = Object.assign({}, defaultOptions, options)
-    this._checkColorScaleAndSentinels();
-    this.setHillshadeOptions();
+    this._checkColorScaleAndSentinels()
+    this.setHillshadeOptions()
     const {
       nodataValue,
       tileSize
-    } = this.options;
+    } = this.options
 
     this._renderer = new Renderer(
       this,
@@ -21,91 +21,36 @@ export default class GLOperations {
       this.options.sentinelValues,
       this.options.colorscaleMaxLength,
       this.options.sentinelMaxLength
-    );
+    )
 
-    this._renderer.generateAmbientDirections(this.options.hsAdvAmbientIterations);
+    this._renderer.generateAmbientDirections(this.options.hsAdvAmbientIterations)
     this._renderer.generateSunDirections(
       this.options.hsAdvSoftIterations,
       this.options.hsAdvSunRadiusMultiplier
-    );
+    )
   }
 
-  updateOptions(options) {
+  updateOptions (options) {
     const {
       url: prevUrl,
-      glOperation: prevGlOperation,
       operationUrlA: prevUrlA,
       operationUrlB: prevUrlB,
       operationUrlC: prevUrlC,
       operationUrlD: prevUrlD,
-      operationUrlE: prevUrlE,
-      operationUrlF: prevUrlF,
       colorScale: prevColorScale,
       sentinelValues: prevSentinelValues,
-      filterLowA: prevFilterLowA,
-      filterHighA: prevFilterHighA,
-      filterLowB: prevFilterLowB,
-      filterHighB: prevFilterHighB,
-      filterLowC: prevFilterLowC,
-      filterHighC: prevFilterHighC,
-      filterLowD: prevFilterLowD,
-      filterHighD: prevFilterHighD,
-      filterLowE: prevFilterLowE,
-      filterHighE: prevFilterHighE,
-      filterLowF: prevFilterLowF,
-      filterHighF: prevFilterHighF,
-      multiplierA: prevMultiplierA,
-      multiplierB: prevMultiplierB,
-      multiplierC: prevMultiplierC,
-      multiplierD: prevMultiplierD,
-      multiplierE: prevMultiplierE,
-      multiplierF: prevMultiplierF,
-      multiLayers: prevMultiLayers,
-      hsPregenUrl: prevHsPregenUrl,
       hillshadeType: prevHillshadeType,
-      hsAdvValueScale: prevHsAdvValueScale,
-      hsAdvPixelScale: prevHsAdvPixelScale,
-      hsSimpleSlopescale: prevHsSimpleSlopescale,
-      hsSimpleAzimuth: prevHsSimpleAzimuth,
-      hsSimpleAltitude: prevHsSimpleAltitude,
       hsAdvSoftIterations: prevHsAdvSoftIterations,
       hsAdvAmbientIterations: prevHsAdvAmbientIterations,
       hsAdvSunRadiusMultiplier: prevHsAdvSunRadiusMultiplier,
-      hsAdvFinalSoftMultiplier: prevHsAdvFinalSoftMultiplier,
-      hsAdvFinalAmbientMultiplier: prevHsAdvFinalAmbientMultiplier,
       hsAdvBaselayerUrl: prevHsAdvBaselayerUrl,
-      hsAdvSmoothInput: prevHsAdvSmoothInput,
-      hsAdvSmoothInputKernel: prevHsAdvSmoothInputKernel,
-      contourInterval: prevContourInterval,
-      contourIndexInterval: prevContourIndexInterval,
-      contourLineColor: prevContourLineColor,
-      contourLineWeight: prevContourLineWeight,
-      contourLineIndexWeight: prevContourLineIndexWeight,
-      contourType: prevContourType,
-      contourSmoothLines: prevContourSmoothLines,
-      contourSmoothInput: prevContourSmoothInput,
-      contourSmoothInputKernel: prevContourSmoothInputKernel,
-      contourIlluminatedHighlightColor: prevContourIlluminatedHighlightColor,
-      contourIlluminatedShadowColor: prevContourIlluminatedShadowColor,
-      contourIlluminatedShadowSize: prevContourIlluminatedShadowSize,
-      contourHypso: prevContourHypso,
-      contourHypsoDomain: prevContourHypsoDomain,
-      contourHypsoColors: prevContourHypsoColors,
-      contourBathy: prevContourBathy,
-      contourBathyDomain: prevContourBathyDomain,
-      contourBathyColors: prevContourBathyColors,
-      contourBathyShadowColor: prevContourBathyShadowColor,
-      contourBathyHighlightColor: prevContourBathyHighlightColor,
-      contourIndexLabels: prevContourIndexLabels,
-      contourLabelFont: prevContourLabelFont,
-      contourLabelDistance: prevContourLabelDistance,
       colorscaleMaxLength: prevScaleMaxLength,
-      sentinelMaxLength: prevSentinelMaxLength,
-    } = this.options;
+      sentinelMaxLength: prevSentinelMaxLength
+    } = this.options
     Object.assign(this.options, options)
     // create new renderer if max length of sentinels or colorscale changes
     if (this.options.colorscaleMaxLength !== prevScaleMaxLength || this.options.sentinelMaxLength !== prevSentinelMaxLength) {
-      const tileSize = this._tileSizeAsNumber();
+      const tileSize = this._tileSizeAsNumber()
       const renderer = new Renderer(
         this,
         tileSize,
@@ -114,65 +59,64 @@ export default class GLOperations {
         this.options.sentinelValues,
         this.options.colorscaleMaxLength,
         this.options.sentinelMaxLength
-      );
+      )
 
-      this._renderer.regl.destroy();
+      this._renderer.regl.destroy()
       // @ts-ignore
-      delete this._renderer;
+      delete this._renderer
 
       Object.assign(this, {
         _renderer: renderer
-      });
+      })
     }
-    this._checkColorScaleAndSentinels();
+    this._checkColorScaleAndSentinels()
     if (this.options.colorScale !== prevColorScale) {
-      this._renderer.updateColorscale(this.options.colorScale);
+      this._renderer.updateColorscale(this.options.colorScale)
     }
     if (this.options.sentinelValues !== prevSentinelValues) {
-      this._renderer.updateSentinels(this.options.sentinelValues);
+      this._renderer.updateSentinels(this.options.sentinelValues)
     }
     if (this.options.hsAdvAmbientIterations !== prevHsAdvAmbientIterations) {
-      this._renderer.generateAmbientDirections(this.options.hsAdvAmbientIterations);
+      this._renderer.generateAmbientDirections(this.options.hsAdvAmbientIterations)
     }
     if (
       this.options.hsAdvSoftIterations !== prevHsAdvSoftIterations ||
       this.options.hsAdvSunRadiusMultiplier !== prevHsAdvSunRadiusMultiplier
-      ) {
-      this._renderer.generateSunDirections(this.options.hsAdvSoftIterations, this.options.hsAdvSunRadiusMultiplier);
+    ) {
+      this._renderer.generateSunDirections(this.options.hsAdvSoftIterations, this.options.hsAdvSunRadiusMultiplier)
     }
-    this.setHillshadeOptions();
+    this.setHillshadeOptions()
 
     if (this.options.extraPixelLayers > 0 && this.options.glOperation === 'none') {
-      this._maybeLoadExtraLayers(prevUrlA, prevUrlB, prevUrlC, prevUrlD);
+      this._maybeLoadExtraLayers(prevUrlA, prevUrlB, prevUrlC, prevUrlD)
     }
     // TODO: Fix shader so simple hillshading works ok with larger texture than tileSize
     if (this.options.hillshadeType !== prevHillshadeType) {
       // reduce textureManager size as simple hillshading type currently gets "edges" around the tiles with larger texture.
       if (this.options.hillshadeType === 'simple') {
-        this._renderer.setMaxTextureDimension(this._tileSizeAsNumber());
+        this._renderer.setMaxTextureDimension(this._tileSizeAsNumber())
       } else if (prevHillshadeType === 'simple') {
-        this._renderer.setMaxTextureDimension(this._renderer.findMaxTextureDimension());
+        this._renderer.setMaxTextureDimension(this._renderer.findMaxTextureDimension())
       }
     }
 
     if (this.options.url !== prevUrl) {
       // need to clear tiles so they are not reused with adv.hs.
-      this._renderer.textureManager.clearTiles();
+      this._renderer.textureManager.clearTiles()
     }
 
     if (this.options.hsAdvBaselayerUrl !== prevHsAdvBaselayerUrl) {
       // need to clear tiles so they are not reused
       // TODO: Check why necessary
-      this._renderer.textureManagerHillshade.clearTiles();
+      this._renderer.textureManagerHillshade.clearTiles()
     }
   }
 
-  createTile(coords) {
+  createTile (coords) {
     const {
       extraPixelLayers,
       tileSize,
       url,
-      hsPregenUrl,
       operationUrlA,
       operationUrlB,
       operationUrlC,
@@ -196,95 +140,86 @@ export default class GLOperations {
       multiplierC,
       multiplierD,
       multiplierE,
-      multiplierF,
-    } = this.options;
+      multiplierF
+    } = this.options
 
     // Create a <canvas> element to contain the rendered image.
-    const tileCanvas = document.createElement('canvas');
+    const tileCanvas = document.createElement('canvas')
     // Configure the element.
     Object.assign(tileCanvas, {
       className: 'gl-tile',
       width: tileSize,
-      height: tileSize,
-    });
+      height: tileSize
+    })
 
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
       if (this.options.glOperation === 'none') {
         // Download an extra layer if required
         if (extraPixelLayers === 1) {
           this._fetchTileData(coords, operationUrlA).then((pixelDataA) => {
-            if (this.options.debug) console.log("createTile - extraPixelLayers === 1");
-            tileCanvas.pixelDataA = pixelDataA;
-          });
+            tileCanvas.pixelDataA = pixelDataA
+          })
         }
   
         this._fetchTileData(coords, url).then((pixelData) => {
-          // Render in `renderer`'s WebGL context.
-          if (this.options.debug) console.log("_fetchTileData with no operation");
           let [sourceX, sourceY] = this._renderer.renderTile(
             { coords, pixelData },
             this.options._hillshadeOptions,
-            coords.z,
-          );
+            coords.z
+          )
 
           // Copy pixel data to a property on tile canvas element (for later retrieval).
-          tileCanvas.pixelData = pixelData;
+          tileCanvas.pixelData = pixelData
 
-          this._copyToTileCanvas(tileCanvas, sourceX, sourceY);
+          this._copyToTileCanvas(tileCanvas, sourceX, sourceY)
 
           resolve(tileCanvas)
-        });
+        })
       } else if (this.options.glOperation === 'diff') {
         Promise.all([
           this._fetchTileData(coords, operationUrlA),
-          this._fetchTileData(coords, operationUrlB),
+          this._fetchTileData(coords, operationUrlB)
         ]).then((pixelDataArray) => {
-          // Render in `renderer`'s WebGL context.
-          if (this.options.debug) console.log("_fetchTileData with diff");
-          const pixelDataA = pixelDataArray[0];
-          const pixelDataB = pixelDataArray[1];
+          const pixelDataA = pixelDataArray[0]
+          const pixelDataB = pixelDataArray[1]
           const [sourceX, sourceY, resultEncodedPixels] = this._renderer.renderTileDiff(
             { coords: coords, pixelData: pixelDataA },
-            { coords: coords, pixelData: pixelDataB },
-          );
+            { coords: coords, pixelData: pixelDataB }
+          )
   
-          tileCanvas.pixelData = resultEncodedPixels;
-          tileCanvas.pixelDataA = pixelDataA;
-          tileCanvas.pixelDataB = pixelDataB;
+          tileCanvas.pixelData = resultEncodedPixels
+          tileCanvas.pixelDataA = pixelDataA
+          tileCanvas.pixelDataB = pixelDataB
   
           // Copy contents to tileCanvas.
-          this._copyToTileCanvas(tileCanvas, sourceX, sourceY);
-        });
+          this._copyToTileCanvas(tileCanvas, sourceX, sourceY)
+        })
       } else if (this.options.glOperation === 'multi' && this.options.multiLayers === 1) {
         Promise.all([
           this._fetchTileData(coords, operationUrlA)
         ]).then((pixelDataArray) => {
-          // Render in `renderer`'s WebGL context.
-          if (this.options.debug) console.log("_fetchTileData with multi");
-          const pixelDataA = pixelDataArray[0];
+          const pixelDataA = pixelDataArray[0]
           const [sourceX, sourceY, resultEncodedPixels] = this._renderer.renderTileMulti1(
             { coords: coords, pixelData: pixelDataA },
             filterLowA,
             filterHighA,
-            multiplierA,
-          );
+            multiplierA
+          )
   
           // Copy pixel data to a property on tile canvas element (for later retrieval).
-          tileCanvas.pixelData = resultEncodedPixels;
-          tileCanvas.pixelDataA = pixelDataA;
+          tileCanvas.pixelData = resultEncodedPixels
+          tileCanvas.pixelDataA = pixelDataA
   
           // Copy contents to tileCanvas.
-          this._copyToTileCanvas(tileCanvas, sourceX, sourceY);
-        });
+          this._copyToTileCanvas(tileCanvas, sourceX, sourceY)
+        })
       } else if (this.options.glOperation === 'multi' && this.options.multiLayers === 2) {
         Promise.all([
           this._fetchTileData(coords, operationUrlA),
-          this._fetchTileData(coords, operationUrlB),
+          this._fetchTileData(coords, operationUrlB)
         ]).then((pixelDataArray) => {
-          // Render in `renderer`'s WebGL context.
-          if (this.options.debug) console.log("_fetchTileData with multi");
-          const pixelDataA = pixelDataArray[0];
-          const pixelDataB = pixelDataArray[1];
+          const pixelDataA = pixelDataArray[0]
+          const pixelDataB = pixelDataArray[1]
           const [sourceX, sourceY, resultEncodedPixels] = this._renderer.renderTileMulti2(
             { coords: coords, pixelData: pixelDataA },
             { coords: coords, pixelData: pixelDataB },
@@ -293,28 +228,26 @@ export default class GLOperations {
             filterLowB,
             filterHighB,
             multiplierA,
-            multiplierB,
-          );
+            multiplierB
+          )
   
           // Copy pixel data to a property on tile canvas element (for later retrieval).
-          tileCanvas.pixelData = resultEncodedPixels;
-          tileCanvas.pixelDataA = pixelDataA;
-          tileCanvas.pixelDataB = pixelDataB;
+          tileCanvas.pixelData = resultEncodedPixels
+          tileCanvas.pixelDataA = pixelDataA
+          tileCanvas.pixelDataB = pixelDataB
   
           // Copy contents to tileCanvas.
-          this._copyToTileCanvas(tileCanvas, sourceX, sourceY);
-        });
+          this._copyToTileCanvas(tileCanvas, sourceX, sourceY)
+        })
       } else if (this.options.glOperation === 'multi' && this.options.multiLayers === 3) {
         Promise.all([
           this._fetchTileData(coords, operationUrlA),
           this._fetchTileData(coords, operationUrlB),
-          this._fetchTileData(coords, operationUrlC),
+          this._fetchTileData(coords, operationUrlC)
         ]).then((pixelDataArray) => {
-          // Render in `renderer`'s WebGL context.
-          if (this.options.debug) console.log("_fetchTileData with multi");
-          const pixelDataA = pixelDataArray[0];
-          const pixelDataB = pixelDataArray[1];
-          const pixelDataC = pixelDataArray[2];
+          const pixelDataA = pixelDataArray[0]
+          const pixelDataB = pixelDataArray[1]
+          const pixelDataC = pixelDataArray[2]
           const [sourceX, sourceY, resultEncodedPixels] = this._renderer.renderTileMulti3(
             { coords: coords, pixelData: pixelDataA },
             { coords: coords, pixelData: pixelDataB },
@@ -327,31 +260,29 @@ export default class GLOperations {
             filterHighC,
             multiplierA,
             multiplierB,
-            multiplierC,
-          );
+            multiplierC
+          )
   
           // Copy pixel data to a property on tile canvas element (for later retrieval).
-          tileCanvas.pixelData = resultEncodedPixels;
-          tileCanvas.pixelDataA = pixelDataA;
-          tileCanvas.pixelDataB = pixelDataB;
-          tileCanvas.pixelDataC = pixelDataC;
+          tileCanvas.pixelData = resultEncodedPixels
+          tileCanvas.pixelDataA = pixelDataA
+          tileCanvas.pixelDataB = pixelDataB
+          tileCanvas.pixelDataC = pixelDataC
   
           // Copy contents to tileCanvas.
-          this._copyToTileCanvas(tileCanvas, sourceX, sourceY);
-        });
+          this._copyToTileCanvas(tileCanvas, sourceX, sourceY)
+        })
       } else if (this.options.glOperation === 'multi' && this.options.multiLayers === 4) {
         Promise.all([
           this._fetchTileData(coords, operationUrlA),
           this._fetchTileData(coords, operationUrlB),
           this._fetchTileData(coords, operationUrlC),
-          this._fetchTileData(coords, operationUrlD),
+          this._fetchTileData(coords, operationUrlD)
         ]).then((pixelDataArray) => {
-          // Render in `renderer`'s WebGL context.
-          if (this.options.debug) console.log("_fetchTileData with multi");
-          const pixelDataA = pixelDataArray[0];
-          const pixelDataB = pixelDataArray[1];
-          const pixelDataC = pixelDataArray[2];
-          const pixelDataD = pixelDataArray[3];
+          const pixelDataA = pixelDataArray[0]
+          const pixelDataB = pixelDataArray[1]
+          const pixelDataC = pixelDataArray[2]
+          const pixelDataD = pixelDataArray[3]
           const [sourceX, sourceY, resultEncodedPixels] = this._renderer.renderTileMulti4(
             { coords: coords, pixelData: pixelDataA },
             { coords: coords, pixelData: pixelDataB },
@@ -368,34 +299,32 @@ export default class GLOperations {
             multiplierA,
             multiplierB,
             multiplierC,
-            multiplierD,
-          );
+            multiplierD
+          )
   
           // Copy pixel data to a property on tile canvas element (for later retrieval).
-          tileCanvas.pixelData = resultEncodedPixels;
-          tileCanvas.pixelDataA = pixelDataA;
-          tileCanvas.pixelDataB = pixelDataB;
-          tileCanvas.pixelDataC = pixelDataC;
-          tileCanvas.pixelDataD = pixelDataD;
+          tileCanvas.pixelData = resultEncodedPixels
+          tileCanvas.pixelDataA = pixelDataA
+          tileCanvas.pixelDataB = pixelDataB
+          tileCanvas.pixelDataC = pixelDataC
+          tileCanvas.pixelDataD = pixelDataD
   
           // Copy contents to tileCanvas.
-          this._copyToTileCanvas(tileCanvas, sourceX, sourceY);
-        });
+          this._copyToTileCanvas(tileCanvas, sourceX, sourceY)
+        })
       } else if (this.options.glOperation === 'multi' && this.options.multiLayers === 5) {
         Promise.all([
           this._fetchTileData(coords, operationUrlA),
           this._fetchTileData(coords, operationUrlB),
           this._fetchTileData(coords, operationUrlC),
           this._fetchTileData(coords, operationUrlD),
-          this._fetchTileData(coords, operationUrlE),
+          this._fetchTileData(coords, operationUrlE)
         ]).then((pixelDataArray) => {
-          // Render in `renderer`'s WebGL context.
-          if (this.options.debug) console.log("_fetchTileData with multi");
-          const pixelDataA = pixelDataArray[0];
-          const pixelDataB = pixelDataArray[1];
-          const pixelDataC = pixelDataArray[2];
-          const pixelDataD = pixelDataArray[3];
-          const pixelDataE = pixelDataArray[4];
+          const pixelDataA = pixelDataArray[0]
+          const pixelDataB = pixelDataArray[1]
+          const pixelDataC = pixelDataArray[2]
+          const pixelDataD = pixelDataArray[3]
+          const pixelDataE = pixelDataArray[4]
           const [sourceX, sourceY, resultEncodedPixels] = this._renderer.renderTileMulti5(
             { coords: coords, pixelData: pixelDataA },
             { coords: coords, pixelData: pixelDataB },
@@ -416,20 +345,20 @@ export default class GLOperations {
             multiplierB,
             multiplierC,
             multiplierD,
-            multiplierE,
-          );
+            multiplierE
+          )
   
           // Copy pixel data to a property on tile canvas element (for later retrieval).
-          tileCanvas.pixelData = resultEncodedPixels;
-          tileCanvas.pixelDataA = pixelDataA;
-          tileCanvas.pixelDataB = pixelDataB;
-          tileCanvas.pixelDataC = pixelDataC;
-          tileCanvas.pixelDataD = pixelDataD;
-          tileCanvas.pixelDataE = pixelDataE;
+          tileCanvas.pixelData = resultEncodedPixels
+          tileCanvas.pixelDataA = pixelDataA
+          tileCanvas.pixelDataB = pixelDataB
+          tileCanvas.pixelDataC = pixelDataC
+          tileCanvas.pixelDataD = pixelDataD
+          tileCanvas.pixelDataE = pixelDataE
   
           // Copy contents to tileCanvas.
-          this._copyToTileCanvas(tileCanvas, sourceX, sourceY);
-        });
+          this._copyToTileCanvas(tileCanvas, sourceX, sourceY)
+        })
       } else if (this.options.glOperation === 'multi' && this.options.multiLayers === 6) {
         Promise.all([
           this._fetchTileData(coords, operationUrlA),
@@ -437,16 +366,14 @@ export default class GLOperations {
           this._fetchTileData(coords, operationUrlC),
           this._fetchTileData(coords, operationUrlD),
           this._fetchTileData(coords, operationUrlE),
-          this._fetchTileData(coords, operationUrlF),
+          this._fetchTileData(coords, operationUrlF)
         ]).then((pixelDataArray) => {
-          // Render in `renderer`'s WebGL context.
-          if (this.options.debug) console.log("_fetchTileData with multi");
-          const pixelDataA = pixelDataArray[0];
-          const pixelDataB = pixelDataArray[1];
-          const pixelDataC = pixelDataArray[2];
-          const pixelDataD = pixelDataArray[3];
-          const pixelDataE = pixelDataArray[4];
-          const pixelDataF = pixelDataArray[5];
+          const pixelDataA = pixelDataArray[0]
+          const pixelDataB = pixelDataArray[1]
+          const pixelDataC = pixelDataArray[2]
+          const pixelDataD = pixelDataArray[3]
+          const pixelDataE = pixelDataArray[4]
+          const pixelDataF = pixelDataArray[5]
           const [sourceX, sourceY, resultEncodedPixels] = this._renderer.renderTileMulti6(
             { coords: coords, pixelData: pixelDataA },
             { coords: coords, pixelData: pixelDataB },
@@ -471,49 +398,49 @@ export default class GLOperations {
             multiplierC,
             multiplierD,
             multiplierE,
-            multiplierF,
-          );
+            multiplierF
+          )
   
           // Copy pixel data to a property on tile canvas element (for later retrieval).
-          tileCanvas.pixelData = resultEncodedPixels;
-          tileCanvas.pixelDataA = pixelDataA;
-          tileCanvas.pixelDataB = pixelDataB;
-          tileCanvas.pixelDataC = pixelDataC;
-          tileCanvas.pixelDataD = pixelDataD;
-          tileCanvas.pixelDataE = pixelDataE;
-          tileCanvas.pixelDataF = pixelDataF;
+          tileCanvas.pixelData = resultEncodedPixels
+          tileCanvas.pixelDataA = pixelDataA
+          tileCanvas.pixelDataB = pixelDataB
+          tileCanvas.pixelDataC = pixelDataC
+          tileCanvas.pixelDataD = pixelDataD
+          tileCanvas.pixelDataE = pixelDataE
+          tileCanvas.pixelDataF = pixelDataF
   
           // Copy contents to tileCanvas.
-          this._copyToTileCanvas(tileCanvas, sourceX, sourceY);
-        });
+          this._copyToTileCanvas(tileCanvas, sourceX, sourceY)
+        })
       }
     })
   
   }
 
-  _checkColorScaleAndSentinels() {
+  _checkColorScaleAndSentinels () {
     const {
       colorScale,
       sentinelValues,
       colorscaleMaxLength,
-      sentinelMaxLength,
-    } = this.options;
+      sentinelMaxLength
+    } = this.options
     if (colorScale.length === 0 && sentinelValues.length === 0) {
-      throw new Error('Either `colorScale` or `sentinelValues` must be of non-zero length.');
+      throw new Error('Either `colorScale` or `sentinelValues` must be of non-zero length.')
     }
     if (colorScale.length > colorscaleMaxLength) {
       throw new Error(
-        `Color scale length ${colorScale.length} exceeds the maximum, ${colorscaleMaxLength}.`,
-      );
+        `Color scale length ${colorScale.length} exceeds the maximum, ${colorscaleMaxLength}.`
+      )
     }
     if (sentinelValues.length > sentinelMaxLength) {
       throw new Error(
-        `Sentinel values length ${sentinelValues.length} exceeds the maximum, ${sentinelMaxLength}.`,
-      );
+        `Sentinel values length ${sentinelValues.length} exceeds the maximum, ${sentinelMaxLength}.`
+      )
     }
   }
 
-  setHillshadeOptions() {
+  setHillshadeOptions () {
     this.options._hillshadeOptions = {
       hillshadeType: this.options.hillshadeType,
       hsAdvValueScale: this.options.hsAdvValueScale,
@@ -530,65 +457,65 @@ export default class GLOperations {
       hsAdvBaselayerUrl: this.options.hsAdvBaselayerUrl,
       hsAdvSmoothInput: this.options.hsAdvSmoothInput,
       hsAdvSmoothInputKernel: this.options.hsAdvSmoothInputKernel,
-      hsPregenUrl: this.options.hsPregenUrl,
-    };
+      hsPregenUrl: this.options.hsPregenUrl
+    }
   }
 
-  _tileSizeAsNumber() {
+  _tileSizeAsNumber () {
     return this.options.tileSize
   }
 
-  async _fetchTileData(coords, url, tileFormat = this.options.tileFormat) {
+  async _fetchTileData (coords, url, tileFormat = this.options.tileFormat) {
     if (tileFormat === 'float32' || tileFormat === 'image') {
-      return util.fetchPNGData(this.getTileUrl(coords, url), this.options.nodataValue, this._tileSizeAsNumber());
+      return util.fetchPNGData(this.getTileUrl(coords, url), this.options.nodataValue, this._tileSizeAsNumber())
     } else if (tileFormat === 'dem') {
-      const nodataTile = util.createNoDataTile(this.options.nodataValue, this._tileSizeAsNumber());
-      const imageData = await util.fetchPNGData(this.getTileUrl(coords, url), this.options.nodataValue, this._tileSizeAsNumber());
+      const nodataTile = util.createNoDataTile(this.options.nodataValue, this._tileSizeAsNumber())
+      const imageData = await util.fetchPNGData(this.getTileUrl(coords, url), this.options.nodataValue, this._tileSizeAsNumber())
       if (util.typedArraysAreEqual(imageData, nodataTile)) {
-        return imageData;
+        return imageData
       } else {
-        const rgbaData = this._renderer.renderConvertDem(imageData);
-        return rgbaData;
+        const rgbaData = this._renderer.renderConvertDem(imageData)
+        return rgbaData
       }
     }
-    return util.createNoDataTile(this.options.nodataValue, this._tileSizeAsNumber());
+    return util.createNoDataTile(this.options.nodataValue, this._tileSizeAsNumber())
   }
 
-  _copyToTileCanvas(tile, sourceX, sourceY) {
-    const tileSize = this._tileSizeAsNumber();
-    const tileCanvas2DContext = tile.getContext('2d');
+  _copyToTileCanvas (tile, sourceX, sourceY) {
+    const tileSize = this._tileSizeAsNumber()
+    const tileCanvas2DContext = tile.getContext('2d')
     if (tileCanvas2DContext === null) {
-      throw new Error('Tile canvas 2D context is null.');
+      throw new Error('Tile canvas 2D context is null.')
     }
     // Clear the current contents of the canvas. Otherwise, the new image will be composited with
     // the existing image.
-    tileCanvas2DContext.clearRect(0, 0, tileSize, tileSize);
+    tileCanvas2DContext.clearRect(0, 0, tileSize, tileSize)
     // Copy the image data from the Renderer's canvas to the tile's canvas.
     tileCanvas2DContext.drawImage(
       this._renderer.canvas,
       sourceX, sourceY, tileSize, tileSize, // source canvas offset (x, y) and size (x, y)
-      0, 0, tileSize, tileSize,             // destination canvas offset (x, y) and size (x, y)
-    );
+      0, 0, tileSize, tileSize             // destination canvas offset (x, y) and size (x, y)
+    )
   }
 
-  getTileUrl(coords, url) {
+  getTileUrl (coords, url) {
     return url
       .replace(/{z}/g, String(coords.z))
       .replace(/{x}/g, String(coords.x))
       .replace(/{y}/g, String(coords.y))
   }
 
-  _getPixelScale(coords) {
-    let {bbox: {east, south, west, north}, z: zoom} = coords
-    let pixelScale = 1;
+  _getPixelScale (coords) {
+    let {bbox: {south, north}, z: zoom} = coords
+    let pixelScale = 1
     let lat = (south + north) / 2
     if (this.options.hsAdvPixelScale === 'auto') {
       pixelScale = EARTH_CIRCUMFERENCE * Math.abs(
-          Math.cos(lat / 180 * Math.PI
-        )) / Math.pow(2, zoom + 8);
+        Math.cos(lat / 180 * Math.PI
+        )) / Math.pow(2, zoom + 8)
     } else if (typeof this.options.hsAdvPixelScale === 'number') {
-      pixelScale = this.options.hsAdvPixelScale / (this._tileSizeAsNumber() * (2**zoom));
+      pixelScale = this.options.hsAdvPixelScale / (this._tileSizeAsNumber() * (2 ** zoom))
     }
-    return pixelScale;
+    return pixelScale
   }
 }