ol-mapscale v3.0.0

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

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