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>
<div id="map"></div>
<div id="log"></div>

CSS

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

        #log {
            width: 200px;
            height: 100px;
            position: absolute;
            left: 5px;
            bottom: 5px;
            opacity: 0.7;
            padding: 5px;
            font-family: Courier, sans-serif;
            font-size: 14px;
            background: white;
            overflow: auto;
        }

JavaScript

ymaps.ready(init);

function init () {
    var log = document.getElementById('log'),
        myMap = new ymaps.Map("map", {
            center: [48.856929, 2.341198],
            zoom: 1,
            controls: ['zoomControl']
        }),
        myCircle = new ymaps.Circle([myMap.getCenter(), 1000000], {
            balloonContentBody: 'Балун',
            hintContent: 'Хинт'
        }, {
            draggable: true
        });
	//https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Polygon-docpage/#Polygon__events-summary
    myCircle.events.add([ 'mouseenter','mouseleave'  ], function (e) {
        log.innerHTML = '@' + e.get('type') + '<br/>' + log.innerHTML;
    });
    myCircle.events.add(['click' ], function (e) {
        console.warn(e)
    });
    myMap.geoObjects.add(myCircle);

    setupControls(myMap, myCircle);
}

function setupControls(map, geoObject) {
    var btnProperty = new ymaps.control.Button('Свойство: balloonHeader'),
        btnOption = new ymaps.control.Button('Опция: geodesic'),
        btnRadius = new ymaps.control.Button('Изменить радиус');

    btnProperty.options.set('maxWidth', 200);
    btnOption.options.set('maxWidth', 200);
    btnRadius.options.set('maxWidth', 200);

    btnProperty.events.add(['select', 'deselect'], function (e) {
        geoObject.properties.set('balloonContentHeader', e.get('type') == 'select' ? 'Заголовок' : undefined);
    });
    btnOption.events.add(['select', 'deselect'], function (e) {
        geoObject.options.set('geodesic', e.get('type') == 'select');
    });
    btnRadius.events.add(['select', 'deselect'], function (e) {
        geoObject.geometry.setRadius(e.get('type') == 'select' ? 2000000 : 1000000);
    });

    map.controls
        .add(btnProperty)
        .add(btnOption)
        .add(btnRadius);
}