Skip to main content

Ruler

You can add a ruler to the map using the Ruler plugin.

The ruler works in two modes:

  • Polyline: for measuring distances between arbitrary points on the map.
  • Polygon: for measuring areas and perimeters of polygons on the map.

Getting started​

To add a ruler to the map, create a Ruler instance:

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

If you use npm:

// Import the plugin 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' });

Usage examples​

Polyline mode​

To place the points, click the map.

You can build polylines with multiple points and add points to an already drawn line.

The distance from the starting point is displayed next to each point.

Polygon mode​

To place the points, click the map.

You can build polygons with multiple points and add points to already drawn sides of the polygon.

The distance from the starting point is displayed next to each point, and the polygon area is also displayed.


Using UI element​

You can add a RulerControl UI element to the map to enable and disable the ruler mode.

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

To add a UI control to the map, create a RulerControl instance:

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

You can access the Ruler instance using the getRuler() method:

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

Usage example​

To enable or disable the ruler mode, click the ruler icon on the map.