JSFiddle - React, Tailwind, and code Playground

by shchemelevev

HTML

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&amp;lang=ru-RU&amp;dummy=.js"></script>
<div id="map" style="width:800px;height:700px;background:red;"></div>

CSS

.test_class { color:blue;}
.test_class:hover { color:red;}
.pressed_class { color:green; }

JavaScript

ymaps.ready(init);

function ocEvent(mark) {
    mark.events.add("mouseenter", function() {
        var balloon = mark.balloon.open();
    });
};


function init() {
    var myMap = new ymaps.Map('map', {
        center: [57.148831, 65.549486],
        zoom: 12
    });

    function button_layout_factory(map, group) {

        var ClearLayout = ymaps.templateLayoutFactory.createClass('<ymaps class="ymaps-b-form-button__my">$[[options.contentLayout]]</ymaps>', {
            build: function() {
                ClearLayout.superclass.build.call(this);
                this.state = 'not_pressed';
                this._controlListeners = this.events.group().add('click', this.onClick, this);
            },

            clear: function() {
                this._hoverReaction && this._hoverReaction.disable();
                this._holdReaction && this._holdReaction.disable();
                ClearLayout.superclass.clear.call(this);
            },

            onClick: function(emiter) {
                if (this.state == 'not_pressed') {
                    map.geoObjects.add(group);
                    $("#" + this['_Du']['0']['name'] + "> ymaps > div").toggleClass('test_class pressed_class');
                    //TODO убрать магию this['_Du']['0']['name']
                    this.state = 'pressed';
                } else {
                    map.geoObjects.remove(group);
                    $("#" + this['_Du']['0']['name'] + "> ymaps > div").toggleClass('pressed_class test_class');
                    this.state = 'not_pressed';
                }
            }
        });
        return ClearLayout;
    };



    ymaps.option.presetStorage.add("mytest#purplePoint", {
        iconImageHref: "http://api-maps.yandex.ru/2.0.10/release/../images/70dab5b80729f61ef4e124a9ec2c8764",
        iconImageOffset: [-7, -7],
        iconImageSize: [15, 15],
    });
    ymaps.option.presetStorage.add("mytest#bluePoint", {
        iconImageHref:...