JSFiddle - React, Tailwind, and code Playground

by boobooking

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.18/?lang=ru_RU&mode=debug"></script> <style> html, body {
    margin: 0;
    padding: 0;
}
html, body, #map {
    width: 100%;
    height: 100%;
}

JavaScript

init();

function init() {
    ymaps.ready(function () {
        loadMap();
    });
}

function loadMap() {
    var mapCenter = [55.755381, 37.619044];
    var map = new ymaps.Map('map', {
        center: mapCenter,
        zoom: 10,
        controls: []
    });
    var objectManager = new ymaps.ObjectManager({
        clusterize: true,
        clusterBalloonPanelMaxMapArea: 0
    });

    objectManager.clusters.options.set({
        balloonContentLayout: 'cluster#balloonCarousel'
    });

    <!-- при клике на некластеризованные объекты получаем содержимое балуна -->
    objectManager.objects.events.add('click', function (e) {
        var objectId = e.get('objectId');
        setBalloonData(objectId);
    });

    <!-- формируем содержимое балуна кластера -->
    objectManager.clusters.state.events.add('change', function () {
        var currentObject = objectManager.clusters.state.get('activeObject');
        <!-- При первом клике на кластер это событие change срабатывает 3 раза вместо одного и 2 из них это баг  -->
        <!-- console.log('Активный объект ' + objectId); -->
        if (currentObject) {
            var objectId = currentObject.id;
            setBalloonData(objectId);
        }
    });

    <!-- проверяем, что у этого объекта уже есть содержимое балуна -->
    function hasBalloonData(objectId) {
        return objectManager.objects.getById(objectId).properties.balloonContent;
    }

    <!-- получаем данные и устанавливаем содержимое балуна -->
    function setBalloonData(objectId) {
        if (!hasBalloonData(objectId)) {
            getBalloonData(objectId).done(function (data) {
                var object = objectManager.objects.getById(objectId);
                object.properties.balloonContent = data;
            });
        }
    }

    var placemarks = [];

    <!-- Добавляем 3 точки на карту -->
    <!-- 2 точки с одинаковой координатой, чтобы был кластер -->
    var placemark1 = {
        type: 'Feature',
        id: 1,
       ...