Макет балуна кластера "Карусель"

Open in CodeSandbox

Для отображения информации о геообъектах в составе кластера применяется балун.

Внешний вид балуна кластера определяется макетом. Можно использовать стандартные макеты или создавать собственные с помощью фабрики templateLayoutFactory, используя текcтовые шаблоны. Текстовые шаблоны формируют html-содержимое макета на основе хэша с данными, передаваемого в конструктор макета.

В данном примере используется стандартный макет балуна "Карусель". Балун кластера по умолчанию отслеживает изменение выбранного элемента и изменение полей выбранного элемента. Выбранный элемент сохраняется в поле кластера cluster.state.get('activeObject'). В примере создается подмакет с информацией о геообъекте. Макет "Карусель" передает подмакету объект properties с данными геообъекта и сам объект geoObject. 

<!DOCTYPE html>

<html>
    <head>
        <title>
            Примеры. Использование балуна кластера с макетом "Карусель".
        </title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.0/?load=package.standard,package.clusters&amp;lang=ru-RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <style>
            #map {
                width: 400px;
                height: 300px;
            }

            .entry {
                padding: 10px 20px 10px 15px;
            }

            .entry > * {
                margin-top: 6px;
            }

            .bold {
                font-weight: bold;
            }

            .author {
                text-align: right;
                font-style: italic;
                font-size: 0.8em;
                line-height: 0.8em;
                margin-right: 5px;
            }
        </style>

        <script
            src="cluster_balloon_carousel_layout.js"
            type="text/javascript"
        ></script>
    </head>

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

ymaps.ready(init);

function init() {
    var center = [55.819543, 37.611619],
        map = new ymaps.Map(
            "map",
            {
                center: center,
                zoom: 5,
            },
            {
                geoObjectClusterDisableClickZoom: true,
            }
        ),
        i,
        content = [
            [
                "Пятнадцать человек на сундук мертвеца, ",
                "Йо-хо-хо, и бутылка рому! ",
                "Пей, и дьявол тебя доведёт до конца. ",
                "Йо-хо-хо, и бутылка рому!",
            ],
            [
                "Их мучила жажда, в конце концов, ",
                "Йо-хо-хо, и бутылка рому! ",
                "Им стало казаться, что едят мертвецов. ",
                "Йо-хо-хо, и бутылка рому!",
            ],
            [
                "Что пьют их кровь и мослы их жуют. ",
                "Йо-хо-хо, и бутылка рому! ",
                "Вот тут-то и вынырнул чёрт Дэви Джонс. ",
                "Йо-хо-хо, и бутылка рому!",
            ],
            [
                "Он вынырнул с чёрным большим ключом, ",
                "Йо-хо-хо, и бутылка рому! ",
                "С ключом от каморки на дне морском. ",
                "Йо-хо-хо, и бутылка рому!",
            ],
            [
                "Таращил глаза, как лесная сова, ",
                "Йо-хо-хо, и бутылка рому! ",
                "И в хохоте жутком тряслась голова. ",
                "Йо-хо-хо, и бутылка рому!",
            ],
            [
                "Сказал он: «Теперь вы пойдёте со мной, ",
                "Йо-хо-хо, и бутылка рому! ",
                "Вас всех схороню я в пучине морской». ",
                "Йо-хо-хо, и бутылка рому!",
            ],
            [
                "И он потащил их в подводный свой дом, ",
                "Йо-хо-хо, и бутылка рому! ",
                "И запер в нём двери тем чёрным ключом. ",
                "Йо-хо-хо, и бутылка рому!",
            ],
        ],
        ClusterBalloonContentItemLayout =
            ymaps.templateLayoutFactory.createClass(
                [
                    "<div class=entry>",
                    "<div class=bold>$[properties.balloonContentHeader]</div>",
                    "<div>$[properties.balloonContentBody]</div>",
                    "<div class=author>$[properties.balloonContentFooter]</div>",
                    "</div>",
                ].join("")
            ),
        placemarks = [],
        clusterer = new ymaps.Clusterer({
            // Используем макет балуна кластера "карусель"
            clusterBalloonContentBodyLayout:
                "cluster#balloonCarouselContent",
            // Используем собственный подмакет для отображения информации о геообъекте
            clusterBalloonContentItemLayout:
                ClusterBalloonContentItemLayout,
            // Устанавливаем ограничение на количество элементов в нижней панели
            clusterBalloonPagerSize: 5,

            // Установка внешнего вида нижней панели.
            // Режим marker рекомендуется использовать с небольшим количеством элементов.
            // clusterBalloonPagerType: 'marker',

            clusterBalloonWidth: 220,
        });

    for (i = 0; i < 99; i++) {
        placemarks[i] = new ymaps.Placemark(getRandomCoordinates(), {
            balloonContentHeader: "Пиратская песня (" + (i + 1) + ")",
            balloonContentBody: getRandomContentPart(),
            balloonContentFooter: "Р.Л.Стивенсон",
        });
    }

    clusterer.add(placemarks);
    map.geoObjects.add(clusterer);

    function getRandomCoordinates() {
        return [
            center[0] +
                5.5 *
                    Math.random() *
                    Math.random() *
                    (Math.random() < 0.5 ? -1 : 1),
            center[1] +
                5.5 *
                    Math.random() *
                    Math.random() *
                    (Math.random() < 0.5 ? -1 : 1),
        ];
    }

    function getRandomContentPart() {
        return content[Math.floor(Math.random() * content.length)].join(
            "<br/>"
        );
    }
}