Skip to main content

Ruler plugin

Ruler​

Ruler has two usage modes: polyline and polygon.

The polyline mode allows you to measure a distance, and the polygon mode is used when you need to measure an area and a perimeter of a polygon on the map.

Ruler usage​

To append ruler on the map, first you need to instantiate Ruler:

const ruler = new mapgl.Ruler(map, { mode: 'polyline' });

Or if you use npm:

// Import either as an ES module...
import { Ruler } from '@2gis/mapgl-ruler';
// ...or as a CommonJS module
const { Ruler } = require('@2gis/mapgl-ruler');

const ruler = new Ruler(map, { mode: 'polyline' });

Polyline ruler demonstration​

Try clicking on any place on the map to display a ruler.

Polygon ruler demonstration​

Try clicking on any place on the map to display a ruler.


Ruler сontrol​

A RulerControl instance is a wrapper of a Ruler instance and it extends Control functionality.

It provides a control for enabling or disabling a ruler.

RulerControl usage​

const rulerControl = new RulerControl(map, { position: 'centerRight', mode: 'polyline' });

You can get the Ruler instance via getRuler() method.

rulerControl.getRuler().setPoints([
    [55.31878, 25.23584],
    [55.31878, 25.25584],
    [55.33878, 25.23584],
]);

RulerControl demonstration​

Try clicking on the ruler button to enable or disable ruler.