JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script>
<div id="map" style="width: 400px; height: 400px"></div>
JavaScript
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [55.73, 37.75],
zoom: 10
});
// Создаем многоугольник без вершин.
var myPolygon = new ymaps.Polygon([], {}, {
// Курсор в режиме добавления новых вершин.
editorDrawingCursor: "crosshair",
// Максимально допустимое количество вершин.
editorMaxPoints: 5,
// Цвет заливки.
fillColor: '#00FF00',
// Цвет обводки.
strokeColor: '#0000FF',
// Ширина обводки.
strokeWidth: 5,
draggable: true
});
// Добавляем многоугольник на карту.
myMap.geoObjects.add(myPolygon);
// В режиме добавления новых вершин меняем цвет обводки многоугольника.
var stateMonitor = new ymaps.Monitor(myPolygon.editor.state);
stateMonitor.add("drawing", function (newValue) {
myPolygon.options.set("strokeColor", newValue ? '#FF0000' : '#0000FF');
});
// Включаем режим редактирования с возможностью добавления новых вершин.
myPolygon.editor.startDrawing();
}