1.2.0 • Published 8 years ago
ol3-mapscale v1.2.0
Map scale control with scale string for OpenLayer 3
Adds custom control to ol3 map. Shows scale line and scale string.
Installation
Install it thought NPM:
npm install ol3-mapscaleOr download the latest version archive and add it with script tag:
<script src="ol3-mapscale/dist/bundle.min.js"></script>Usage
Plugin is packed into UMD wrapper, import it with CommonJS or ES6:
import MapScaleControl from 'ol3-mapscale';
const MapScaleControl = require('ol3-mapscale');In Browser environment it is available as ol.control.MapScale.
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 = new ol.Map({
target: 'map',
view: new ol.View({
projectoin: 'EPSG:3857',
center: [4189972.14, 7507950.67],
zoom: 5
}),
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({ layer: 'osm' })
})
]
});
map.addControl(new ol.control.MapScale());