# Class: ScaleLine

This documentation is for OpenLayers v10.9.0. The latest is v.

## ol/control/ScaleLine~ScaleLine

    import ScaleLine from 'ol/control/ScaleLine.js';

A control displaying rough y-axis distances, calculated for the center of the viewport. For conformal projections (e.g. EPSG:3857, the default view projection in OpenLayers), the scale is valid for all directions. No scale line will be shown when the y-axis distance of a pixel at the viewport center cannot be calculated in the view projection. By default the scale line will show in the bottom left portion of the map, but this can be changed by using the css selector `.ol-scale-line`. When specifying `bar` as `true`, a scalebar will be rendered instead of a scaleline. For cartesian measurements of the scaleline, you need to set the `getPointResolution` method of your projection to simply return the input value, e.g. `projection.setGetPointResolution(r => r);`

#### new ScaleLine(options)

control/ScaleLine.js, line 78

  Name | Type | Description
  --- | --- | ---
  `className` | string | undefined | CSS class name. The default is `ol-scale-bar` when configured with `bar: true`. Otherwise the default is `ol-scale-line`.
  `minWidth` | number (defaults to 64) | Minimum width in pixels at the OGC default dpi. The width will be adjusted to match the dpi used.
  `maxWidth` | number | undefined | Maximum width in pixels at the OGC default dpi. The width will be adjusted to match the dpi used.
  `render` | function | undefined | Function called when the control should be re-rendered. This is called in a `requestAnimationFrame` callback.
  `target` | HTMLElement | string | undefined | Specify a target if you want the control to be rendered outside of the map's viewport.
  `units` | Units (defaults to 'metric') | Units.
  `bar` | boolean (defaults to false) | Render scalebars instead of a line.
  `steps` | number (defaults to 4) | Number of steps the scalebar should use. Use even numbers for best results. Only applies when `bar` is `true`.
  `text` | boolean (defaults to false) | Render the text scale above of the scalebar. Only applies when `bar` is `true`.
  `dpi` | number | undefined | dpi of output device such as printer. Only applies when `bar` is `true`. If undefined the OGC default screen pixel size of 0.28mm will be assumed.

  ##### Fires:

  - `change` (BaseEvent) - Generic change event. Triggered when the revision counter is increased.
  - `change:units` (ObjectEvent)
  - `error` (BaseEvent) - Generic error event. Triggered when an error occurs.
  - `propertychange` (ObjectEvent) - Triggered when a property is changed.

### Extends

- Control

### Observable Properties

Name | Type | Settable | ObjectEvent type | Description
--- | --- | --- | --- | ---
`units` | Units | yes | `change:units` | The units to use in the scale line.

### Methods

#### changed() inherited

Observable.js, line 68

  Increases the revision counter and dispatches a 'change' event.

#### dispatchEvent(event){boolean | undefined} inherited

events/Target.js, line 85

  Dispatches an event and calls all listeners listening for events of this type. The event parameter can either be a string or an Object with a `type` property.

  Name | Type | Description
  --- | --- | ---
  `event` | BaseEvent | string | Event object.

  ##### Returns:

  `false` if anyone called preventDefault on the event object or if any of the listeners returned false.

#### get(key){*} inherited

Object.js, line 136

  Gets a value.

  Name | Type | Description
  --- | --- | ---
  `key` | string | Key name.

  ##### Returns:

  Value.

#### getKeys(){Array.<string>} inherited

Object.js, line 149

  Get a list of object property names.

  ##### Returns:

  List of property names.

#### getMap(){Map | null} inherited

control/Control.js, line 104

  Get the map associated with this control.

  ##### Returns:

  Map.

#### getProperties(){NoInfer.<Properties>} inherited

Object.js, line 158

  Get an object of all property names and values.

  ##### Returns:

  Object.

#### getRevision(){number} inherited

Observable.js, line 79

  Get the version number for this object. Each time the object is modified, its version number will be incremented.

  ##### Returns:

  Revision.

#### getUnits(){Units}

control/ScaleLine.js, line 198

  Return the units to use in the scale line.

  ##### Returns:

  The units to use in the scale line.

#### on(type, listener){EventsKey | Array<EventsKey>} inherited

Observable.js, line 152

  Listen for a certain type of event.

  Name | Type | Description
  --- | --- | ---
  `type` | string | Array.<string> | The event type or array of event types.
  `listener` | function | The listener function.

  ##### Returns:

  Unique key for the listener. If called with an array of event types as the first argument, the return will be an array of keys.

#### once(type, listener){EventsKey | Array<EventsKey>} inherited

Observable.js, line 164

  Listen once for a certain type of event.

  Name | Type | Description
  --- | --- | ---
  `type` | string | Array.<string> | The event type or array of event types.
  `listener` | function | The listener function.

  ##### Returns:

  Unique key for the listener. If called with an array of event types as the first argument, the return will be an array of keys.

#### set(key, value, silent) inherited

Object.js, line 218

  Sets a value.

  Name | Type | Description
  --- | --- | ---
  `key` | string | Key name.
  `value` | * | Value.
  `silent` | boolean | undefined | Update without triggering an event.

#### setDpi(dpi)

control/ScaleLine.js, line 224

  Specify the dpi of output device such as printer.

  Name | Type | Description
  --- | --- | ---
  `dpi` | number | undefined | The dpi of output device.

#### setMap(map) inherited

control/Control.js, line 116

  Remove the control from its current map and attach it to the new map. Pass `null` to just remove the control from the current map. Subclasses may set up event handlers to get notified about changes to the map here.

  Name | Type | Description
  --- | --- | ---
  `map` | Map | null | Map.

#### setProperties(values, silent) inherited

Object.js, line 238

  Sets a collection of key-value pairs. Note that this changes any existing properties and adds new ones (it does not remove any existing properties).

  Name | Type | Description
  --- | --- | ---
  `values` | Partial.<NoInfer.<Properties>> | Values.
  `silent` | boolean | undefined | Update without triggering an event.

#### setTarget(target) inherited

control/Control.js, line 155

  This function is used to set a target element for the control. It has no effect if it is called after the control has been added to the map (i.e. after `setMap` is called on the control). If no `target` is set in the options passed to the control constructor and if `setTarget` is not called then the control is added to the map's overlay container.

  Name | Type | Description
  --- | --- | ---
  `target` | HTMLElement | string | Target.

#### setUnits(units)

control/ScaleLine.js, line 215

  Set the units to use in the scale line.

  Name | Type | Description
  --- | --- | ---
  `units` | Units | The units to use in the scale line.

#### un(type, listener) inherited

Observable.js, line 173

  Unlisten for a certain type of event.

  Name | Type | Description
  --- | --- | ---
  `type` | string | Array.<string> | The event type or array of event types.
  `listener` | function | The listener function.

#### unset(key, silent) inherited

Object.js, line 262

  Unsets a property.

  Name | Type | Description
  --- | --- | ---
  `key` | string | Key name.
  `silent` | boolean | undefined | Unset without triggering an event.