gridviz 3.0.21 → 3.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.21",
+    "version": "3.0.23",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/layer/BackgroundLayer.js

@@ -20,7 +20,8 @@ export class BackgroundLayer extends Layer {
         super(opts)
         opts = opts || {}
 
-        /** The image cache, indexed by z/y/x */
+        /** The image cache, indexed by z/y/x
+         * @private */
         this.cache = {}
 
         /**
@@ -29,18 +30,31 @@ export class BackgroundLayer extends Layer {
         /** @type {function(number,number,number):string} */
         this.urlFun = opts.urlFun || ((x, y, z) => this.url + z + '/' + x + '/' + y + '.png')
 
-        /** @type {Array.<number>} */
+        /** The ground resolutions of the zoom levels, starting from the smallest (most zoomed-out, usually 0) to the largest (most zoomed-in).
+         * Usually divided by 2 for each zoom level increment.
+         * @type {Array.<number>} */
         this.resolutions = opts.resolutions
         if (!this.resolutions || this.resolutions.length == 0)
             throw new Error('No resolutions provided for background layer')
 
-        /** @type {number} */
+        /** The tile size, in number of pixels
+         * @type {number} */
         this.nbPix = opts.nbPix || 256
-        /** CRS coordinates of top left corner
+
+        /** CRS coordinates of top left corner of the top left tile, the one with code /0/0.png.
          * @type {Array.<number>} */
         this.origin = opts.origin || [0, 0]
-        /** @type {number} */
+
+        /** The code of the smallest (most zoomed-out) zoom level, in case it is not 0.
+         * @type {number} */
         this.z0 = opts.z0 || 0
+
+        /** A coefficient to adjust the backgroun resolution with the screen resolution.
+         *  If the background images are too pixelised, reduce the value.
+         *  If there are too many images to download, increase the value.
+         *  Default value is 1.0
+         * @type {number} */
+        this.pixelationCoefficient = opts.pixelationCoefficient || 1.0
     }
 
     /**
@@ -60,7 +74,7 @@ export class BackgroundLayer extends Layer {
     }
 
     /**
-     * Get z/x/y cache data.
+     * Put image in cache.
      * @param {HTMLImageElement|string} img
      * @param {number} z
      * @param {number} x
@@ -86,18 +100,15 @@ export class BackgroundLayer extends Layer {
 
         //
         const z = geoCanvas.view.z
-        const x0 = this.origin[0],
-            y0 = this.origin[1]
+        const x0 = this.origin[0], y0 = this.origin[1]
 
         //get zoom level and resolution
         let z_ = 0
-        for (z_ = 0; z_ < this.resolutions.length; z_++) if (this.resolutions[z_] < z) break
+        for (z_ = 0; z_ < this.resolutions.length; z_++) if (this.resolutions[z_] < z * this.pixelationCoefficient) break
         z_ -= 1
         z_ = Math.max(0, z_)
         z_ = Math.min(z_, this.resolutions.length - 1)
-        //console.log(this.resolutions.length, z)
         const res = this.resolutions[z_]
-
         z_ += this.z0
 
         const sizeG = this.nbPix * res
@@ -117,7 +128,7 @@ export class BackgroundLayer extends Layer {
                 //get image
                 let img = this.get(z_, x, y)
 
-                //load image
+                //no image: load image from URL
                 if (!img) {
                     const img = new Image()
                     this.put(img, z_, x, y)
@@ -132,7 +143,7 @@ export class BackgroundLayer extends Layer {
                     continue
                 }
 
-                //case when no image
+                //case when no image available
                 if (img === 'failed') continue
                 if (!(img instanceof HTMLImageElement)) {
                     console.log(img)

package/src/legend/ColorDiscreteLegend.js

@@ -80,7 +80,7 @@ export class ColorDiscreteLegend extends Legend {
         for (let i = 1; i < nb; i++) {
             let label = breaks[i - 1]
             if (isNaN(label) || label == undefined) continue
-            if (this.labelFormat) label = this.labelFormat(label)
+            if (this.labelFormat) label = this.labelFormat(label, i)
 
             //label
             svg.append('text')