JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=2541a305-4070-4156-97c3-5e71858d305b"></script>
<script type="text/javascript" src="https://yandex.st/jquery/2.2.3/jquery.min.js"></script>
<div id="map"></div>

CSS

html,
        body,
        #map {
          width: 100%;
          height: 100%;
          padding: 0;
          margin: 0;
        }

        .customControl {
          background-color: #abc;
          padding: 10px;
          border-radius: 5px;
          max-width: 200px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        #testControl {
          background-color: red;
          width: 50px;
          height: 50px;
        }

        .testControl {
          background-color: red;
          width: 50px;
          height: 50px;
        }

JavaScript

ymaps.modules.define('plugin.testMapControl', [
  //'testMapControl'
  'templateLayoutFactory'
], function() {
/*
m = document.getElementById('map')
elem = document.createElement('div')
elem.id = 'inner_div'
m.appendChild(elem)
*/
 
});

ymaps.ready(function() {
  // Пример реализации собственного элемента управления на основе наследования от collection.Item.
  // Элемент управления отображает название объекта, который находится в центре карты.
  var map = new ymaps.Map("map", {
      center: [55.819543, 37.611619],
      zoom: 6,
      controls: []
    }),
    // Создаем собственный класс.
    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 = this.getMap().getCenter().join(',');
      // Запрашиваем информацию о месте по...