JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<html>

  <head>
    <script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?coordorder=longlat&lang=ru_RU&apikey=2541a305-4070-4156-97c3-5e71858d305b"></script>

    <script type="text/javascript" src="https://yastatic.net/s3/mapsapi-jslibs/area/0.0.1/util.calculateArea.min.js"></script>
    <script type="text/javascript" src="https://yandex.st/jquery/2.2.3/jquery.min.js"></script>
  </head>

  <body>
    <div id="map"></div>
  </body>

</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: Arial;
}

#map {
  widht: 100%;
  height: 100%;
}

.customControl {
  position: relative; 
  top: 40px;
  left: 00px;
  background-color: #fff;
  padding:  10px;
  border-radius: 5px;
  /*max-width: 300px;*/
  max-height: 40px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

JavaScript

ymaps.ready(['util.calculateArea']).then(init);

 function init() {
   // Создание карты.    
   var myMap = new ymaps.Map("map", {
     // Координаты центра карты.
     // Порядок по умолчанию: «широта, долгота».
     // Чтобы не определять координаты центра карты вручную,
     // воспользуйтесь инструментом Определение координат.
     center: [55.76, 37.64],
     coordorder: 'longlat',
     // Уровень масштабирования. Допустимые значения:
     // от 0 (весь мир) до 19.
     zoom: 3,
   //  controls: [],
     controls: ['smallMapDefaultSet', 'fullscreenControl', 'routeButtonControl', 'trafficControl']
   });
   // Создаем собственный класс.
   CustomControlClass = function(options) {
     CustomControlClass.superclass.constructor.call(this, options);
     this._$content = null;
     this._geocoderDeferred = null;
   };
   // И наследуем его от collection.Item.
   ymaps.util.augment(CustomControlClass, ymaps.collection.Item, {
     onAddToMap: function(map) {
       CustomControlClass.superclass.onAddToMap.call(this, map);
       this._lastCenter = null;
       this.getParent().getChildElement(this).then(this._onGetChildElement, this);
     },
     onRemoveFromMap: function(oldMap) {
       this._lastCenter = null;
       if (this._$content) {
         this._$content.remove();
         this._mapEventGroup.removeAll();
       }
       CustomControlClass.superclass.onRemoveFromMap.call(this, oldMap);
     },

     _onGetChildElement: function(parentDomContainer) {
       // Создаем HTML-элемент с текстом.
       this._$content = $('<div class="customControl"></div>').appendTo(parentDomContainer);
       this._mapEventGroup = this.getMap().events.group();
       // Запрашиваем данные после изменения положения карты.
       this._mapEventGroup.add('boundschange', this._createRequest, this);
       // Сразу же запрашиваем название места.
       this._createRequest();
     },

     _createRequest: function() {
       var lastCenter = this._lastCenter =...