---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/cluster_balloon_accordion.md
- https://yandex.com/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/cluster_balloon_accordion.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/jsapi-v2-1/doc/ru/llms.txt
# Макет балуна кластера "Аккордеон"
Open in CodeSandbox
В примере используется макет балуна кластера "cluster#balloonAccordion".
В макете выводится список геообъектов, а после клика по элементу происходит отображение информации о геообъекте.
Информация о выбранном геообъекте задается отдельным макетом
и может быть настроена при помощи опции 'clusterBalloonItemContentLayout'.
В данном примере задается собственный макет с информацией о геообъекте.
Макеты
объектов можно создавать с помощью фабрики templateLayoutFactory,
используя текстовые шаблоны.
Текстовые шаблоны формируют html-содержимое макета на основе хэша с данными,
передаваемого в конструктор макета.
В данном примере поставщик данных - это геообъект.
{% list tabs %}
- index.html
```html
Макет балуна кластера "Аккордеон"
```
- cluster_balloon_accordion.js
```js
ymaps.ready(function () {
var mapCenter = [55.755381, 37.619044],
map = new ymaps.Map("map", {
center: mapCenter,
zoom: 9,
controls: [],
}),
// Возможные значения цветов иконок.
placemarkColors = [
"#FF1F1F",
"#1F44FF",
"#1FFF8E",
"#FF1FF5",
"#FFEF1F",
"#FF931F",
"#AE6961",
"#6193AE",
];
// Создаем собственный макет с информацией о выбранном геообъекте.
var customItemContentLayout = ymaps.templateLayoutFactory.createClass(
// Флаг "raw" означает, что данные вставляют "как есть" без экранирования html.
"" +
"{{ properties.balloonContentBody|raw }}
" +
""
);
var clusterer = new ymaps.Clusterer({
clusterDisableClickZoom: true,
clusterOpenBalloonOnClick: true,
// Устанавливаем стандартный макет балуна кластера "Аккордеон".
clusterBalloonContentLayout: "cluster#balloonAccordion",
// Устанавливаем собственный макет.
clusterBalloonItemContentLayout: customItemContentLayout,
// Устанавливаем режим открытия балуна.
// В данном примере балун никогда не будет открываться в режиме панели.
clusterBalloonPanelMaxMapArea: 0,
// Устанавливаем размеры макета контента балуна (в пикселях).
clusterBalloonContentLayoutWidth: 250,
clusterBalloonContentLayoutHeight: 200,
// Можно отключить отображение иконок геообъектов в списке.
// В браузере Internet Explorer ниже 9й версии иконки никогда не будут отображаться.
// clusterBalloonAccordionShowIcons: false
});
// Заполняем кластер геообъектами со случайными позициями.
var placemarks = [];
for (var i = 0, l = 100; i < l; i++) {
var placemark = new ymaps.Placemark(
getRandomPosition(),
{
// Устаналиваем данные, которые будут отображаться в балуне.
balloonContentHeader: "Метка №" + (i + 1),
balloonContentBody: getContentBody(i),
balloonContentFooter: "Мацуо Басё",
},
{
iconColor: getRandomColor(),
}
);
placemarks.push(placemark);
}
clusterer.add(placemarks);
map.geoObjects.add(clusterer);
function getRandomPosition() {
return [
mapCenter[0] + (Math.random() * 0.6 - 0.3),
mapCenter[1] + (Math.random() * 0.8 - 0.4),
];
}
function getRandomColor() {
return placemarkColors[
Math.round(Math.random() * placemarkColors.length)
];
}
var placemarkBodies;
function getContentBody(num) {
if (!placemarkBodies) {
placemarkBodies = [
[
"Снег согнул бамбук,",
"Словно мир вокруг него",
"Перевернулся.",
].join("
"),
[
"Пустое гнездо.",
"Так и покинутый дом -",
"Выехал сосед.",
].join("
"),
[
"В жару крестьянин",
"Прилег на цветы вьюнка.",
"Так же прост наш мир.",
].join("
"),
];
}
return (
"Тело метки №" +
(num + 1) +
"
" +
placemarkBodies[num % placemarkBodies.length]
);
}
clusterer.balloon.open(clusterer.getClusters()[0]);
});
```
{% endlist %}