Layout for cluster balloon "Two columns"

Open in CodeSandbox

This examples uses the cluster balloon layout "cluster#balloonTwoColumns".
This layout consists of two columns: a list of all geo objects, and information about the selected geo object.
The information about the selected geo object is set by a separate layout
and can be configured using the 'clusterBalloonItemContentLayout' option.
This example sets a custom layout with information about a geo object.

Layouts
for objects can be created using the templateLayoutFactory factory and text templates.
Text templates generate the HTML content of the layout from the data hash passed to the layout constructor.
In this example, the data provider is the geo object selected in the left column. 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <html>
        <head>
            <title>
                Examples. Customization of the "Two columns" cluster balloon
                layout.
            </title>
            <meta
                http-equiv="Content-Type"
                content="text/html; charset=UTF-8"
            />
            <!--
        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_balloon_twoColumns.js"
                type="text/javascript"
            ></script>
            <style>
                html,
                body {
                    margin: 0;
                    padding: 0;
                }
                html,
                body,
                #map {
                    width: 100%;
                    height: 100%;
                }

                .ballon_header {
                    font-size: 16px;
                    margin-top: 0;
                    margin-bottom: 10px;
                    color: #708090;
                }
                .ballon_body {
                    font-size: 14px;
                    text-align: center;
                }
                .ballon_footer {
                    font-size: 12px;
                    text-align: right;
                    border-top: 1px solid #7d7d7d;
                    color: #7d7d7d;
                    margin-top: 10px;
                }
            </style>
        </head>
        <body>
            <div id="map"></div>
        </body>
    </html>
</html>

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

    // Creating a custom layout with information about the selected geo object.
    var customItemContentLayout = ymaps.templateLayoutFactory.createClass(
        // The "raw" flag means that data is inserted "as is" without escaping HTML.
        "<h2 class=ballon_header>{{ properties.balloonContentHeader|raw }}</h2>" +
            "<div class=ballon_body>{{ properties.balloonContentBody|raw }}</div>" +
            "<div class=ballon_footer>{{ properties.balloonContentFooter|raw }}</div>"
    );

    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,
        // Setting the size of the balloon content layout (in pixels).
        clusterBalloonContentLayoutWidth: 350,
        // Setting a custom layout.
        clusterBalloonItemContentLayout: customItemContentLayout,
        // Setting the width of the left column, which contains a list of all geo objects in the cluster.
        clusterBalloonLeftColumnWidth: 120,
    });

    // Populating the cluster with geo objects with random positions.
    var placemarks = [];
    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: "Placemark #" + (i + 1),
            balloonContentBody: getContentBody(i),
            balloonContentFooter: "Matsuo Bashō",
        });
        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),
        ];
    }

    var placemarkBodies;
    function getContentBody(num) {
        if (!placemarkBodies) {
            placemarkBodies = [
                [
                    "Lonely stillness",
                    "A single cicada’s cry",
                    "Sinking into stone",
                ].join("<br/>"),
                [
                    "Moonlight slanting",
                    "Through all this long bamboo grove ",
                    "And nightingale song.",
                ].join("<br/>"),
                [
                    "It is deep autumn",
                    "My neighbor",
                    "How does he live, I wonder.",
                ].join("<br/>"),
            ];
        }
        return (
            "<strong>Body of the placemark #" +
            (num + 1) +
            "</strong><br/>" +
            placemarkBodies[num % placemarkBodies.length]
        );
    }
    clusterer.balloon.open(clusterer.getClusters()[0]);
});