Merge pull request #9013 from weskamm/scalebar

Added scalebar option to ol.control.scaleline

examples/scale-line.html

@@ -14,3 +14,19 @@ tags: "scale-line, openstreetmap"
   <option value="nautical">nautical mile</option>
   <option value="metric" selected>metric</option>
 </select>
+
+<select id="type">
+  <option value="scaleline">ScaleLine</option>
+  <option value="scalebar">ScaleBar</option>
+</select>
+
+<select id="steps" style="display:none">
+  <option value=2>2 steps</option>
+  <option value=4 selected>4 steps</option>
+  <option value=6>6 steps</option>
+  <option value=8>8 steps</option>
+</select>
+
+<div id="showScaleTextDiv" style="display:none">
+  <input type="checkbox" id="showScaleText" checked>Show scale text
+</div>

examples/scale-line.js

@@ -4,12 +4,36 @@ 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');
 
-const scaleLineControl = new ScaleLine();
+let scaleType = 'scaleline';
+let scaleBarSteps = 4;
+let scaleBarText = true;
+let control;
 
+function scaleControl() {
+  if (scaleType === 'scaleline') {
+    control = new ScaleLine({
+      units: unitsSelect.value
+    });
+    return control;
+  }
+  control = new ScaleLine({
+    units: unitsSelect.value,
+    bar: true,
+    steps: scaleBarSteps,
+    text: scaleBarText,
+    minWidth: 140
+  });
+  return control;
+}
 const map = new Map({
   controls: defaultControls().extend([
-    scaleLineControl
+    scaleControl()
   ]),
   layers: [
     new TileLayer({
@@ -23,10 +47,34 @@ const map = new Map({
   })
 });
 
-
-const unitsSelect = document.getElementById('units');
 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);
-onChange();
+typeSelect.addEventListener('change', onChangeType);
+stepsSelect.addEventListener('change', onChangeSteps);
+scaleTextCheckbox.addEventListener('change', onChangeScaleText);