JSFiddle - React, Tailwind, and code Playground

by unnamed777

HTML

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map" style="width: 800px; height: 400px;"></div>

JavaScript

var map;

ymaps.ready(function () {
  ymaps.layout.storage.add('custom#emptyBalloon', ymaps.templateLayoutFactory.createClass('{% include options.contentLayout %}'));
  
  ymaps.layout.storage.add('custom#editPoiBalloonContent', ymaps.templateLayoutFactory.createClass('<div style="background-color: #FFFFFF; position: absolute; min-width: 20px; min-height: 20px;">param1: {{ data.param1 }}{{ properties.param1 }}</div>', {
  	build: function () {
  		this.constructor.superclass.build.call(this);
      console.log(this.getData().param1);
  	}
  }));


  map = new ymaps.Map(document.getElementById('map'), {
    center: [55.76, 37.64],
    zoom: 10,
    controls: ['typeSelector', 'rulerControl', 'searchControl', 'zoomControl']
  }, {
    autoFitToViewport: 'always',
    suppressMapOpenBlock: true
  });

  map.events.add('click', onMapClick);
});

function onMapClick(e)
{  
  map.balloon.open(e.get('coords'), {
            param1: 'aa',
            param2: 'bb'
        }, {
            layout: 'custom#emptyBalloon',
            contentLayout: 'custom#editPoiBalloonContent'
        });

}