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:
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 installol
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`)... // Use as UMD module (based on NPM package `openlayers`)const ol = ...const MapScaleControl =
In Browser environment you should add script tag pointing to UMD module after OpenLayers js files.
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:
const map = target: 'map' view: center: 418997214 750795067 zoom: 5 layers: source: map
License
MIT (c) 2016-2018, Vladimir Vershinin