Measurements by the ruler of the package with the default UI theme

vanilla.html

react.html

vue.html

common.ts

variables.ts

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
    <!-- To make the map appear, you must add your apikey -->
    <script src="https://api-maps.yandex.ru/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>

    <script
      data-plugins="transform-modules-umd"
      data-presets="typescript"
      type="text/babel"
      src="../variables.ts"
    ></script>
    <script
      data-plugins="transform-modules-umd"
      data-presets="typescript"
      type="text/babel"
      src="./common.ts"
    ></script>
    <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
      import {RulerType} from '@yandex/ymaps3-types/modules/ruler';
      import {LOCATION, RULER_COORDINATES} from '../variables';

      window.map = null;

      main();
      async function main() {
        // Waiting for all api elements to be loaded
        await ymaps3.ready;
        const {YMap, YMapDefaultSchemeLayer, YMapControlButton, YMapControls} = ymaps3;
        const {YMapDefaultRuler} = await ymaps3.import('@yandex/ymaps3-default-ui-theme');
        // Initialize the map
        map = new YMap(
          // Pass the link to the HTMLElement of the container
          document.getElementById('app'),
          // Pass the map initialization parameters
          {location: LOCATION, showScaleInCopyrights: true},
          // Add a map scheme layer
          [new YMapDefaultSchemeLayer({})]
        );

        let editable = true;
        let rulerType: RulerType = 'ruler';

        const ruler = new YMapDefaultRuler({
          type: rulerType,
          editable,
          points: RULER_COORDINATES,
          onFinish: () => {
            editable = false;
          }
        });
        map.addChild(ruler);

        map.addChild(
          new YMapControls({position: 'top right'}, [
            new YMapControlButton({
              text: 'Switch edit ruler',
              onClick: () => {
                editable = !editable;
                ruler.update({editable});
              }
            })
          ])
        );
        map.addChild(
          new YMapControls({position: 'top left'}, [
            new YMapControlButton({
              text: 'Switch ruler type',
              onClick: () => {
                rulerType = rulerType === 'ruler' ? 'planimeter' : 'ruler';
                ruler.update({type: rulerType});
              }
            })
          ])
        );
      }
    </script>

    <!-- prettier-ignore -->
    <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
    <link rel="stylesheet" href="./common.css" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <script crossorigin src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
    <!-- To make the map appear, you must add your apikey -->
    <script src="https://api-maps.yandex.ru/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>

    <script
      data-plugins="transform-modules-umd"
      data-presets="typescript"
      type="text/babel"
      src="../variables.ts"
    ></script>
    <script
      data-plugins="transform-modules-umd"
      data-presets="react, typescript"
      type="text/babel"
      src="./common.ts"
    ></script>
    <script data-plugins="transform-modules-umd" data-presets="react, typescript" type="text/babel">
      import {RulerType} from '@yandex/ymaps3-types/modules/ruler';
      import {LOCATION, RULER_COORDINATES} from '../variables';

      window.map = null;

      main();
      async function main() {
        // For each object in the JS API, there is a React counterpart
        // To use the React version of the API, include the module @yandex/ymaps3-reactify
        const [ymaps3React] = await Promise.all([ymaps3.import('@yandex/ymaps3-reactify'), ymaps3.ready]);
        const reactify = ymaps3React.reactify.bindTo(React, ReactDOM);
        const {YMap, YMapDefaultSchemeLayer, YMapControls, YMapControlButton} = reactify.module(ymaps3);
        const {YMapDefaultRuler} = reactify.module(await ymaps3.import('@yandex/ymaps3-default-ui-theme'));
        const {useState, useCallback} = React;

        function App() {
          const [location] = useState(LOCATION);
          const [rulerCoordinates] = useState(RULER_COORDINATES);
          const [rulerType, setRulerType] = useState < RulerType > 'ruler';
          const [editable, setEditable] = useState(true);

          const switchEditable = useCallback(() => setEditable((editable) => !editable), []);
          const switchType = useCallback(
            () => setRulerType((rulerType) => (rulerType === 'ruler' ? 'planimeter' : 'ruler')),
            []
          );
          const onFinish = useCallback(() => setEditable(false), []);

          return (
            // Initialize the map and pass initialization parameters
            <YMap location={location} showScaleInCopyrights={true} ref={(x) => (map = x)}>
              {/* Add a map scheme layer */}
              <YMapDefaultSchemeLayer />
              <YMapDefaultRuler type={rulerType} points={rulerCoordinates} editable={editable} onFinish={onFinish} />

              <YMapControls position="top right">
                <YMapControlButton onClick={switchEditable} text="Switch edit ruler" />
              </YMapControls>
              <YMapControls position="top left">
                <YMapControlButton onClick={switchType} text="Switch ruler type" />
              </YMapControls>
            </YMap>
          );
        }

        ReactDOM.render(
          <React.StrictMode>
            <App />
          </React.StrictMode>,
          document.getElementById('app')
        );
      }
    </script>

    <!-- prettier-ignore -->
    <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
    <link rel="stylesheet" href="./common.css" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <script crossorigin src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>

    <script src="https://api-maps.yandex.ru/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>

    <script
      data-plugins="transform-modules-umd"
      data-presets="typescript"
      type="text/babel"
      src="../variables.ts"
    ></script>
    <script
      data-plugins="transform-modules-umd"
      data-presets="typescript"
      type="text/babel"
      src="./common.ts"
    ></script>
    <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
      import {RulerType} from '@yandex/ymaps3-types/modules/ruler';
      import {LOCATION, RULER_COORDINATES} from '../variables';

      window.map = null;

      async function main() {
        // For each object in the JS API, there is a Vue counterpart
        // To use the Vue version of the API, include the module @yandex/ymaps3-vuefy
        const [ymaps3Vue] = await Promise.all([ymaps3.import('@yandex/ymaps3-vuefy'), ymaps3.ready]);
        const vuefy = ymaps3Vue.vuefy.bindTo(Vue);
        const {YMap, YMapDefaultSchemeLayer, YMapControls, YMapControlButton} = vuefy.module(ymaps3);
        const {YMapDefaultRuler} = vuefy.module(await ymaps3.import('@yandex/ymaps3-default-ui-theme'));

        const app = Vue.createApp({
          components: {YMap, YMapDefaultSchemeLayer, YMapControls, YMapControlButton, YMapDefaultRuler},
          setup() {
            const refMap = (ref) => {
              window.map = ref?.entity;
            };
            const editable = Vue.ref(true);
            const rulerType = Vue.ref < RulerType > 'ruler';

            const switchEditable = () => {
              editable.value = !editable.value;
            };
            const switchType = () => {
              rulerType.value = rulerType.value === 'ruler' ? 'planimeter' : 'ruler';
            };

            const onFinish = () => {
              editable.value = false;
            };
            return {LOCATION, RULER_COORDINATES, refMap, editable, rulerType, switchEditable, switchType, onFinish};
          },
          template: `
            <YMap :location="LOCATION" :showScaleInCopyrights="true" :ref="refMap">
                <YMapDefaultSchemeLayer />
                <YMapDefaultRuler :type="rulerType" :points="RULER_COORDINATES" :editable="editable" :onFinish="onFinish" />
                <YMapControls position="top right">
                    <YMapControlButton @click="switchEditable" text="Switch edit ruler" />
                </YMapControls>
                <YMapControls position="top left">
                    <YMapControlButton @click="switchType" text="Switch ruler type" />
                </YMapControls>
            </YMap>`
        });
        app.mount('#app');
      }
      main();
    </script>

    <!-- prettier-ignore -->
    <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
    <link rel="stylesheet" href="./common.css" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

ymaps3.ready.then(() => {
  ymaps3.import.registerCdn('https://cdn.jsdelivr.net/npm/{package}', ['@yandex/ymaps3-default-ui-theme@0.0']);
});

import type {LngLat, YMapLocationRequest} from '@yandex/ymaps3-types';

export const LOCATION: YMapLocationRequest = {
  center: [31.245384, 30.051434], // starting position [lng, lat]
  zoom: 3 // starting zoom
};

export const RULER_COORDINATES: LngLat[] = [
  [-0.128407, 51.506807], // London
  [31.245384, 30.051434], // Cairo
  [77.201224, 28.614653] // New Delhi
];