Как изменить макет карусели в кластере объектов Яндекс.Карты?
Подскажите, пожалуйста, как можно переписать стандартный макет балуна кластера "Карусель" cluster#balloonCarousel?
ymaps.ready(function () {
// Создание макета содержимого балуна.
// Макет создается с помощью фабрики макетов с помощью текстового шаблона.
var MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
'<div class="modal">' +
'<a class="modal__close" href="#close"></a>' +
'<div class="modal__body">' +
'$[[options.contentLayout]]' +
'</div>' +
'</div>', {
build: function () {
this.constructor.superclass.build.call(this);
this._$element = $('.modal', this.getParentElement());
this._$element.detach().prependTo('.overlay');
toggleOverlay();
this.closeClickCallback = ymaps.util.bind(this.onCloseClick, this);
this._$element.find('.modal__close').on('click', this.closeClickCallback);
},
clear: function () {
this._$element.find('.modal__close').off('click');
this.constructor.superclass.clear.call(this);
this._$element.detach();
},
onCloseClick: function (e) {
e.preventDefault();
this.events.fire('userclose');
toggleOverlay();
console.log('modal close click fired!');
}
});
// Создание вложенного макета содержимого балуна.
var MyBalloonContentLayout = ymaps.templateLayoutFactory.createClass(
'<div class="event">\
.... здесь какое-то описание ...\
</div>'
);
// Создаем собственный макет балуна кластера
var MyClusterBalloonLayout = ymaps.templateLayoutFactory.createClass(
'<div id="events_slider" class="modal">\
<a class="modal__close" href="#close"></a>\
<div class="modal__body">\
$[[options.contentLayout]]\
</div>\
</div >\
</div > ', {
build: function () {
this.constructor.superclass.build.call(this);
this._$element = $('.modal', this.getParentElement());
this.closeClickCallback = ymaps.util.bind(this.onCloseClick, this);
this._$element.find('.modal__close').on('click', this.closeClickCallback);
this._$element.detach().prependTo('.overlay');
toggleOverlay();
},
clear: function () {
this._$element.find('.modal__close').off('click');
this.constructor.superclass.clear.call(this);
this._$element.detach();
},
onCloseClick: function (e) {
e.preventDefault();
this.events.fire('userclose');
toggleOverlay();
},
});
var objectManager = new ymaps.ObjectManager({
clusterize: true,
gridSize: 64,
clusterMaxZoom: 10,
clusterMinClusterSize: 2,
clusterDisableClickZoom: true,
clusterBalloonLayout: MyClusterBalloonLayout,
clusterBalloonContentLayout: 'cluster#balloonCarousel',
clusterBalloonItemContentLayout: MyBalloonContentLayout,
clusterBalloonPanelMaxMapArea: 0,
clusterBalloonContentLayoutWidth: 540,
clusterBalloonContentLayoutHeight: 900,
clusterBalloonPagerType: 'marker',
groupByCoordinates: false
});
objectManager.objects.options.set({
iconLayout: myIcon,
iconShape: { type: 'Circle', coordinates: [0, 0], radius: 48 },
iconImageSize: [48, 48],
iconImageOffset: [-24, -24],
balloonContentLayout: MyBalloonContentLayout,
balloonLayout: MyBalloonLayout
});
myMap.geoObjects.add(objectManager);
});
Глобальная задача состоит:
- переместить панель с навигацией наверх.
- Изменить иконки кнопок вправо и влево.
В документации к API не нашел описания как это сделать.