JSFiddle - React, Tailwind, and code Playground

by Andrey Scov

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>

CSS

html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }

JavaScript

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [55.733835, 37.588227],
            zoom: 5
        }, {
            searchControlProvider: 'yandex#search'
        });
    // Пользовательские модули не дописываются в неймспейс ymaps.
    // Поэтому доступ к ним мы можем получить асинхронно через метод ymaps.modules.require.
    ymaps.modules.require(['geoObject.Arrow'], function (Arrow) {
        var arrow = new Arrow([[57.733835, 38.788227], [55.833835, 35.688227]], null, {
            geodesic: true,
            strokeWidth: 5,
            opacity: 0.5,
            strokeStyle: 'shortdash'
        });
        myMap.geoObjects.add(arrow);
    });
    
    ymaps.modules.require(['geoObject.Arrow'], function (Arrow) {
        var arrow = new Arrow([ [55.833835, 35.688227], [57.733835, 38.788227]], null, {
            geodesic: true,
            strokeWidth: 5,
            opacity: 0.5,
            strokeStyle: 'shortdash'
        });
        myMap.geoObjects.add(arrow);
    });
    
});

/*
 * Класс, позволяющий создавать стрелку на карте.
 * Является хелпером к созданию полилинии, у которой задан специальный оверлей.
 * При использовании модулей в реальном проекте рекомендуем размещать их в отдельных файлах.
 */
ymaps.modules.define("geoObject.Arrow", [
    'Polyline',
    'overlay.Arrow',
    'util.extend'
], function (provide, Polyline, ArrowOverlay, extend) {
    /**
     * @param {Number[][] | Object | ILineStringGeometry} geometry Геометрия ломаной.
     * @param {Object} properties Данные ломаной.
     * @param {Object} options Опции ломаной.
     * Поддерживается тот же набор опций, что и в классе ymaps.Polyline.
     * @param {Number} [options.arrowAngle=20] Угол в градусах между основной линией и линиями стрелки.
     * @param {Number} [options.arrowMinLength=3] Минимальная длина стрелки. Если длина стрелки меньше минимального значения, стрелка не рисуется.
     * @param {Number} [options.arrowMaxLength=20]...