Map scale control with scale string for OpenLayers

Adds custom control to OpenLayers map. Shows scale line and scale string.

Installation

Install it thought NPM or Bower:

# ES6 version for bundling with Webpack, Rollup or etc.
npm install ol ol-mapscale
# to use UMD version 'openlayers' package should be installed
npm install openlayers

Or add from CDN:

<script src="https://unpkg.com/openlayers@latest/dist/ol.js"></script>
<script src="https://unpkg.com/ol-mapscale@latest/dist/bundle.min.js"></script>

Note

Plugin is available in 2 versions: as UMD module and as ES2015 module:

• RECOMMENDED: ES2015 version (dist/bundle.es.js) should be used with ol package (you should install it manually).
• UMD version (dist/bundle[.min].js) should be used with openlayers package. You can install ol package as dev dependency to suppress NPM warning about required peer dependencies.

Usage

Plugin may be used as UMD module or ES2015 module:

// Use as ES2015 module (based on NPM package `ol`)
import Map from 'ol/map'
...
import MapScaleControl from 'ol-mapscale'

// Use as UMD module (based on NPM package `openlayers`)
const ol = require('openlayers')
...
const MapScaleControl = require('ol-mapscale')

In Browser environment you should add script tag pointing to UMD module after OpenLayers js files.

<script src="https://unpkg.com/openlayers@latest/dist/ol.js"></script>
<script src="https://unpkg.com/ol-mapscale@latest/dist/bundle.min.js"></script>
<script>
  // plugin exports global variable MapScaleControl
  // in addition it also exported to `ol.control.MapScale` field (for backward compatibility).
</script>

Options

| Option | Type | Description | |:--------------------|:------------------------------------------|:---------------------------------------------------------------------------------------| | target | Element | string | undefined | Specify a target if you want the control to be rendered outside of the map's viewport. | | className | string | string[] | undefined | Custom class name of the control container element. Default is ol-mapscale. | | scaleLineClassName | string | string[] | undefined | Custom class name of the scale line container element. Default is ol-scale-line. | | scaleValueClassName | string | string[] | undefined | Custom class name of the scale value container element. Default is ol-scale-value. | | scaleLine | boolean | undefined | Show/hide scale line control. Default is true. | | units | string[] | undefined | Array of scale value units. Default is ['k', 'M', 'G']. | | digits | number | undefined | The number of digits to appear after the decimal point. Default is 0. |

Example usage:

import Map from 'ol/map'
import View from 'ol/view'
import TileLayer from 'ol/layer/tile'
import OSMSource from 'ol/source/osm'
import 'ol/ol.css'
import MapScaleControl from 'ol-mapscale'

const map = new Map({
  target: 'map',
  view: new View({
    center: [4189972.14, 7507950.67],
    zoom: 5,
  }),
  layers: [
    new TileLayer({
      source: new OSMSource(),
    }),
  ],
})

map.addControl(new MapScaleControl())

License

MIT (c) 2016-2018, Vladimir Vershinin