Стилизовать кластер типа карусель

Пост в архиве.

d-jeston

25 апреля 2015, 23:49

Здравствуйте.
У меня есть кластер:

clusterer = new ymaps.Clusterer({
    preset: 'islands#brownClusterIcons',
clusterBalloonLayout: yyy,
clusterDisableClickZoom: false,
clusterOpenBalloonOnClick: true,
clusterBalloonContentLayout: 'cluster#balloonCarousel',
clusterBalloonItemContentLayout: customItemContentLayout,
clusterBalloonPanelMaxMapArea: 0,
clusterBalloonContentLayoutWidth: 240,
clusterBalloonContentLayoutHeight: 100,
clusterBalloonPagerSize: 5

});

где customContentLaout задан примерно так:

customItemContentLayout = ymaps.templateLayoutFactory.createClass(
    '<h2 class=ballon_header>{{properties.balloonContentHeader|raw }}</h2>' +
    '<div class=ballon_body>{{properties.balloonContentForCluster|raw }}</div>' +
    '<div class=ballon_footer>{{properties.balloonContentFooter|raw }}</div>'

);

Мне бы хотелось получить балун полностью кастомизированным, потому как прописанные мной стили меняют только контент, а рамка солидной толщины всё равно остаётся белой.

Я пытаюсь задать шаблон в clusterBalloonLayout: yyy,

yyy = ymaps.templateLayoutFactory.createClass(
    '<div style="1px solid black">!!!!</div>'

);

однако это полностью меняет вид кластера в виде карусели - сама карусель пропадет.

Что я делаю не так ?

5 комментариев

Авторизуйтесь, чтобы оставить комментарий

dimik

27 января 2016, 22:48

clusterBalloonContentLayout

d-jeston

27 января 2016, 22:48

Я, наверно, дал недостаточно информации:

при вот таком описании кластера я виду у себя карте его в таком виде:

http://prntscr.com/6ybebv

Если перекрыть его CSS вручную, то я получаю такое:

http://prntscr.com/6ybep1

Однако CSS-код карты, очевидно, меняется со временем, так что хотелось бы получить более устойчивое решение.

Если заменить clusterBalloonContentLayout на что-то другое, то карусель исчезает, оставляя вместо себя подставленный макет, что меня не устраивает. С другой стороны, можно написать на основе моего макета новую карусель, но может есть встроенное решение ?

dimik

27 января 2016, 22:48

Там структура следующая:

ClusterBalloonLayout -> ClusterBalloonContentLayout (карусель) -> ClusterBalloonContentItemLayout

Если нужен свой HTML вокруг карусели – перекрываете ClusterBalloonLayout.

Если нужно поменять саму карусель – надо перекрывать ClusterBalloonContentLayout

d-jeston

27 января 2016, 22:48

Я перекрыл кластер так:


clusterer = new ymaps.Clusterer({
        preset: 'islands#brownClusterIcons',
        clusterDisableClickZoom: false,
        clusterOpenBalloonOnClick: true,
        clusterBalloonContentLayout: 'cluster#balloonCarousel',
        clusterBalloonItemContentLayout: customItemContentLayout,
        clusterBalloonPanelMaxMapArea: 0,
        clusterBalloonContentLayoutWidth: 240,
        clusterBalloonContentLayoutHeight: 100,
        clusterBalloonPagerSize: 5
    });

    ClusterBalloonLayout = ymaps.templateLayoutFactory.createClass(
       "тут div с определением стиля, который парсер почему-тто съедает",
        {
            build: function(){this.constructor.superclass.build.call(this)}

        }
    )
    ymaps.layout.storage.add('cluster#balloonCarousel', ClusterBalloonLayout);

В итоге я получил на карте такое:

http://prntscr.com/6yoef5

Убилась карусель и стилизовалась внутренняя рамка.

А мне бы хотелось переопределить стиль ymaps-2-1-23-balloon__content - не ломая саму карусель.

Спасибо за ваши ответы.

innerdev

2 ноября 2018, 17:35

d-jeston,

Вы как-нибудь решили эту проблему? Я бьюсь с этим уже не первый час.