---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/cluster_balloon_twoColumns.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/cluster_balloon_twoColumns.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt
# 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.
{% list tabs %}
- index.html
```html
Examples. Customization of the "Two columns" cluster balloon
layout.
```
- cluster_balloon_twoColumns.js
```js
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.
"" +
"{{ properties.balloonContentBody|raw }}
" +
""
);
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("
"),
[
"Moonlight slanting",
"Through all this long bamboo grove ",
"And nightingale song.",
].join("
"),
[
"It is deep autumn",
"My neighbor",
"How does he live, I wonder.",
].join("
"),
];
}
return (
"Body of the placemark #" +
(num + 1) +
"
" +
placemarkBodies[num % placemarkBodies.length]
);
}
clusterer.balloon.open(clusterer.getClusters()[0]);
});
```
{% endlist %}