Merge pull request #253 from will-moore/scale_bar_lengths

Scale bar lengths
ome · Apr 2, 2019 · eca02d7 · eca02d7
2 parents 762b2ea + e8293a7
commit eca02d7
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 13 deletions.
diff --git a/src/viewers/viewer/controls/ScaleBar.js b/src/viewers/viewer/controls/ScaleBar.js
@@ -21,6 +21,13 @@ import OlMap from 'ol/Map';
 import {listen, unlistenByKey} from 'ol/events';
 import {UNITS_LENGTH} from '../globals';
 
+/**
+ * For a given pixel unit, e.g. microns, we want the scalebar to be one of
+ * these lengths.
+ */
+const SNAP_TO_LENGTHS = [1, 2, 5, 10, 20, 50,
+                         100, 200, 500, 1000, 2000, 5000, 10000];
+
 /**
  * @classdesc
  * Extends the built ScaleLine
@@ -36,11 +43,11 @@ class ScaleBar extends ScaleLine {
         super(opt_options);
 
         /**
-         * default scale bar width in pixels
+         * minimum scale bar width in pixels
          * @type {number}
          * @private
          */
-        this.bar_width_ = 100;
+        this.bar_min_width_ = 100;
 
         /**
          * the scalebar 'drag' listener
@@ -102,7 +109,9 @@ class ScaleBar extends ScaleLine {
 
         var micronsPerPixel = viewState.projection.getMetersPerUnit();
         var resolution = viewState.resolution;
-        var scaleBarLengthInUnits = micronsPerPixel * this.bar_width_ * resolution;
+
+        // first find the Units and Length for min-length scalebar
+        var scaleBarLengthInUnits = micronsPerPixel * this.bar_min_width_ * resolution;
         var symbol = '\u00B5m';
         for (var u=0;u<UNITS_LENGTH.length;u++) {
             var unit = UNITS_LENGTH[u];
@@ -113,16 +122,20 @@ class ScaleBar extends ScaleLine {
             }
         }
 
-        var html = scaleBarLengthInUnits.toFixed(2) + ' ' + symbol;
-        if (this.renderedHTML_ !== html) {
-            this.innerElement_.innerHTML = html;
-            this.renderedHTML_ = html;
+        // Find a length value BIGGER than our min target length
+        var value = 0;
+        let pixels = 0;
+        for (let snap=0; snap<SNAP_TO_LENGTHS.length; snap++) {
+            value = SNAP_TO_LENGTHS[snap];
+            if (value >= scaleBarLengthInUnits) {
+                pixels = this.bar_min_width_ * value / scaleBarLengthInUnits;
+                break;
+            }
         }
 
-        if (this.renderedWidth_ != this.bar_width_) {
-            this.innerElement_.style.width = this.bar_width_ + 'px';
-            this.renderedWidth_ = this.bar_width_;
-        }
+        var html = value + ' ' + symbol;
+        this.innerElement_.innerHTML = html;
+        this.innerElement_.style.width = pixels + 'px';
 
         if (!this.renderedVisible_) {
             this.element.style.display = '';

diff --git a/src/viewers/viewer/globals.js b/src/viewers/viewer/globals.js
@@ -222,7 +222,7 @@ export const PROJECTION = {
  */
 export const UNITS_LENGTH = [
     { unit: 'angstrom',
-      threshold: 0.1, multiplier: 10000, symbol: '\u212B'},
+      threshold: 0.01, multiplier: 10000, symbol: '\u212B'},
     { unit: 'nanometer',
       threshold: 1, multiplier: 1000, symbol: 'nm'},
     { unit: 'micron',
@@ -232,7 +232,9 @@ export const UNITS_LENGTH = [
     { unit: 'centimeter',
       threshold: 1000000, multiplier: 0.0001, symbol: 'cm'},
     { unit: 'meter',
-      threshold: 100000000, multiplier: 0.000001, symbol: 'm'}
+      threshold: 1000000000, multiplier: 0.000001, symbol: 'm'},
+    { unit: 'kilometer',
+      threshold: Infinity, multiplier: 0.000000001, symbol: 'km'},
  ];
 
 /**