JSFiddle - React, Tailwind, and code Playground

by dolf

HTML

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

CSS

#cross-center{
    font-size: 20px;
    cursor: pointer;
}

JavaScript

ymaps.ready(function() {
    var map = new ymaps.Map('map', {
        center: [55.64954, 37.621587],
        zoom: 8
    });

    var CrossCenterLayout = ymaps.templateLayoutFactory.createClass('<div id="cross-center">+</div>', {
        build: function() {
            CrossCenterLayout.superclass.build.call(this);
            this._controlListeners = this.events.group().add('mouseenter', this.onCenterEnter, this).add('mouseleave', this.onCenterLeave, this);
            this._map = this.getData().control.getMap();
        },
        clear: function() {
            this._controlListeners.group().removeAll();
            CrossCenterLayout.superclass.clear.call(this);
        },
        onCenterEnter: function() {
            var center = this._map.getCenter();
            var lat = center[0].toFixed(2);
            var lng = center[1].toFixed(2);
            this._map.hint.show(center, {
                content: lat + ', ' + lng
            });
        },
        onCenterLeave: function() {
            this._map.hint.hide();
        }
    });
    ymaps.layout.storage.add('dolf#crossCenter', CrossCenterLayout);

    var CrossCenter = function() {
        CrossCenter.superclass.constructor.call(this);
        this.options.set('layout', 'dolf#crossCenter');
    };
    ymaps.util.augment(CrossCenter, ymaps.control.ScaleLine, {
        getControlName: function() {
            return 'crossCenter';
        }
    });

    var crossCenter = new CrossCenter();
    map.controls.add(crossCenter, {
        top: 140,
        left: 200
    });
})