---
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_custom_balloon_content_layout.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/cluster_custom_balloon_content_layout.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt
# 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.
{% list tabs %}
- index.html
```html
Examples. Custom layout for cluster balloon content.
```
- cluster_custom_balloon_content_layout.js
```js
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(
[
"",
].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]);
});
});
```
{% endlist %}