---
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/ru/llms.txt
# Собственный макет балуна кластера
Open in CodeSandbox
В данном примере создается собственный макет контента балуна кластера.
Макет задается опцией 'clusterBalloonContentLayout'.
Макеты
объектов можно создавать с помощью фабрики templateLayoutFactory,
используя текстовые шаблоны.
Текстовые шаблоны формируют html-содержимое макета на основе хэша с данными,
передаваемого в конструктор макета.
В данном примере поставщиком данных является кластер, у которого был открыт балун.
В макете происходит перечисление и вывод полей 'placemarkId' и 'balloonContentHeader' всех геообъектов кластера при помощи конструкции 'for'.
{% list tabs %}
- index.html
```html
Собственный макет балуна кластера
```
- 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 = [];
// Создаем собственный макет с информацией о выбранном геообъекте.
var customBalloonContentLayout =
ymaps.templateLayoutFactory.createClass(
[
"",
].join("")
);
jQuery(document).on("click", "a.list_item", function () {
// Определяем по какой метке произошло событие.
var selectedPlacemark =
placemarks[jQuery(this).data().placemarkid];
alert(selectedPlacemark.properties.get("balloonContentBody"));
});
var clusterer = new ymaps.Clusterer({
clusterDisableClickZoom: true,
clusterOpenBalloonOnClick: true,
// Устанавливаем режим открытия балуна.
// В данном примере балун никогда не будет открываться в режиме панели.
clusterBalloonPanelMaxMapArea: 0,
// По умолчанию опции балуна balloonMaxWidth и balloonMaxHeight не установлены для кластеризатора,
// так как все стандартные макеты имеют определенные размеры.
clusterBalloonMaxHeight: 200,
// Устанавливаем собственный макет контента балуна.
clusterBalloonContentLayout: customBalloonContentLayout,
});
// Заполняем кластер геообъектами со случайными позициями.
for (var i = 0, l = 100; i < l; i++) {
var placemark = new ymaps.Placemark(getRandomPosition(), {
// Устаналиваем данные, которые будут отображаться в балуне.
balloonContentHeader: "Заголовок метки №" + (i + 1),
balloonContentBody: "Информация о метке №" + (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 %}