Rename props, localization, fix example

examples/scale-line.js

@@ -4,6 +4,12 @@ import {defaults as defaultControls, ScaleLine} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 
+const unitsSelect = document.getElementById('units');
+const typeSelect = document.getElementById('type');
+const stepsSelect = document.getElementById('steps');
+const scaleTextCheckbox = document.getElementById('showScaleText');
+const showScaleTextDiv = document.getElementById('showScaleTextDiv');
+
 let scaleType = 'scaleline';
 let scaleBarSteps = 4;
 let scaleBarText = true;
@@ -11,14 +17,17 @@ let control;
 
 function scaleControl() {
   if (scaleType === 'scaleline') {
-    control = new ScaleLine();
+    control = new ScaleLine({
+      units: unitsSelect.value
+    });
     return control;
   }
   control = new ScaleLine({
-    scaleBar: true,
+    units: unitsSelect.value,
-    scaleBarSteps: scaleBarSteps,
+    bar: true,
-    scaleBarText: scaleBarText,
+    steps: scaleBarSteps,
-    minWidth: 200
+    text: scaleBarText,
+    minWidth: 140
   });
   return control;
 }
@@ -38,11 +47,6 @@ const map = new Map({
   })
 });
 
-const unitsSelect = document.getElementById('units');
-const typeSelect = document.getElementById('type');
-const stepsSelect = document.getElementById('steps');
-const scaleTextCheckbox = document.getElementById('showScaleText');
-const showScaleTextDiv = document.getElementById('showScaleTextDiv');
 function onChange() {
   control.setUnits(unitsSelect.value);
 }
@@ -74,4 +78,3 @@ unitsSelect.addEventListener('change', onChange);
 typeSelect.addEventListener('change', onChangeType);
 stepsSelect.addEventListener('change', onChangeSteps);
 scaleTextCheckbox.addEventListener('change', onChangeScaleText);
-onChange();

src/ol/control/ScaleLine.js

@@ -45,11 +45,11 @@ const LEADING_DIGITS = [1, 2, 5];
  * @property {HTMLElement|string} [target] Specify a target if you want the control
  * to be rendered outside of the map's viewport.
  * @property {Units|string} [units='metric'] Units.
- * @property {boolean} [scaleBar=false] Render scalebars instead of a line.
+ * @property {boolean} [bar=false] Render scalebars instead of a line.
- * @property {number} [scaleBarSteps=4] Number of steps the scalebar should use. Use even numbers
+ * @property {number} [steps=4] Number of steps the scalebar should use. Use even numbers
- * for best results. Only useful when `scaleBar` is `true`.
+ * for best results. Only applies when `bar` is `true`.
- * @property {boolean} [scaleBarText=false] Render a scale ontop of the scalebar. Only useful
+ * @property {boolean} [text=false] Render the text scale above of the scalebar. Only applies
- * when `scaleBar` is `true`.
+ * when `bar` is `true`.
  */
 
 
@@ -62,7 +62,7 @@ const LEADING_DIGITS = [1, 2, 5];
  * viewport center cannot be calculated in the view projection.
  * By default the scale line will show in the bottom left portion of the map,
  * but this can be changed by using the css selector `.ol-scale-line`.
- * When specifying `scaleBar` as `true`, a scalebar will be rendered instead
+ * When specifying `bar` as `true`, a scalebar will be rendered instead
  * of a scaleline.
  *
  * @api
@@ -77,7 +77,7 @@ class ScaleLine extends Control {
     const options = opt_options ? opt_options : {};
 
     const className = options.className !== undefined ? options.className :
-      options.scaleBar !== undefined ? 'ol-scale-bar' : 'ol-scale-line';
+      options.bar !== undefined ? 'ol-scale-bar' : 'ol-scale-line';
 
     super({
       element: document.createElement('div'),
@@ -135,19 +135,19 @@ class ScaleLine extends Control {
      * @private
      * @type {boolean}
      */
-    this.scaleBar_ = options.scaleBar || false;
+    this.scaleBar_ = options.bar || false;
 
     /**
      * @private
      * @type {number}
      */
-    this.scaleBarSteps_ = options.scaleBarSteps || 4;
+    this.scaleBarSteps_ = options.steps || 4;
 
     /**
      * @private
      * @type {boolean}
      */
-    this.scaleBarText_ = options.scaleBarText || false;
+    this.scaleBarText_ = options.text || false;
 
   }
 
@@ -315,8 +315,7 @@ class ScaleLine extends Control {
    * @returns {string} The stringified HTML of the scalebar.
    */
   createScaleBar(width, scale, suffix) {
-    let mapScale = Math.round(this.getScaleForResolution());
+    const mapScale = '1 : ' + Math.round(this.getScaleForResolution()).toLocaleString();
-    mapScale = '1 : ' + mapScale.toLocaleString().replace(/,/g, '.');
     const scaleSteps = [];
     const stepWidth = width / this.scaleBarSteps_;
     let backgroundColor = '#ffffff';