Линейка | MapGL | 2GIS Documentation
MapGL JS API

Ruler plugin

Ruler functionality allows you to create ruler on the map.

In order to use it you need to include the Ruler plugin in your project. To do this, add the following line after the main MapGL script:

<script src="https://unpkg.com/@2gis/mapgl-ruler@^1/dist/ruler.js"></script>

Or you can install the needed package by using npm:

npm install @2gis/mapgl-ruler

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

const ruler = new mapgl.Ruler(map, { enable: true });

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, { enable: true });

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="MapGL API ruler example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            #reset {
                padding: 4px 10px;
                background: #00a81f;
                border-radius: 4px;
                box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5);
                border: none;
                color: #fff;
                font-size: 12px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script src="https://unpkg.com/@2gis/mapgl-ruler@^1/dist/ruler.js"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.23584],
                zoom: 13,
                key: 'Your API access key',
            });

            const ruler = new mapgl.Ruler(map, { enable: true });

            const controlsHtml = `<button id="reset">Reset points</button> `;
            new mapgl.Control(map, controlsHtml, {
                position: 'topLeft',
            });

            const resetButton = document.getElementById('reset');
            resetButton.addEventListener('click', function() {
                ruler.destroy();
                ruler.enable();
            });
        </script>
    </body>
</html>

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.

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

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

rulerControl.getRuler().setPoints([
    [55.31878, 25.23584],
    [55.35878, 25.23584],
    [55.35878, 25.26584],
]);

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="MapGL API ruler control example" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script src="https://unpkg.com/@2gis/mapgl-ruler@^1/dist/ruler.js"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.23584],
                zoom: 13,
                key: 'Your API access key',
            });

            const ruler = new mapgl.RulerControl(map, { position: 'centerRight' });
        </script>
    </body>
</html>