Added scalebar option to ol.control.scaleline

examples/scale-line.js

@@ -4,12 +4,27 @@ 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';
 
+let scaleType = 'scaleline';
+let scaleBarSteps = 4;
+let scaleBarText = true;
+let control;
 
-const scaleLineControl = new ScaleLine();
-
+function scaleControl() {
+  if (scaleType === 'scaleline') {
+    control = new ScaleLine();
+    return control;
+  }
+  control = new ScaleLine({
+    scaleBar: true,
+    scaleBarSteps: scaleBarSteps,
+    scaleBarText: scaleBarText,
+    minWidth: 200
+  });
+  return control;
+}
 const map = new Map({
   controls: defaultControls().extend([
-    scaleLineControl
+    scaleControl()
   ]),
   layers: [
     new TileLayer({
@@ -23,10 +38,40 @@ 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() {
-  scaleLineControl.setUnits(unitsSelect.value);
+  control.setUnits(unitsSelect.value);
+}
+function onChangeType() {
+  scaleType = typeSelect.value;
+  if (typeSelect.value === 'scalebar') {
+    stepsSelect.style.display = 'inline';
+    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() {
+  scaleBarSteps = parseInt(stepsSelect.value, 10);
+  map.removeControl(control);
+  map.addControl(scaleControl());
+}
+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);
 onChange();