JSFiddle - React, Tailwind, and code Playground

HTML

<div id='legend' style='font-size:8px'></div>
<div id="map"></div>

CSS

</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=en_US"></script>
<script src="http://yastatic.net/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://kashey.ru/maps/regions.js?1"></script>
<style>
        body, html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 90%;
        }

JavaScript

var myMap;

    ymaps.ready(init);

    /**********************/

    function init () {

        myMap = new ymaps.Map('map', {
            center: [55.76, 37.64], // Москва
            zoom: 10
        });
        var geoMap = myMap;

        myMap.events.add(['actionend'], function () {
            getLocation();
        });

        var location_tm = 0;

        function getLocation () {
            if (!location_tm) {
                location_tm = setTimeout(function () {
                    location_tm = 0;
                    grabLocation();
                }, 100);
            }
        }

        getLocation();

        function grabLocation () {
// Map center and size
            var center = myMap.getCenter(),
                bounds = myMap.getBounds(),
                geosize = [bounds[1][0] - bounds[0][0], bounds[1][1] - bounds[0][1]],
                dim = myMap.container.getSize(),
                dsize = Math.min(dim[0] / 512, dim[1] / 512),
                gsize = Math.min(geosize[0] / dsize, geosize[1] / dsize),
                legend = [];
// call geocoder
            console.log('calling geocoder');
            $.ajax({
                type: "GET",
                url: "http://data.esosedi.org/geocode/v1?lng=ru&point=" + center.join(',') + "&callback=?",
                contentType: "application/json; charset=utf-8",
                async: false,
                dataType: "json",
                success: function (data, textStatus, jqXHR) {
                    

                    var regions = data.target,
                        select = 0,
                        targetOid = 0;//data.target.ll;
//find and filter by size
                    for (l = 8; l > 0; l--) {
                        var oid = data.target['l' + l];
                        if (oid) {
                            var obounds = data.names[oid].boundingBox,
                                rsize = [obounds[1][0] - obounds[0][0], obounds[1][1] - obounds[0][1]];
             ...