Cleanup scale-line example

examples/scale-line.css

@@ -0,0 +1,3 @@
+#scaleBarOptions {
+  display: none;
+}

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,19 @@ 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>
+  <select id="steps">
-  <option value=4 selected>4 steps</option>
+    <option value=2>2 steps</option>
-  <option value=6>6 steps</option>
+    <option value=4 selected>4 steps</option>
-  <option value=8>8 steps</option>
+    <option value=6>6 steps</option>
-</select>
+    <option value=8>8 steps</option>
+  </select>
 
-<div id="showScaleTextDiv" style="display:none">
   <label><input type="checkbox" id="showScaleText" checked> Show scale text</label>
 </div>

examples/scale-line.js

@@ -4,31 +4,30 @@ 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 scaleTextCheckbox = document.getElementById('showScaleText');
-const showScaleTextDiv = document.getElementById('showScaleTextDiv');
 
-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(stepsSelect.value, 10),
+      text: scaleTextCheckbox.checked,
+      minWidth: 140,
+    });
+    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 +44,14 @@ const map = new Map({
   }),
 });
 
-function onChange() {
+function reconfigureScaleLine() {
+  map.removeControl(control);
+  map.addControl(scaleControl());
+}
+function onChangeUnit() {
   control.setUnits(unitsSelect.value);
 }
-function onChangeType() {
+unitsSelect.addEventListener('change', onChangeUnit);
-  scaleType = typeSelect.value;
+typeSelect.addEventListener('change', reconfigureScaleLine);
-  if (typeSelect.value === 'scalebar') {
+stepsSelect.addEventListener('change', reconfigureScaleLine);
-    stepsSelect.style.display = 'inline';
+scaleTextCheckbox.addEventListener('change', reconfigureScaleLine);
-    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);