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/?coordorder=longlat&lang=ru_RU&apikey=2541a305-4070-4156-97c3-5e71858d305b"></script>
<div id="map"></div>

CSS

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

            #placemark_counter {
              width: 50px;
              height: 50px;
              font-family: Arial;
              text-align: center;
              font-size: 22px;
              line-height: 50px;
              background-color: white;
              color: black;
              font-weight: bold;
            }

            #inner_div {
              position: absolute;
              width: 100px;
              height: 100px;
              background-color: rgba(255,0,0,0.3);
              right: 10px;
              top: 10px;
              /* border: 1px solid rgb(0, 0, 0); */
            }

JavaScript

var map 

// Создаем первый собственный модуль - макет своего контрола.
ymaps.modules.define('plugin.Custom', [ 
], function(options) {
  
  	return {
    	test: function(){
      	console.warn('test')
      }
    }
    /*
    m = document.getElementById('map')
    elem = document.createElement('div')
    elem.id = 'inner_div'
    m.appendChild(elem)
    */
});

// Создаем второй собственный модуль.
// Этот модуль предоставляет собственный элемент управления, который создается на основе кнопки.  
var init = () => {
        ya_map = new ymaps.Map("map", {
            center:[37.4461963354871, 53.205783318171086],
            zoom: 10,
            controls: [],
						//  controls: ['smallMapDefaultSet', 'fullscreenControl', 'routeButtonControl', 'trafficControl']
        });
        ya_map.options.set('autoFitToViewport', 'always' ) ///  постоянно следить за изменением состояния отображения контейнера карты.
        //ymaps.modules.require['plugin.Custom']
        ymaps.Custom = ymaps.modules.require(['plugin.Custom']) 
        return ya_map
    }
 ymaps.ready([]).then(map = init());
 
 
 
 
 

 
 
 
 gui_module = (function (){
		// private:
    var params = {}
     		params.targetId = 'container'
  return {
  	// public:
    setParam: (key, value) => {
    	params[key] = value
    },
    setTargetDomId: (id) =>{
    	params['targetId'] = id;
    },
    getParam: (key) => {
    	if(!key) return params;
      if(params[key])
      return params[key]
      else return null;
      
    },
    addPanel: (cb, ...cb_params) => {
      target =  document.getElementById(params.targetId)
      elem   = document.createElement('div')
      elem.id = 'inner_div'
      if(!cb) cb = (e)=>{alert(e)}
      
      if(cb_params)
      elem.addEventListener('click',cb.bind(null, ...cb_params))
      else 
      elem.addEventListener('click',cb)
      target.appendChild(elem)
    },
  }
 }())
  
 
 
 gui_module.setTargetDomId('map')
 
 
 callback = (d) => {
 alert(d)
 }
 
...