JSFiddle - React, Tailwind, and code Playground

by Alen Doe

HTML

<div id="map"></div>

CSS

</style><script type="text/javascript" src="https://yandex.st/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<style>
#map{height:600px;}

JavaScript

ymaps.ready(function init() {
    map = new ymaps.Map('map', {
        center: [55.76, 37.64],
        zoom: 10,
        autoFitToViewport: 'always',
        controls: ['zoomControl', 'typeSelector', 'rulerControl', 'geolocationControl']
    });
    map.behaviors.disable("scrollZoom");
    
    var customBalloonContentLayout = ymaps.templateLayoutFactory.createClass('{{properties.balloonContent}}');
    objectManager = new ymaps.ObjectManager({
        clusterize: true,
        clusterOpenBalloonOnClick: false,
        clusterDisableClickZoom: true,
        clusterBalloonContentLayout: customBalloonContentLayout
    });
    
    objectManager.add(collection);
    map.geoObjects.add(objectManager);
    
    
    objectManager.clusters.events.add('click', function (e) {
        var clusterId = e.get('objectId');
        var cluster = objectManager.clusters.getById(clusterId);
        var clusterBalloonContent = cluster.properties.balloonContent;
        var clusterFeatures = cluster.features;
        alert(JSON.stringify(cluster.properties.geoObjects));
        if (clusterBalloonContent) {
            objectManager.clusters.balloon.open(clusterId);
        }

        cluster.properties.balloonContent = 'test data';
        objectManager.clusters.balloon.open(clusterId);
        
    });
    
});



var collection =...