Блог API Яндекс.Карт

Пользовательский макет балуна кластера

7 марта 2013, 17:23

По многочисленным просьбам выкладываем пример того, как сделать собственный макет балуна кластера.

В примере наглядно показано, как в принципе реализовать полностью кастомный макет балуна как для отдельной метки, так и для кластера, а также как настраивать autoPan для своего балуна.

Балун кластера


Посмотреть пример в новом окне.

Пользуйтесь и присылайте свои примеры в комментариях, в клубе или на нашей страничке в Фейсбуке.

7 комментариев
в ie7 не работает

посмотрите, должен сейчас работать в ИЕ.

подскажите, у вас нет примера того, как задавать названия ссылок слева (метка 38, метка 42...), если используется xml + класстеры? т.е. нужен аналог clusterCaption для xml

если заменить clusterCaption на name должно работать.

не работает, name уже есть в xml, это заголовок, на вашем примере "поселок Гжелька".

xml и кластеры загружаю так

clusterer = new ymaps.Clusterer();
                    // Добавлеяем массив меток в кластер
                    clusterer.options.set({
                        gridSize: 100,
                        disableClickZoom: true,
                        minClusterSize:2,
                        synchAdd:true
                    });

                    var result = [];
                    url = 'http://dril.eu/solo/sggeneralmap.xml';
                    ymaps.geoXml.load(url)
                     .then(function (res) {
//        myMap.geoObjects.add(res.geoObjects);
res.geoObjects.each(function (geoObject) {
    result.push(geoObject);
    });
    clusterer.add(result);
});   
myMap.geoObjects.add(clusterer);
}

 

пока что склоняюсь к тому, что в xml нужно что-то добавить, но может быть наоборот, этот код требует доработки?

тебе нужно заменить поле в шаблоне элемента списка на то что присутсвует в xml. сейчас там выводится clusterCaption. если его заменить на name, будет выводиться name. замени на то что тебе подходит

Подскажите пожалуйста, как сделать кастомный контент балуна при клике на кластер, созданный objectsManager с кластеризацией на клиенте?

objectManager.clusters.events.add('click', function (e) {

                    jQuery.get(href, function(data) {

                        objectManager.clusters.setClusterOptions(e.get('objectId'), {

                           balloonContentLayout:  'cluster#EMPTY',  // какой лейаут должен быть?

                           clusterBalloonContentLayout: 'cluster#EMPTY', // или так?

                            balloonContent:  data, // ???

                            clusterBalloonContent: data, // ???

                        }) ;

                        objectManager.clusters.balloon.open( e.get('objectId') ) ;

                    }) ;

                    return false;

                }

 

В итоге открывается балун с дефолтовым layout в 2 колонки и пустой.