I am trying to generate a scale line on my map using ScaleLine but it is not showing on the map.

import {defaults as defaultControls, ScaleLine} from 'ol/control';

map = new Map({
      target: 'map-container',
      controls: defaultControls().extend([
        new ScaleLine()
      layers: [
        new TileLayer({
          source: new OSM()
      view: new View({
        projection: 'EPSG:4326',
        center: [114.190750, 22.339914],
        zoom: 12,
        minZoom: 12,
  • Your code is working perfectly here codesandbox.io/s/reprojection-wgs84-o5kg1 Have you included the css?
    – Mike
    Dec 10, 2019 at 22:12
  • i just checked, the code is the same it seems like its not working for me for some reason. Dec 12, 2019 at 2:45
  • <div class="ol-scale-line-inner" style="width: 109px;">2 km</div> The value here is changing but the map does not have the scale line. What could be the issue ? Dec 13, 2019 at 3:23
  • maybe you have some css overriding the default?
    – Rob
    Dec 13, 2019 at 13:17

1 Answer 1


Maybe openLayers css for scaling is not imported, or overwritten. try importing this style into your header and see if it worked.

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.