Create a polygon

vanilla.html

react.html

vue.html

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="react, typescript"
      type="text/babel"
      src="../variables.ts"
    ></script>
    <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
      import {LOCATION, POLYGON_STYLE, POLYGONS_COORDINATES} from '../variables';

      window.map = null;

      main();
      async function main() {
        // Waiting for all api elements to be loaded
        await ymaps3.ready;
        const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapFeature} = ymaps3;
        // 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({}),
            // Add a layer of geo objects to display the polygons
            new YMapDefaultFeaturesLayer({})
          ]
        );

        for (const polygonCoords of POLYGONS_COORDINATES) {
          // Create polygon objects, set their coordinates and styles, and add them to the map
          const polygon = new YMapFeature({
            geometry: {
              type: 'Polygon',
              coordinates: [polygonCoords]
            },
            style: POLYGON_STYLE
          });
          map.addChild(polygon);
        }
      }
    </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>
  </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="react, typescript"
      type="text/babel"
      src="../variables.ts"
    ></script>
    <script data-plugins="transform-modules-umd" data-presets="react, typescript" type="text/babel">
      import {LOCATION, POLYGON_STYLE, POLYGONS_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, YMapDefaultFeaturesLayer, YMapFeature} = reactify.module(ymaps3);

        function App() {
          return (
            // Initialize the map and pass initialization parameters
            <YMap location={LOCATION} showScaleInCopyrights={true} ref={(x) => (map = x)}>
              {/* Add a map scheme layer */}
              <YMapDefaultSchemeLayer />
              {/* Add a layer of geo objects to display the polygons */}
              <YMapDefaultFeaturesLayer />

              {/* Add polygon objects to the map, set their coordinates and styles */}
              {POLYGONS_COORDINATES.map((polygonCoords) => (
                <YMapFeature
                  geometry={{
                    type: 'Polygon',
                    coordinates: [polygonCoords]
                  }}
                  style={POLYGON_STYLE}
                />
              ))}
            </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>
  </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="react, typescript"
      type="text/babel"
      src="../variables.ts"
    ></script>
    <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
      import {POLYGONS_COORDINATES, LOCATION, POLYGON_STYLE} 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, YMapDefaultFeaturesLayer, YMapFeature} = vuefy.module(ymaps3);

        const app = Vue.createApp({
          components: {
            YMap,
            YMapDefaultSchemeLayer,
            YMapDefaultFeaturesLayer,
            YMapFeature
          },
          setup() {
            const refMap = (ref) => {
              window.map = ref?.entity;
            };
            return {
              LOCATION,
              POLYGONS_COORDINATES,
              POLYGON_STYLE,
              refMap
            };
          },
          template: `
          <!--Initialize the map and pass initialization parameters-->
          <YMap :location="LOCATION" :showScaleInCopyrights="true" :ref="refMap">
            <!--Add a map scheme layer-->
            <YMapDefaultSchemeLayer/>
            <!-- Add a layer of geo objects to display the polygons -->
            <YMapDefaultFeaturesLayer/>

              <!-- Add polygon objects to the map, set their coordinates and styles -->
              <YMapFeature
                v-for="polygonCoords in POLYGONS_COORDINATES"
                :key="polygonCoords"
                :geometry="{
                    type: 'Polygon',
                    coordinates: [polygonCoords]
                }"
                :style="POLYGON_STYLE"
              />
          </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>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

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

export const LOCATION: YMapLocationRequest = {
  center: [60.6218, 56.8418], // starting position [lng, lat]
  zoom: 12.6 // starting zoom
};

const firstPolygon: LngLat[] = [
  [-299.2943573, 56.8827509],
  [-299.2887354, 56.8821178],
  [-299.2845726, 56.8806875],
  [-299.2836714, 56.8787881],
  [-299.2819118, 56.8774046],
  [-299.2783928, 56.8747781],
  [-299.2766762, 56.8724328],
  [-299.2751312, 56.870275],
  [-299.2763329, 56.8683048],
  [-299.2749596, 56.8660529],
  [-299.2725563, 56.8640824],
  [-299.2730713, 56.8593904],
  [-299.2765045, 56.8547916],
  [-299.2816544, 56.8504739],
  [-299.2893791, 56.8483149],
  [-299.2980695, 56.847646],
  [-299.3020391, 56.8477281],
  [-299.3041849, 56.8479628],
  [-299.305687, 56.8477281],
  [-299.3063736, 56.8474348],
  [-299.307189, 56.8474935],
  [-299.3078971, 56.8478338],
  [-299.3079829, 56.8482797],
  [-299.3087769, 56.8487138],
  [-299.310236, 56.8486317],
  [-299.3112874, 56.8483618],
  [-299.3122745, 56.8486786],
  [-299.3120599, 56.8489485],
  [-299.3139696, 56.8503214],
  [-299.3167806, 56.852011],
  [-299.3166733, 56.8542989],
  [-299.3167591, 56.8546156],
  [-299.3164587, 56.8553078],
  [-299.3159652, 56.8559179],
  [-299.3155146, 56.8569034],
  [-299.3152785, 56.857924],
  [-299.3140984, 56.8592614],
  [-299.3139482, 56.8596367],
  [-299.3132186, 56.8602937],
  [-299.3125534, 56.8603992],
  [-299.3099785, 56.8614784],
  [-299.3093348, 56.8615957],
  [-299.3085837, 56.8615488],
  [-299.3083048, 56.8612438],
  [-299.3069744, 56.8614198],
  [-299.3065882, 56.8617717],
  [-299.3063736, 56.8634021],
  [-299.3054295, 56.8644578],
  [-299.3052149, 56.865185],
  [-299.3058372, 56.8658183],
  [-299.3063736, 56.8667214],
  [-299.3072104, 56.866956],
  [-299.3083262, 56.8670733],
  [-299.3096995, 56.8683165],
  [-299.3095279, 56.8688208],
  [-299.3100643, 56.8698997],
  [-299.3101072, 56.8706737],
  [-299.3098927, 56.8712718],
  [-299.3098712, 56.8721162],
  [-299.3099785, 56.8724211],
  [-299.3099141, 56.8727729],
  [-299.3093562, 56.8732654],
  [-299.3087769, 56.8735116],
  [-299.3084335, 56.8738751],
  [-299.3081331, 56.8739807],
  [-299.3078971, 56.8742504],
  [-299.3074465, 56.8743794],
  [-299.305644, 56.8765838],
  [-299.3034124, 56.8782957],
  [-299.3030691, 56.8795151],
  [-299.3025541, 56.8802185],
  [-299.3019104, 56.8807578],
  [-299.3007946, 56.8812033],
  [-299.3003225, 56.8818364],
  [-299.2984772, 56.882024],
  [-299.2950439, 56.8825633]
];
const secondPolygon: LngLat[] = [
  [-299.4184685, 56.8357336],
  [-299.4143486, 56.8254025],
  [-299.3638802, 56.8306623],
  [-299.368, 56.8413675],
  [-299.4181252, 56.8359214]
];
const thirdPolygon: LngLat[] = [
  [-299.3589878, 56.8510841],
  [-299.3461132, 56.8573257],
  [-299.34062, 56.8412736],
  [-299.3529797, 56.8397244],
  [-299.3569279, 56.8495352],
  [-299.3576145, 56.8504035],
  [-299.3590307, 56.8510841]
];
const fourthPolygon: LngLat[] = [
  [-299.3820763, 56.8238057],
  [-299.3621635, 56.8258722],
  [-299.3597603, 56.818357],
  [-299.379158, 56.8165719],
  [-299.3819046, 56.823336]
];
const fifthPolygon: LngLat[] = [
  [-299.4104004, 56.8135653],
  [-299.4076538, 56.8066115],
  [-299.390316, 56.808397],
  [-299.3923759, 56.8154444],
  [-299.4104004, 56.8137532]
];

export const POLYGONS_COORDINATES: LngLat[][] = [
  firstPolygon,
  secondPolygon,
  thirdPolygon,
  fourthPolygon,
  fifthPolygon
];

export const POLYGON_STYLE = {
  stroke: [
    {
      color: '#196DFF99',
      width: 3
    }
  ],
  fill: '#196DFF14'
};