JSFiddle - React, Tailwind, and code Playground

by ferryvg

HTML

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<div id="map" style="width:800px; height:600px"></div>

JavaScript

var map;

function init() {
    map = new ymaps.Map('map', {
        center: [47.227163, 39.744918],
        zoom: 12,
        behaviors: ['drag', 'scrollZoom', 'dblClickZoom']
    });
    
    var layerModel = {
            click            :    { generateMapEvent: true },
            contextmenu      :    { generateMapEvent: true },
            dblclick         :    { generateMapEvent: true },
            mousedown        :    { generateMapEvent: true },
            mouseenter       :    { generateMapEvent: true },
            mouseleave       :    { generateMapEvent: true },
            mousemove        :    { generateMapEvent: true },
            mouseup          :    { generateMapEvent: true },
            multitouchend    :    { generateMapEvent: true },
            multitouchmove   :    { generateMapEvent: true },
            multitouchstart  :    { generateMapEvent: true },
            wheel            :    { generateMapEvent: true }
        };
        
        ymaps.interactivityModel.storage.add('qwe', layerModel);

    var poly = new ymaps.Polygon([[
        [47.241239, 39.735199],
        [47.217151, 39.753052],
        [47.204518, 39.705331],
        [47.221595, 39.692971],
        [47.228144, 39.670655],
        [47.241239, 39.735199]
        ]], {}, {
        interactivityModel: 'qwe'
    });
    poly.properties.set('hintContent', poly.options.get('interactivityModel'));
    poly.events.add('click', function() {
        alert('test');
    });
    map.geoObjects.add(poly);
}

ymaps.ready(init);