Макет балуна кластера

Не получится использовать один и тот же макет для балуна геообъекта и балуна кластера. Балун метки получает на вход набор данных, который включает в себя поле properties - это данные геообъекта.

Балун кластера получает на вход набор данных, который также содержит поле properties, но это уже другие данные - это данные кластера.

Чтобы в балуне кластера выводить данные геообъектов, которые входят в его состав, нужно будет написать специальный макет. Обсуждалось тут.

ну у меня почему-то не получилось ничего даже и для лаяуна балуна обычной метки.(код создание шаблона балуна я вам писалу верхнем сообщении), а вот код как я его прикручиваю к метке.

function createMetka(id,x,y,id_s){//функция создания метки и всей параметров для нее
       var coord=new Array();     
       coord.push(x);
       coord.push(y);
       if(myCollection[id_s]==null){
         myCollection[id_s] =[]; 
       }
        myPlacemark[id] = new ymaps.Placemark(coord,
        {
           myid:id,
           body : 'Загрузка...'
        },
        {
            balloonMinWidth:500,
            balloonMinHeight:300,
            balloonAutoPanMargin:[100,250],
            balloonContentBodyLayout:myBalloonContentBodyLayout,
            balloonAutoPan:true,
            preset: setStyle(id_s-1)
        });
       myCollection[id_s].push(myPlacemark[id]);
  }

насчет балуна кластера я читал, тоесть вы советуете просто уже манипулировать html+css чтобы там все красиво разместить? и маленький вопрос паралельно, когда я нажимаю на кластер срабатывает Build в котором выполняются все операции, но он почему-то их выполняет 4-5 раз при одном клике)))

Так, сначала про кластер. Вы внутри макета перезадавали данные для меток, а нужно перезадавать данные для кластера.

var BalloonLayout = ymaps.templateLayoutFactory.createClass("$[properties.body]

$[p

'+

'+

'+

'+

'+

'+

'+

'+''; 

                 this.getData().properties.set('body', strbal);
                 // parent.innerHTML = strbal;
                },'json')  
            })
            
        }
    });
    
    cluster = new ymaps.Clusterer({clusterBalloonContentBodyLayout: BalloonLayout});

Вы отпишитесь, если получится - я буду в балун меток вчитываться тогда :)

Так. Под конец дня на меня видимо нашло солнечное затмение.

var MainContentLayout = ymaps.templateLayoutFactory("", {

    build: function () {

        MainContentLayout.superclass.build.call(this);

        var activeObject = this.getData().state.get('activeObject');

        // тут каким-то образом из activeObject формируем содержимое балуна

       // и записываем его в переменную strbal

       this.getParentElement().innerHTML = strbal;

    }

});

clusterer.options.set('clusterBalloonmainContentLayout', MainContentLayout);

Таким образом вы сможете перезадать макет для правой части балуна кластера.

Первый вариант что Вы написали он не работает, ну или я снова где-то туплю (он сейчас залит на сервер), а второй вариант я посмотрю и потом вам вечерком отпишусь...

Марина, помогите пожалуйста:-).

пробовал код который вы ниже разместили, он не работал, я его немного поправил

var MainContentLayout = ymaps.templateLayoutFactory.createClass("", {
    build: function () {
      var data=this.getData();
      var  geoObjects = data.properties.get('geoObjects');
        for (var i = 0, l = geoObjects.length; i < l; i++) {
            geoObjects[i].properties.set('clusterCaption', i+1);
        }
    }
});

cluster = new ymaps.Clusterer();
    cluster.options.set({
        gridSize:50
    });
cluster.options.set({
    clusterBalloonMainContentLayout: MainContentLayout,
    clusterBalloonHeight:320,
    clusterBalloonSidebarWidth:25
});

Здесь я указал свойства какие мне нужно и с clusterCaption сделал что-то похожое на пагинатор.  но вот у меня возник вопрос теперь мне нужно в правую сторону, туда где должен быть контент, загрузить инфу для каждой из меток в кластере. а я незнаю как к нему обратиться.

К левой части получилось обратиться через

var data=this.getData();
      var  geoObjects = data.properties.get('geoObjects');

а вот как обращаться к правой части непойму.

Кстати вот ссылочка на страничку http://svadbagolik.cybers.net.ua/index2.php?center=55.74652199998748,37.536338&type=map&zoom=17&r=%D0%BC%D0%B5%D0%B6%D0%B4%D1%83%D0%BD%D0%B0%D1%80%D0%BE%D0%B4%D0%BD%D0%B0%D1%8F#

Основная проблема в вашем коде - это идеологические ошибки. Давайте попробуем навести порядок.

Вы задаете макет для опции clusterBalloonMainContentLayout.

Изначально макет пустой. (.createClass('', ...))

В функции build вы также ничего не добавляете в этот макет - то есть он так и останется пустым ( что и видно на картинке).

В функции Build вы перебираете все объекты кластера и записываете им в поле clusterCaption значения. В результате у вас корректно формируется список объектов в левой части.

Это действие верное, но не стоит его выполнять внутри макета. Перебрать геообъекты кластера и записать им значения можно сразу при создании кластера - при переопределении метода createCluster.

Итак, итоги

1. Вы верно запонили поле clusterCaption у геообъектов и у вас автоматически построился список объектов.

2. При формировании макета для правой части вы не задали ему никакого содержимого - поэтому он остался пустым. Попробуйте для эксперимента задать 

var MainContentLayout = ymaps.templateLayoutFactory.createClass("Тестовая строчка");

Здравствуйте Марина.

2. При формировании макета для правой части вы не задали ему никакого содержимого - поэтому он остался пустым. Попробуйте для эксперимента задать

я просто не вставил туда код ajax запроса так как не понимаю как вставить данные что придут для меток и которые находяться внутри кластера.

var MainContentLayout = ymaps.templateLayoutFactory.createClass("", {
    build: function () {
      var data=this.getData();
      var  geoObjects = data.properties.get('geoObjects');
        for (var i = 0, l = geoObjects.length; i < l; i++) {
            geoObjects[i].properties.set('clusterCaption', i+1);         
        }

$.post("obrabotka.php",{idget:name},function (json){
                 //вот тут код для вставки данных в балун
                },'json');
       
    }
});

Внутри функции build вы запрашиваете какие-то данные. Как только приходит ответ, вы его должны каким-то образом поместить в макет. Например так же, как вы делаете это в метке, через innerHTML.

var _this = this;

$.post("obrabotka.php",{idget:name},function (json){
    _this.getParentElement().innerHTML = 'server answer';                  
},'json'); 

кинул этот код на страничку. но оно я так понимаю  подгружается для всех елементов. А как подгрузить для каждого свое? ну при нажатии например на 2-ку подгрузить туда другой текст, тот который будет ему сответствовать...

Давайте я вам приведу свой код, который перезадает правую часть для кластера.

var center = [55.74954, 37.621587],

                    map = new ymaps.Map('map', { center: center, zoom: 10}),

                    // Создаем макет для правой части

                    MyMainContentLayout = ymaps.templateLayoutFactory.createClass('', {

                        build: function () {

                            MyMainContentLayout.superclass.build.call(this);

                            // будем следить за изменением состояния кластера

                            // и при смене выбранного геообъекта перезадавать содержимое

                            this.stateListener = this.getData().state.events.group()

                                .add('change', this.onStateChange, this);

                            this.activeObject = this.getData().state.get('activeObject');

                            this.applyContent();

                        },

                        clear: function () {

                            this.stateListener.removeAll();

                            MyMainContentLayout.superclass.clear.call(this);

                        },

                        onStateChange: function () {

                            var newActiveObject = this.getData().state.get('activeObject');

                            if (newActiveObject != this.activeObject) {

                                this.activeObject = newActiveObject;

                                this.applyContent();

                            }

                        },

                        applyContent: function () {

                            // Для того, чтобы макет автоматически изменялся при обновлении данных

                            // в геообъекте, создадим дочерний макет через фабрику

                            var subLayout = new MyMainContentSubLayout({

                                    options: this.options,

                                    properties: this.activeObject.properties

                                });

                            // прицепим новый макет к родителю

                            subLayout.setParentElement(this.getParentElement());

                        }

                    }),

                    // А вот и сам дочерний макет - он принимает на вход данные текущего выбранного геообъекта и показывает их.

                    MyMainContentSubLayout = ymaps.templateLayoutFactory.createClass(

                        '' +

                            '$[properties.name]
' +

                            '$[properties.description]' +

                        ''

                    ),

                    clusterer = new ymaps.Clusterer({

                        // зададим через опции макет для правой части балуна

                        clusterBalloonMainContentLayout: MyMainContentLayout,

                        clusterDisableClickZoom: true

                    }),

                    geoObjects = [];

                // Создадим 500 меток со случайными координатами около центра Москвы.

                for (i = 0; i < 500; i++) {

                    var coordinates = [

                        center[0] + 0.5 * Math.random() * Math.random() * Math.random() * Math.random() * (Math.random() < 0.5 ? -1 : 1),

                        center[1] + 0.7 * Math.random() * Math.random() * Math.random() * Math.random() * (Math.random() < 0.5 ? -1 : 1)

                    ];

                    geoObjects[i] = new ymaps.Placemark(coordinates, {

                        // Поля name и description будут показываться в правой части

                        name: 'Имя объекта №' + i,

                        description: 'Описание объекта №' + i,

                        // значение этого поля будет отображаться в левой части балуна в списке

                        clusterCaption: 'Заголовок объекта №' + i

                    });

                }

                clusterer.add(geoObjects);

                map.geoObjects.add(clusterer);

Эти макеты автоматически будут обновляться при смене активного объекта, и при смене значений полей геообъекта name и description балун тоже будет автоматически подстраиваться. То есть как только вам нужно показать содержимое для какого-то объекта в кластере, вы этому объекту задаете нужные значения в эти поля, и эти изменения покажутся в макете.

Задавать значения в полях вы можете где угодно и когда угодно.

Спасибо, попробую разобраться что к чему, если не получиться буду снова молить о помощи :)

ок)

Большое спасибо за этот рабочий пример.

subLayout.setParentElement(this.getParentElement());

Подскажите пжл, что нужно указать вместо this.getParentElement() для того, чтобы изменить данные в левой колнке?

Заранее благодарю.

Для изменения макета элемента списка в балуне в 2.0.18 появилась опция clusterSidebarItemLayout. Она не решит вашу задачу?

Решает. Спасибо. 

Делал динамическую загрузку балунов, при клике на первом элементе вызывается и загружает необходимые данные через Ajax,  вот только при выборе следующего элемента, данные в балун "Добавляются" с существующим содержимым.

Есть ли возможность очистить правую часть балуна от контента? 

Нужно посмотреть на ваш код, чтобы понять, что не так.

geoObjects = [];          //PlaceMarks fill                                                                                                                                            for(var i =0;i                var placemark= new ymaps.Placemark(Map.options.clusterer[i].coords, {                                                                                                       iconContent: "",                                                                                                                                                        balloonContentHeader: Map.options.clusterer[i].params.balloonContentHeader,//Линк на contentbody                                                                                             balloonContentFooter: Map.options.clusterer[i].params.balloonContentFooter,                                                                                         }, {                                                                                                                                                                        preset: "twirl#greenStretchyIcon"                                                                                                                                   });//Загрузка ContentBody            placemark.events.add('balloonopen', function (e) {                                                                                                                          e.get('target').properties.set('balloonContent', "Идет загрузка данных...");                                                                                            e.get('target').properties.set('balloonContent', loadHtmlView(e.get('target').properties.get('balloonContentFooter')));                                             });                                                                                                                                                                     geoObjects[i] = placemark;                                                                                                                                            placemark = null;                                                                                                                                                   }                                                                                                                                                                                                                                                                                                                                       //Template 4 clusterMainContentCluster = ymaps.templateLayoutFactory.createClass(''{   build:function(){       MainContentCluster.superclass.build.call(this);                                                          this.stateListener = this.getData().state.events.group().add('change',this.onStateChange,this);                      this.activeObject = this.getData().state.get('activeObject');                                                      this.applyContent();                                                                             },          clear:function(){       this.stateListener.removeAll();       MainContentCluster.superclass.clear.call(this);},   onStateChange:function(){var newActiveObject = this.getData().state.get('activeObject');if(newActiveObject!=this.activeObject){this.activeObject = newActiveObject;this.applyContent();       }   },applyContent: function(){this.activeObject.properties.set('balloonContentBody',loadHtmlView(this.activeObject.properties.get('balloonContentFooter')));var subLayout = new MainContentSubCluster({options:this.options,properties:this.activeObject.properties,       });       subLayout.setParentElement(this.getParentElement());},});MainContentSubCluster = ymaps.templateLayoutFactory.createClass('$[properties.balloonContentBody]');                                                                                                                                                                                                                                            clusterer = new ymaps.Clusterer();                                                                                                   clusterer.options.set({                                                                                                                                                gridSize: 50,       clusterBalloonMainContentLayout: MainContentCluster,        });          clusterer.add(geoObjects);                                                                                                                                    

Заранее благодарю. 

в функции applyContent вы создаете подмакет и прикрепляете его к родительскому элементу. Предыдущий подмакет так и остается висеть у родителя, и из-за этого получается отображение сразу нескольких наборов данных.

Сохраняйте ссылку на subLayout и перед созданием нового у старого вызывайте subLayout.setParentElement(null);

 Попробовал со сбросом родителя и занулением подмакета, но всё равно в балуне остаётся первое значение загруженного балуна. Сделал три балуна в одной точке, шаблон очищается, меняется содержимое балуна, но меняется второй шаблон, первый же сгенерированный при открытии балуна остаётся на месте.

    applyContent: function(){                                                                                                                                            this.activeObject.properties.set('balloonContentBody',loadHtmlView(this.activeObject.properties.get('balloonContentFooter')));                                          if(typeof this.subLayout !=="undefined"&&this.subLayout!=null)                                                                                                              this.subLayout.setParentElement(null);                                                                                                                              delete this.subLayout;                                                                                                                                                  this.subLayout = new MainContentSubCluster({                                                                                                                                options:this.options,                                                                                                                                                   properties:this.activeObject.properties,                                                                                                                            });                                                                                                                                                                     this.subLayout.setParentElement(this.getParentElement());                                                                                                           },                                                                                                                                                                  

А нет ссылки на страницу?

К сожалению пока нет, но всё же спасибо.

Подскажите пожалуйста, а как можно организовать прокрутку в правой части балуна кластера? Бывает, что текст не влазиет, но прокрутить его вниз нельзя!

В левой части прокрутка работает, но это благодаря clusterCaption, который задается еще при создании точки

Недавно разработчики карт закончили пример создания балуна, с динамическим изменением высоты, которая подстраивается под ваш контент http://ymapsapi.ya.ru/replies.xml?item_no=1091

с помощью CSS

Извините если туплю. может проще как-то через вот

Перебрать геообъекты кластера и записать им значения можно сразу при создании кластера - при переопределении метода createCluster.

чтобы тут все подгружать

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

да, если быть точнее, подгружать данные для меткок, как только кто-то открывает ее балун кластера. вот в этот момент я хочу подгрузить инфу по всех метках которые  остаются в кластере при максимальном зуме.

В таком случае нужно слушать на кластеризаторе событие 'balloonopen'.

В обработчике события можно получить ссылку на кластер, на котором открыли балун, и через него список геообъектов.

clusterer.events.add('balloonopen', function (e) {

    var cluster = e.get('target'),

         geoObjects = cluster.properties.get('geoObjects');

  // Далее для массива геообъектов подгружаем данные и записываем их в нужные поля

});

оо, это вроде попроще для меня)

cluster.events.add('balloonopen', function (e) {
    var cluster = e.get('target'),
    geoObjects = cluster.properties.get('geoObjects');
    geoObjects[0].properties.set('clusterCaption', 12);
    geoObjects[0].properties.set('body', 12);//у меня в шаблоне метки простой такой был параметр
});

у меня вопрос, код я обновил можете посмотреть на страничке.

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

Стандартный балун кластера показывает в правой части содержимое полей balloonContentBody, balloonContentHeader и balloonContentFooter геообъекта.

cluster.events.add('balloonopen', function (e) {
    var cluster = e.get('target'),
    geoObjects = cluster.properties.get('geoObjects');

    geoObjects[0].properties.set({

       clusterCaption: '12',

       balloonContentBody: 'Тело балуна',

       balloonContentHeader: 'Заголовок балуна',

       balloonContentFooter: 'Подвал балуна'

    });
});

То есть вы просто задаете значения этих полей в properties геообъекта - и стандартный балун начинает показывать содержимое как надо.

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

Знаю что уже надоел, но еще немножко) Вот что я набросал этот вариант сейчас на http://svadbagolik.cybers.net.ua/index2.php?center=55.74652199998748,37.536338&type=map&zoom=17&r=международная#

cluster.events.add('balloonopen', function (e) {
var geoObjects=[];
    var cluster = e.get('target'),
    geoObjects = cluster.properties.get('geoObjects');
    for (var i = 0, l = geoObjects.length; i < l; i++) {
        var GEo=geoObjects[i];
        GEo.properties.set({
            clusterCaption: i+1
        })
        var idgeo=GEo.properties.get('myid')
      
        $.post("obrabotka.php",{idget:idgeo},function (json){
                var strbal=json.markers[0].f_n+'

'+
                    json.markers[0].s_d+'

'+
                    'Адрес: '+json.markers[0].ads+'

'+
                    'Телефон: '+json.markers[0].ph+'

'+
                    'Email: '+json.markers[0].eil+'

'+
                    'Skype: '+json.markers[0].sk+'

'+
                    'Время работы: '+json.markers[0].w_h+'

'+
                    'Ссылка: '+json.markers[0].lin+'

';
                    GEo.properties.set({
                        balloonContentBody: strbal
                    });
          },'json');
    }
});

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

У вас загруженные данные для меток записываются в переменную GEo - она хранится в замыкании и всегда после окончания работы цикла смотрит на последнюю метку массива. Поэтому данные приезжают только для второго объекта.

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

И третья печальная весть - сейчас балун кластеризаторе не перестроится сразу, если у открытой метки поменять правую часть. Это починится в ближайших релизах, а пока посоветую задать макет для правой части, как я присылала ранее - он будет в этом плане работать как надо.

1. а как его разомкнуть, я просто не вижу где это по фаербагу показывает что приходят данные для обеих меток...

2. спасибо, я уже про это подумал, проверка будет но это уже кину в конце, тут это никак неслушается меня)

3.:-@

Давайте сначала с замыканием разберемся.

Сейчас у вас в замыкании сохранятеся ссылка на "GEo". Поскольку при переборе элементов массива используется одна и та же переменная, то и в памяти останется только 1 значение (какое последним записали, такое и будет).

Нам нужно, чтобы для каждого геообъекта из массива создался свой контекст исполнения - в каждом контексте исполнения будет своя локальная переменная currentGeoObject, тогда геообъекты не "перемешаются".

Если путанно объяснила - уже давали ссылку в другом обсуждении http://javascript.ru/basic/closure.

(function (currentGeoObject) {

$.post("obrabotka.php",{idget:idgeo},function (json){
                var strbal=json.markers[0].f_n+'

'+

'+

'+

'+

'+

'+

'+

'; 

})(geoObjects[i]);

Мы создали безымянную функцию, и сразу ее вызвали. Причем на вход подали очередной геообъект. Когда вернется jsonp-ответ для очередного геообъекта, он будет возвращен в одну из таких локальных функций, в ней будет сохранена ссылка на нужный геообъект, и данные запишутся куда надо.

еееееееееееееее :)

1. а как его разомкнуть, я просто не вижу где это по фаербагу показывает что приходят данные для обеих меток...

2. спасибо, я уже про это подумал, проверка будет но это уже кину в конце, тут это никак неслушается меня)

3.

Давайте теперь настроим макет для правой части. Задайте два макета, как я это делала в примере. Только второй надо немного поменять.

MyMainContentSubLayout = ymaps.templateLayoutFactory.createClass(

                        '' +

                            '$[properties.name]
' +

                            '$[properties.description]' +

                        ''

                    ),

меняем на

MyMainContentSubLayout = ymaps.templateLayoutFactory.createClass('$[properties.balloonContentBody]').

По идее все должно заработать как надо.

Здравствуйте. да, это заработало. но я потытался открыть балун кластера с помощью

/ Открытие балуна кластера с выбранным объектом.
var PLC=269,bylo=0;
// Поскольку по умолчанию объекты добавляются асинхронно,
// обработку данных можно делать только после события, сигнализирующего об
// окончании добавления объектов на карту.
if(PLC==269){
    cluster.events.add('objectsaddtomap', function () {
        if(bylo!=1){
            $('#help-visibility').click();
            // Получим данные о состоянии объекта внутри кластера.
            var geoObjectState = cluster.getObjectState(myPlacemark[PLC]);
            // Проверяем, находится ли объект находится в видимой области карты.
            if (geoObjectState.isShown) {
                // Если объект попадает в кластер, открываем балун кластера с нужным выбранным объектом.
                if (geoObjectState.isClustered) {
                    geoObjectState.cluster.state.set('activeObject', myPlacemark[PLC]);
                    geoObjectState.cluster.balloon.open();           
                } else {
                    // Если объект не попал в кластер, открываем его собственный балун.
                    myPlacemark[PLC].balloon.open();
                }
            }
            bylo=1
        }
    });
}

Проверка пока примитивная но смысл думаю понятен.

и тут появилось вот такое когда я передаю ссылку с параметрами http://svadbagolik.cybers.net.ua/index2.php?center=55.74652199998748,37.536338&type=map&zoom=17&r=%D0%BC%D0%B5%D0%B6%D0%B4%D1%83%D0%BD%D0%B0%D1%80%D0%BE%D0%B4%D0%BD%D0%B0%D1%8F там где зум нормальный то все красиво работает открывает тот что нужно кластер (м. Международная), а вот если просто без параметров заходить http://svadbagolik.cybers.net.ua/index2.php то открывается совсем иной балун. как быть?)

Вам неповезло - вы стали человеком, который нашел багу( Сейчас поковырялась и нашла, что кластеризатор не всегда отдавал нужный кластер для геообъекта в методе getObjectState. Багу уже поправила - она выедет в ближайшем релизе. Релиз состоится очень скоро (1-2 недели). Пока ничего не могу посоветовать - только ждать =(

я не хотел - чесно)  Буду ждать релиза нового. А так Громандое Вам СПАСИБО за помощь(+1). Вы супер!

)))

Медалью надо награждать за такие терпеливые повествования ;-)

ахах, согласен)

)))