https://github.com/ghettovoice/ol-mapscale
OpenLayers map scale control with scale string
https://github.com/ghettovoice/ol-mapscale
hacktoberfest ol ol-mapscale ol-plugins ol3 ol4 openlayers openlayers3 openlayers4
Last synced: 2 months ago
JSON representation
OpenLayers map scale control with scale string
- Host: GitHub
- URL: https://github.com/ghettovoice/ol-mapscale
- Owner: ghettovoice
- License: mit
- Created: 2015-10-28T11:33:30.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-04-16T20:11:35.000Z (about 2 years ago)
- Last Synced: 2024-05-09T06:09:00.289Z (about 1 year ago)
- Topics: hacktoberfest, ol, ol-mapscale, ol-plugins, ol3, ol4, openlayers, openlayers3, openlayers4
- Language: JavaScript
- Homepage:
- Size: 602 KB
- Stars: 13
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.com/ghettovoice/ol-mapscale)
[](https://coveralls.io/github/ghettovoice/ol-mapscale?branch=master)
[](https://www.npmjs.org/package/ol-mapscale)
[](https://github.com/ghettovoice/ol-mapscale/releases)
[](https://github.com/ghettovoice/ol-mapscale/blob/master/LICENSE)
# Map scale control with scale string for OpenLayers
Adds custom control to [OpenLayers](https://openlayers.org/) map. Shows scale line and scale string.
## Installation
Install it thought NPM or Bower:
```shell
# 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:
```html
```
### 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](https://www.npmjs.com/package/ol) package (you should
install it manually).**
- **UMD version (`dist/bundle[.min].js`) should be used with [openlayers](https://www.npmjs.com/package/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:
```js
// 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.
```html
// plugin exports global variable MapScaleControl
// in addition it also exported to `ol.control.MapScale` field (for backward compatibility).
```
### 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:
```js
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-2020, Vladimir Vershinin