Scale Line

Units: Type:

Steps: Show scale text Invert colors

Example of a scale line.

main.js

import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import {ScaleLine, defaults as defaultControls} from 'ol/control.js';

const scaleBarOptionsContainer = document.getElementById('scaleBarOptions');
const unitsSelect = document.getElementById('units');
const typeSelect = document.getElementById('type');
const stepsRange = document.getElementById('steps');
const scaleTextCheckbox = document.getElementById('showScaleText');
const invertColorsCheckbox = document.getElementById('invertColors');

let control;

function scaleControl() {
  if (typeSelect.value === 'scaleline') {
    control = new ScaleLine({
      units: unitsSelect.value,
    });
    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';
  }
  return control;
}
const map = new Map({
  controls: defaultControls().extend([scaleControl()]),
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

function reconfigureScaleLine() {
  map.removeControl(control);
  map.addControl(scaleControl());
}
function onChangeUnit() {
  control.setUnits(unitsSelect.value);
}
function onInvertColorsChange() {
  control.element.classList.toggle(
    'ol-scale-bar-inverted',
    invertColorsCheckbox.checked,
  );
}
unitsSelect.addEventListener('change', onChangeUnit);
typeSelect.addEventListener('change', reconfigureScaleLine);
stepsRange.addEventListener('input', reconfigureScaleLine);
scaleTextCheckbox.addEventListener('change', reconfigureScaleLine);
invertColorsCheckbox.addEventListener('change', onInvertColorsChange);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Scale Line</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
      #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);;
      }
    </style>
  </head>
  <body>
    <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>
      <option value="us">us inch</option>
      <option value="nautical">nautical mile</option>
      <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>

    <div id="scaleBarOptions">
      <label for="steps">Steps:</label>
      <input id="steps" type="range" value="4" min="1" max="8">

      <label><input type="checkbox" id="showScaleText" checked> Show scale text</label>

      <label><input type="checkbox" id="invertColors"> Invert colors</label>
    </div>

    <script type="module" src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "scale-line",
  "dependencies": {
    "ol": "9.1.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}