Merge pull request #13943 from MoonE/scaleline

Scaleline

examples/scale-line.css

@@ -0,0 +1,15 @@
+#scaleBarOptions {
+  display: none;
+}
+
+input[type=range] {
+  vertical-align: middle;
+}
+
+.ol-scale-bar-inverted .ol-scale-singlebar-even {
+  background-color: var(--ol-background-color);
+}
+
+.ol-scale-bar-inverted .ol-scale-singlebar-odd {
+  background-color: var(--ol-subtle-foreground-color);;
+}

examples/scale-line.html

@@ -7,6 +7,7 @@ docs: >
 tags: "scale-line, openstreetmap"
 ---
 <div id="map" class="map"></div>
+<label for="units">Units:</label>
 <select id="units">
   <option value="degrees">degrees</option>
   <option value="imperial">imperial inch</option>
@@ -15,18 +16,17 @@ tags: "scale-line, openstreetmap"
   <option value="metric" selected>metric</option>
 </select>
 
+<label for="type">Type:</label>
 <select id="type">
   <option value="scaleline">ScaleLine</option>
   <option value="scalebar">ScaleBar</option>
 </select>
 
-<select id="steps" style="display:none">
+<div id="scaleBarOptions">
-  <option value=2>2 steps</option>
+  <label for="steps">Steps:</label>
-  <option value=4 selected>4 steps</option>
+  <input id="steps" type="range" value="4" min="1" max="8">
-  <option value=6>6 steps</option>
-  <option value=8>8 steps</option>
-</select>
 
-<div id="showScaleTextDiv" style="display:none">
   <label><input type="checkbox" id="showScaleText" checked> Show scale text</label>
+
+  <label><input type="checkbox" id="invertColors"> Invert colors</label>
 </div>

examples/scale-line.js

@@ -4,31 +4,32 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import View from '../src/ol/View.js';
 import {ScaleLine, defaults as defaultControls} from '../src/ol/control.js';
 
+const scaleBarOptionsContainer = document.getElementById('scaleBarOptions');
 const unitsSelect = document.getElementById('units');
 const typeSelect = document.getElementById('type');
-const stepsSelect = document.getElementById('steps');
+const stepsRange = document.getElementById('steps');
 const scaleTextCheckbox = document.getElementById('showScaleText');
-const showScaleTextDiv = document.getElementById('showScaleTextDiv');
+const invertColorsCheckbox = document.getElementById('invertColors');
 
-let scaleType = 'scaleline';
-let scaleBarSteps = 4;
-let scaleBarText = true;
 let control;
 
 function scaleControl() {
-  if (scaleType === 'scaleline') {
+  if (typeSelect.value === 'scaleline') {
     control = new ScaleLine({
       units: unitsSelect.value,
     });
-    return control;
+    scaleBarOptionsContainer.style.display = 'none';
+  } else {
+    control = new ScaleLine({
+      units: unitsSelect.value,
+      bar: true,
+      steps: parseInt(stepsRange.value, 10),
+      text: scaleTextCheckbox.checked,
+      minWidth: 140,
+    });
+    onInvertColorsChange();
+    scaleBarOptionsContainer.style.display = 'block';
   }
-  control = new ScaleLine({
-    units: unitsSelect.value,
-    bar: true,
-    steps: scaleBarSteps,
-    text: scaleBarText,
-    minWidth: 140,
-  });
   return control;
 }
 const map = new Map({
@@ -45,34 +46,21 @@ const map = new Map({
   }),
 });
 
-function onChange() {
+function reconfigureScaleLine() {
+  map.removeControl(control);
+  map.addControl(scaleControl());
+}
+function onChangeUnit() {
   control.setUnits(unitsSelect.value);
 }
-function onChangeType() {
+function onInvertColorsChange() {
-  scaleType = typeSelect.value;
+  control.element.classList.toggle(
-  if (typeSelect.value === 'scalebar') {
+    'ol-scale-bar-inverted',
-    stepsSelect.style.display = 'inline';
+    invertColorsCheckbox.checked
-    showScaleTextDiv.style.display = 'inline';
+  );
-    map.removeControl(control);
-    map.addControl(scaleControl());
-  } else {
-    stepsSelect.style.display = 'none';
-    showScaleTextDiv.style.display = 'none';
-    map.removeControl(control);
-    map.addControl(scaleControl());
-  }
 }
-function onChangeSteps() {
+unitsSelect.addEventListener('change', onChangeUnit);
-  scaleBarSteps = parseInt(stepsSelect.value, 10);
+typeSelect.addEventListener('change', reconfigureScaleLine);
-  map.removeControl(control);
+stepsRange.addEventListener('input', reconfigureScaleLine);
-  map.addControl(scaleControl());
+scaleTextCheckbox.addEventListener('change', reconfigureScaleLine);
-}
+invertColorsCheckbox.addEventListener('change', onInvertColorsChange);
-function onChangeScaleText() {
-  scaleBarText = scaleTextCheckbox.checked;
-  map.removeControl(control);
-  map.addControl(scaleControl());
-}
-unitsSelect.addEventListener('change', onChange);
-typeSelect.addEventListener('change', onChangeType);
-stepsSelect.addEventListener('change', onChangeSteps);
-scaleTextCheckbox.addEventListener('change', onChangeScaleText);

src/ol/control/ScaleLine.js

@@ -39,7 +39,8 @@ const DEFAULT_DPI = 25.4 / 0.28;
 
 /**
  * @typedef {Object} Options
- * @property {string} [className='ol-scale-line'] CSS Class name.
+ * @property {string} [className] CSS class name. The default is `ol-scale-bar` when configured with
+ * `bar: true`. Otherwise the default is `ol-scale-line`.
  * @property {number} [minWidth=64] Minimum width in pixels at the OGC default dpi. The width will be
  * adjusted to match the dpi used.
  * @property {number} [maxWidth] Maximum width in pixels at the OGC default dpi. The width will be
@@ -79,15 +80,11 @@ class ScaleLine extends Control {
   constructor(opt_options) {
     const options = opt_options ? opt_options : {};
 
-    const className =
+    const element = document.createElement('div');
-      options.className !== undefined
+    element.style.pointerEvents = 'none';
-        ? options.className
-        : options.bar
-        ? 'ol-scale-bar'
-        : 'ol-scale-line';
 
     super({
-      element: document.createElement('div'),
+      element: element,
       render: options.render,
       target: options.target,
     });
@@ -107,6 +104,13 @@ class ScaleLine extends Control {
      */
     this.un;
 
+    const className =
+      options.className !== undefined
+        ? options.className
+        : options.bar
+        ? 'ol-scale-bar'
+        : 'ol-scale-line';
+
     /**
      * @private
      * @type {HTMLElement}
@@ -334,12 +338,9 @@ class ScaleLine extends Control {
       previousDecimalCount = decimalCount;
       ++i;
     }
-    let html;
+    const html = this.scaleBar_
-    if (this.scaleBar_) {
+      ? this.createScaleBar(width, count, suffix)
-      html = this.createScaleBar(width, count, suffix);
+      : count.toFixed(decimalCount < 0 ? -decimalCount : 0) + ' ' + suffix;
-    } else {
-      html = count.toFixed(decimalCount < 0 ? -decimalCount : 0) + ' ' + suffix;
-    }
 
     if (this.renderedHTML_ != html) {
       this.innerElement_.innerHTML = html;
@@ -365,87 +366,54 @@ class ScaleLine extends Control {
    * @return {string} The stringified HTML of the scalebar.
    */
   createScaleBar(width, scale, suffix) {
+    const resolutionScale = this.getScaleForResolution();
     const mapScale =
-      '1 : ' + Math.round(this.getScaleForResolution()).toLocaleString();
+      resolutionScale < 1
-    const scaleSteps = [];
+        ? Math.round(1 / resolutionScale).toLocaleString() + ' : 1'
-    const stepWidth = width / this.scaleBarSteps_;
+        : '1 : ' + Math.round(resolutionScale).toLocaleString();
-    let backgroundColor = 'ol-scale-singlebar-odd';
+    const steps = this.scaleBarSteps_;
-    for (let i = 0; i < this.scaleBarSteps_; i++) {
+    const stepWidth = width / steps;
-      if (i === 0) {
+    const scaleSteps = [this.createMarker('absolute')];
-        // create the first marker at position 0
+    for (let i = 0; i < steps; ++i) {
-        scaleSteps.push(this.createMarker('absolute', i));
+      const cls =
-      }
+        i % 2 === 0 ? 'ol-scale-singlebar-odd' : 'ol-scale-singlebar-even';
       scaleSteps.push(
         '<div>' +
           '<div ' +
-          'class="ol-scale-singlebar ' +
+          `class="ol-scale-singlebar ${cls}" ` +
-          backgroundColor +
+          `style="width: ${stepWidth}px;"` +
-          '" ' +
-          'style=' +
-          '"width: ' +
-          stepWidth +
-          'px;"' +
           '>' +
           '</div>' +
-          this.createMarker('relative', i) +
+          this.createMarker('relative') +
-          /*render text every second step, except when only 2 steps */
+          // render text every second step, except when only 2 steps
-          (i % 2 === 0 || this.scaleBarSteps_ === 2
+          (i % 2 === 0 || steps === 2
             ? this.createStepText(i, width, false, scale, suffix)
             : '') +
           '</div>'
       );
-      if (i === this.scaleBarSteps_ - 1) {
-        {
-          /*render text at the end */
-        }
-        scaleSteps.push(this.createStepText(i + 1, width, true, scale, suffix));
-      }
-      // switch style of steps
-      backgroundColor =
-        backgroundColor === 'ol-scale-singlebar-odd'
-          ? 'ol-scale-singlebar-even'
-          : 'ol-scale-singlebar-odd';
     }
+    // render text at the end
+    scaleSteps.push(this.createStepText(steps, width, true, scale, suffix));
 
-    let scaleBarText;
+    const scaleBarText = this.scaleBarText_
-    if (this.scaleBarText_) {
+      ? `<div class="ol-scale-text" style="width: ${width}px;">` +
-      scaleBarText =
-        '<div ' +
-        'class="ol-scale-text" ' +
-        'style="width: ' +
-        width +
-        'px;">' +
         mapScale +
-        '</div>';
+        '</div>'
-    } else {
+      : '';
-      scaleBarText = '';
+    return scaleBarText + scaleSteps.join('');
-    }
-    const container =
-      '<div ' +
-      'style="display: flex;">' +
-      scaleBarText +
-      scaleSteps.join('') +
-      '</div>';
-    return container;
   }
 
   /**
    * Creates a marker at given position
-   * @param {string} position The position, absolute or relative
+   * @param {'absolute'|'relative'} position The position, absolute or relative
-   * @param {number} i The iterator
    * @return {string} The stringified div containing the marker
    */
-  createMarker(position, i) {
+  createMarker(position) {
     const top = position === 'absolute' ? 3 : -10;
     return (
       '<div ' +
       'class="ol-scale-step-marker" ' +
-      'style="position: ' +
+      `style="position: ${position}; top: ${top}px;"` +
-      position +
-      ';' +
-      'top: ' +
-      top +
-      'px;"' +
       '></div>'
     );
   }
@@ -469,19 +437,11 @@ class ScaleLine extends Control {
       '<div ' +
       'class="ol-scale-step-text" ' +
       'style="' +
-      'margin-left: ' +
+      `margin-left: ${margin}px;` +
-      margin +
+      `text-align: ${i === 0 ? 'left' : 'center'};` +
-      'px;' +
+      `min-width: ${minWidth}px;` +
-      'text-align: ' +
+      `left: ${isLast ? width + 'px' : 'unset'};` +
-      (i === 0 ? 'left' : 'center') +
+      '">' +
-      '; ' +
-      'min-width: ' +
-      minWidth +
-      'px;' +
-      'left: ' +
-      (isLast ? width + 'px' : 'unset') +
-      ';"' +
-      '>' +
       lengthString +
       '</div>'
     );
@@ -500,7 +460,7 @@ class ScaleLine extends Control {
     );
     const dpi = this.dpi_ || DEFAULT_DPI;
     const inchesPerMeter = 1000 / 25.4;
-    return parseFloat(resolution.toString()) * inchesPerMeter * dpi;
+    return resolution * inchesPerMeter * dpi;
   }
 
   /**

src/ol/ol.css

@@ -41,20 +41,16 @@
   transition: all 0.25s;
 }
 
-.ol-scale-singlebar-even {
-  background-color: var(--ol-subtle-foreground-color);
-}
-
-.ol-scale-singlebar-odd {
-  background-color: var(--ol-background-color);
-}
-
 .ol-scale-bar {
   position: absolute;
   bottom: 8px;
   left: 8px;
 }
 
+.ol-scale-bar-inner {
+  display: flex;
+}
+
 .ol-scale-step-marker {
   width: 1px;
   height: 15px;
@@ -89,6 +85,14 @@
   border: 1px solid var(--ol-foreground-color);
 }
 
+.ol-scale-singlebar-even {
+  background-color: var(--ol-subtle-foreground-color);
+}
+
+.ol-scale-singlebar-odd {
+  background-color: var(--ol-background-color);
+}
+
 .ol-unsupported {
   display: none;
 }