Как изменить макет карусели в кластере объектов Яндекс.Карты?

Подскажите, пожалуйста, как можно переписать стандартный макет балуна кластера "Карусель" 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);
});

Глобальная задача состоит:

  1. переместить панель с навигацией наверх.
  2. Изменить иконки кнопок вправо и влево.

В документации к API не нашел описания как это сделать.


Ответы (0 шт):