Custom cluster balloon layout

Open in CodeSandbox

This example creates a custom layout for the cluster balloon content.
The layout is specified with the 'clusterBalloonContentLayout' option.
Layouts for objects can be created using the factory templateLayoutFactory and text templates.
Text templates generate the HTML content of the layout from data hashes passed to the layout constructor.
In this example, the data provider is the cluster where the balloon was opened.

The layout enumerates and outputs the 'placemarkId' and 'balloonContentHeader' fields for all the cluster's geo objects using the 'for' construction. 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <html>
        <head>
            <title>
                Examples. Custom layout for cluster balloon content.
            </title>
            <meta
                http-equiv="Content-Type"
                content="text/html; charset=UTF-8"
            />
            <script
                src="https://yandex.st/jquery/2.2.3/jquery.min.js"
                type="text/javascript"
            ></script>
            <!--
        Set your own API-key. Testing key is not valid for other web-sites and services.
        Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
    -->
            <script
                src="https://api-maps.yandex.ru/2.1/?lang=en_RU&amp;apikey=<your API-key>"
                type="text/javascript"
            ></script>
            <script
                src="cluster_custom_balloon_content_layout.js"
                type="text/javascript"
            ></script>
            <style>
                html,
                body {
                    margin: 0;
                    padding: 0;
                }
                html,
                body,
                #map {
                    width: 100%;
                    height: 100%;
                }

                .list {
                    list-style: none outside;
                    margin: 0;
                    padding: 0;
                }
                .list li {
                    padding-bottom: 10px;
                }
                .list a {
                    color: #207697;
                }
                .list a:hover {
                    color: #28b8f0;
                    text-decoration: none;
                }
            </style>
        </head>
        <body>
            <div id="map"></div>
        </body>
    </html>
</html>

jQuery(function () {
    ymaps.ready(function () {
        var mapCenter = [55.755381, 37.619044],
            map = new ymaps.Map("map", {
                center: mapCenter,
                zoom: 10,
                controls: [],
            }),
            placemarks = [];

        // Creating a custom layout with information about the selected geo object.
        var customBalloonContentLayout =
            ymaps.templateLayoutFactory.createClass(
                [
                    "<ul class=list>",
                    // Outputting a list of all geo objects in the cycle.
                    "{% for geoObject in properties.geoObjects %}",
                    '<li><a href=# data-placemarkid="{{ geoObject.properties.placemarkId }}" class="list_item">{{ geoObject.properties.balloonContentHeader|raw }}</a></li>',
                    "{% endfor %}",
                    "</ul>",
                ].join("")
            );

        jQuery(document).on("click", "a.list_item", function () {
            // Determining what placemark the event occurred on.
            var selectedPlacemark =
                placemarks[jQuery(this).data().placemarkid];
            alert(selectedPlacemark.properties.get("balloonContentBody"));
        });

        var clusterer = new ymaps.Clusterer({
            clusterDisableClickZoom: true,
            clusterOpenBalloonOnClick: true,
            /**
             * Setting the mode for opening the balloon.
             * In this example, the balloon will never open in the panel mode.
             */
            clusterBalloonPanelMaxMapArea: 0,
            /**
             * By default, the balloon options balloonMaxWidth and balloonMaxHeight are not set for the clusterer,
             * since all standard layouts have defined dimensions.
             */
            clusterBalloonMaxHeight: 200,
            // Setting a custom layout for balloon content.
            clusterBalloonContentLayout: customBalloonContentLayout,
        });

        // Populating the cluster with geo objects with random positions.
        for (var i = 0, l = 100; i < l; i++) {
            var placemark = new ymaps.Placemark(getRandomPosition(), {
                // Defining the data that will be displayed in the balloon.
                balloonContentHeader:
                    "The title of the placemark #" + (i + 1),
                balloonContentBody:
                    "Information about the placemark #" + (i + 1),
                placemarkId: i,
            });
            placemarks.push(placemark);
        }

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

        function getRandomPosition() {
            return [
                mapCenter[0] + (Math.random() * 0.3 - 0.15),
                mapCenter[1] + (Math.random() * 0.5 - 0.25),
            ];
        }
        clusterer.balloon.open(clusterer.getClusters()[0]);
    });
});