gridviz 3.0.16 → 3.0.17

package/package.json

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

package/src/button/ZoomButtons.js

@@ -11,80 +11,80 @@ export class ZoomButtons extends Button {
      * @param {Object} opts
      */
     constructor(opts) {
-        super(opts);
-    
-        this.onZoom = opts.onZoom; // custom user event handler
-        this.delta = opts.delta || 0.2;
-    
+        super(opts)
+
+        this.onZoom = opts.onZoom // custom user event handler
+        this.delta = opts.delta || 0.2
+
         // Create zoom in button
-        this.zoomInBtn = document.createElement('a');
-        this.zoomInBtn.id = 'zoom-in';
-        this.zoomInBtn.className = 'gridviz-zoom-button';
-        this.zoomInBtn.title = 'Zoom in';
-        this.zoomInBtn.textContent = '+';
+        this.zoomInBtn = document.createElement('a')
+        this.zoomInBtn.id = 'zoom-in'
+        this.zoomInBtn.className = 'gridviz-zoom-button'
+        this.zoomInBtn.title = 'Zoom in'
+        this.zoomInBtn.textContent = '+'
         this.zoomInBtn.addEventListener('click', (e) => {
-            this.zoomIn(e);
-        });
+            this.zoomIn(e)
+        })
         this.zoomInBtn.addEventListener('mouseover', () => {
-            this.zoomInBtn.style.backgroundColor = 'lightgrey';
-        });
+            this.zoomInBtn.style.backgroundColor = 'lightgrey'
+        })
         this.zoomInBtn.addEventListener('mouseout', () => {
-            this.zoomInBtn.style.backgroundColor = '#ffffff';
-        });
-    
+            this.zoomInBtn.style.backgroundColor = '#ffffff'
+        })
+
         // Create zoom out button
-        this.zoomOutBtn = document.createElement('a');
-        this.zoomOutBtn.id = 'zoom-out';
-        this.zoomOutBtn.className = 'gridviz-zoom-button';
-        this.zoomOutBtn.title = 'Zoom out';
-        this.zoomOutBtn.textContent = '-';
+        this.zoomOutBtn = document.createElement('a')
+        this.zoomOutBtn.id = 'zoom-out'
+        this.zoomOutBtn.className = 'gridviz-zoom-button'
+        this.zoomOutBtn.title = 'Zoom out'
+        this.zoomOutBtn.textContent = '-'
         this.zoomOutBtn.addEventListener('click', (e) => {
-            this.zoomOut(e);
-        });
+            this.zoomOut(e)
+        })
         this.zoomOutBtn.addEventListener('mouseover', () => {
-            this.zoomOutBtn.style.backgroundColor = 'lightgrey';
-        });
+            this.zoomOutBtn.style.backgroundColor = 'lightgrey'
+        })
         this.zoomOutBtn.addEventListener('mouseout', () => {
-            this.zoomOutBtn.style.backgroundColor = '#ffffff';
-        });
-    
+            this.zoomOutBtn.style.backgroundColor = '#ffffff'
+        })
+
         // Set common styles for buttons
-        const buttons = [this.zoomInBtn, this.zoomOutBtn];
+        const buttons = [this.zoomInBtn, this.zoomOutBtn]
         buttons.forEach((btn, index) => {
-            btn.style.alignItems = 'center';
-            btn.style.justifyContent = 'center';
-            btn.style.display = 'flex';
-            btn.style.border = 'none';
-            btn.style.color = 'black';
-            btn.style.textAlign = 'center';
-            btn.style.textDecoration = 'none';
-            btn.style.padding = '4px';
-            btn.style.fontSize = '20px';
-            btn.style.fontWeight = 'bold';
-            btn.style.userSelect = 'none';
-            btn.style.backgroundColor = '#ffffff';
-            if (index === 0) btn.style.borderBottom = '1px solid grey'; // Zoom in button only
-        });
-    
+            btn.style.alignItems = 'center'
+            btn.style.justifyContent = 'center'
+            btn.style.display = 'flex'
+            btn.style.border = 'none'
+            btn.style.color = 'black'
+            btn.style.textAlign = 'center'
+            btn.style.textDecoration = 'none'
+            btn.style.padding = '4px'
+            btn.style.fontSize = '24px'
+            btn.style.fontWeight = 'bold'
+            btn.style.userSelect = 'none'
+            btn.style.backgroundColor = '#ffffff'
+            if (index === 0) btn.style.borderBottom = '1px solid grey' // Zoom in button only
+        })
+
         // Unset parent class height and display for dual buttons
-        this.style('height', 'unset');
-        this.style('display', 'unset');
-    
+        this.style('height', 'unset')
+        this.style('display', 'unset')
+
         // Set position
         if (opts.x) {
-            this.style('left', opts.x + 'px');
+            this.style('left', opts.x + 'px')
         } else {
-            this.style('right', '10px');
+            this.style('right', '10px')
         }
         if (opts.y) {
-            this.style('top', opts.y + 'px');
+            this.style('top', opts.y + 'px')
         } else {
-            this.style('top', '10px');
+            this.style('top', '10px')
         }
-    
+
         // Append buttons to the container
-        this.div.node().appendChild(this.zoomInBtn);
-        this.div.node().appendChild(this.zoomOutBtn);
+        this.div.node().appendChild(this.zoomInBtn)
+        this.div.node().appendChild(this.zoomOutBtn)
     }
 
     /* Zoom in */

package/src/core/Map.js

@@ -174,8 +174,7 @@ export class Map {
 
             //set layer alpha and blend mode
             this.geoCanvas.offscreenCtx.globalAlpha = layer.alpha ? layer.alpha(z) : 1.0
-            if (layer.blendOperation)
-                this.geoCanvas.offscreenCtx.globalCompositeOperation = layer.blendOperation(z)
+            if (layer.blendOperation) this.geoCanvas.offscreenCtx.globalCompositeOperation = layer.blendOperation(z)
 
             //set affin transform to draw with geographical coordinates
             this.geoCanvas.setCanvasTransform()
@@ -290,8 +289,8 @@ export class Map {
             /** @type {import("./Layer.js").Layer} */
             const layer = this.layers[i]
             if (layer.visible && !layer.visible(z)) continue
+            if (layer.cellInfoHTML === 'none') continue // this is necessary in order to not show tooltips for layers 'on top' (e.g. population circles on top of squares)
             if (!layer.cellInfoHTML) continue
-            //if (layer.cellInfoHTML === 'none') continue
             if (!layer.getDataset) continue
             const dsc = layer.getDataset(z)
             if (!dsc) continue

package/src/utils/utils.js

@@ -7,7 +7,7 @@
  * @param {number} v the value
  * @param {Array.<number>} breaks the breaks
  * @returns The class id, from 0 to breaks.length
- * @deprecated use getClassifier instead
+ * @deprecated use getClassifier instead.
  */
 export function getClass(v, breaks) {
     if (!breaks) return