OpenLayers 2 is outdated. Go to the latest 3.x version:

ScaleBar Control


The ScaleBar control provides a configurable scale bar with flexibility in styling. Adding a ScaleBar control to a map provides a graphical scale bar that updates itself with changes in map scale.


Addin Version OpenLayers Version
trunk trunk > r5686


Installation and Use

  1. Use subversion to check out the ScaleBar addin.
  2. Place the ScaleBar.js file in your Control directory (or alternatively, place it elsewhere and add a <script> tag to your page that points to it).
  3. Use the build tools to create a single file build (or link to your OpenLayers.js file to run in development mode).
  4. Add a stylesheet to your page to style the ScaleBar (see examples).
  5. Construct a map and add a ScaleBar to it with the following syntax:
    var map = new OpenLayers.Map("map");
    var scalebar = new OpenLayers.Control.ScaleBar();

Advanced Usage

For custom configuration, construct the ScaleBar with non-default options.

Display Units

By default, the ScaleBar displays metric units. To display English units, use the following syntax:

var scalebar = new OpenLayers.Control.ScaleBar({
    displaySystem: "english" // default is "metric"

If you would like to abbreviate the units label, use the abbreviateLabel property:

var scalebar = new OpenLayers.Control.ScaleBar({
    abbreviateLabel: true // default is false

Size Range

The default ScaleBar is between 100 and 200 pixels wide. You can customize this range, but in general a bigger range will get you nicer looking numbers.

var scalebar = new OpenLayers.Control.ScaleBar({
    minWidth: 75, // default is 100 pixels
    maxWidth: 150 // default is 200 pixels

Divisions and Subdivisions

The default ScaleBar has 2 major divisions, each with 2 subdivisions. This can be customized with the divisions and subdivisions properties.

var scalebar = new OpenLayers.Control.ScaleBar({
    divisions: 4,   // default is 2
    subdivisions: 1 // default is 2

By default, measurements are not shown for minor divisions (between 2 subdivisions). This can be changed with the showMinorMeasures property.

var scalebar = new OpenLayers.Control.ScaleBar({
    showMinorMeasures: true // default is false

Layout Options

The ScaleBar can be laid out as three separate containers (units label, bar elements, and measures) or in a single line.

var scalebar = new OpenLayers.Control.ScaleBar({
    singleLine: true // default is false

As mentioned above, the ScaleBar width will fall somewhere in the specified range (min/maxWidth). How it is aligned in its container is controlled by the align property.

var scalebar = new OpenLayers.Control.ScaleBar({
    align: "center" // default is "left", "center" and "right" also supported


The ScaleBar is comprised of elements for the units label, for major and minor bar segments, and for numeric measures. All of these elements can be customized with CSS declarations. The best way to determine how to modify these declarations is to open one of the examples in Firefox. Use Firebug to inspect elements and edit CSS. See the examples for available CSS selectors.

Last modified 8 months ago Last modified on May 19, 2016 1:50:17 AM