JSFiddle - React, Tailwind, and code Playground

by Roman Kulokov

HTML

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU&amp;mode=debug"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<div id="map1"></div>
<div id="map2"></div>

CSS

#map1, #map2{
  width:49%; height: 100vh; display: inline-block;
}

JavaScript

ymaps.ready(function () {
        var map1 = new ymaps.Map('map1', {
            center: [55.751574, 37.573856],
            zoom: 9
        });
        var map2 = new ymaps.Map('map2', {
            center: [55.751574, 37.573856],
            zoom: 9
        });

        var subjectFeature = {
            properties: {
                hintContent: 'subject'
            },
            options: {
                draggable: true,
                zIndex: 10
            }
        };

        var subjectCollection = new ymaps.GeoObjectCollection();

        subjectCollection.add(
                new ymaps.Polygon(
                        [
                            [[55.488688507739, 39.806459852492], [55.488688507739, 39.806459852492], [55.488210633159, 39.805898290796], [55.481201139979, 39.808706099278], [55.478333260617, 39.809267660975], [55.477695925748, 39.805617509947], [55.477058580573, 39.808706099278], [55.475943201716, 39.808144537582], [55.472915585702, 39.812356250306], [55.469090896215, 39.813760154547], [55.4689315261, 39.82302592254], [55.470525198258, 39.822183579996], [55.474031050237, 39.818814209816], [55.476739904121, 39.815164058789], [55.48438742783, 39.810671565216], [55.487732752781, 39.810390784368], [55.487892046885, 39.80842531843], [55.489007087572, 39.807302195037], [55.488688507739, 39.806459852492]]],
                        subjectFeature.properties,
                        subjectFeature.options
                )
        );

        var clipPolygon = new ymaps.Polygon(
                [[[55.47948623588195,39.8173016649388],[55.48128978298271,39.8343819719462],[55.471978689770324,39.84184924184348],[55.47149113711723,39.825627241721264],[55.47948623588195,39.8173016649388]]],
                {
                    hintContent: 'clip'
                },
                {
                    fillColor: '#FFFF00',
                    fillOpacity: 0.30,
                    draggable: true,
                    zIndex: 100
               ...