Skip to content

ghettovoice/ol-mapscale

Repository files navigation

Build Status Coverage Status view on npm GitHub tag License

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-2020, Vladimir Vershinin