Пользовательские кнопки в API Яндекс.Карт 2.0

Для того чтобы создать собственный макет элемента управления, нужно разобраться в части архитектуры API. В статье проводится краткий обзор понятий, с которыми должен ознакомиться разработчик перед выполнением этой задачи и объясняется общий принцип взаимодействия логической и визуальной части элементов управления. Также рассматриваются три примера по созданию макетов – от простого к сложному.

Статья рассчитана на разработчиков, которые уже имели опыт работы с API Яндекс.Карт 2.0. Для знакомства с основными концепциями рекомендую прочитать руководство разработчика.

Основные понятия

Что такое макет?

Макет – это визуальное представление элемента управления. По сути, макет – объект, который умеет на основе передаваемых ему данных генерировать html.

Макет получает на вход объект с полями:

— control — ссылка на элемент управления;

— options — менеджер опций элемента управления;

— data — менеджер данных элемента управления;

— state — менеджер состояния элемента управления.

Что такое менеджер опций (состояния, данных)?

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

Получать и задавать опции или данные можно следующим образом:

smallZoomControl.options.get(‘layout’); // получаем опцию layout
smallZoomControl.data.set(‘publicId’, myId); // запись произвольного поля в менеджер данных

В чем разница между опциями, данными и состоянием?

Опции – это рекомендации ко внешнему виду элемента управления. Например, через опции задается класс макета ('layout'), минимальная ширина кнопки ('minWidth') и т.д.
Важная особенность опций – возможность наследования от родителей. То есть опции можно задавать как напрямую, так и через любой из родительских элементов. При задании опций через родительские элементы, как правило, используется префикс. Например, опцию ’layout’ для control.Button можно задать через карту как ‘buttonLayout’ (‘button’ + ‘layout’).

Данные – это набор полей, описывающих информационное содержимое элемента. Например, данными может являться заголовок списка ('title') или содержимое кнопки ('content'). Данные не наследуются от родительских элементов и задаются только напрямую в объект.

Состояние – это набор полей, описывающих текущее состояние элемента управления. Поля состояния могут изменяться в результате действий пользователя.
Примеры полей состояния:

— 'expanded' — признак, раскрыт или свернут выпадающий список;

— 'selected' — признак, нажата или отжата кнопка.

Поля состояния также не наследуются от родительских элементов и могут самостоятельно изменяться в результате действий над элементом управления (например, в результате вызова метода button.select() изменится поле состояния кнопки ‘selected’).

Пример 1. Формирование макета на основе данных, опций и состояния элемента управления

Чаще всего макеты создаются с помощью специальной фабрики templateLayoutFactory. Фабрика позволяет задавать текстовый шаблон, с помощью которого впоследствии будет сформировано dom-представление элемента.

Рассмотрим пример создания собственного макета для control.Button. Что мы хотим получить от созданного макета:

1. В кнопке должна быть какая-то надпись;

2. У кнопки есть 2 состояния – когда она нажата и когда она не нажата.

Надпись – это значение одного из полей данных кнопки. Стандартная реализация кнопки использует поле 'content':

myButton.data.get(‘content’);

Нам ничего не мешает использовать другое произвольное поле данных, если это необходимо. Например:

myButton.data.set(‘caption’, ‘Сохранить’);

В данном случае обойдемся стандартным полем данных.

В нашем примере dom-представлением кнопки будет являться элемент div:

<div class=’my-button’>Заголовок кнопки</div>

Итак, нужно, чтобы вместо фразы ‘Заголовок кнопки’ подставилось поле из данных элемента управления. Создание макета кнопки будет выглядеть следующим образом:

var ButtonLayout = ymaps.templateLayoutFactory.createClass("<div class='my-button'> $[data.content] </div>");

Вместо текста 'Заголовок кнопки' мы вставили шаблон '$[data.content]'.

Фабрика макетов умеет обращаться с менеджерами данных, опций или состояний. Поэтому мы обращаемся к полю ‘content’ через точку – фабрика самостоятельно сможет определить, что data является менеджером данных, и выполнить операцию data.get(‘content’).

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

С первым пунктом мы справились. Переходим к пункту два.

В обычном состоянии кнопка выглядит так:

<div class=’my-button’>Заголовок кнопки</div>

В нажатом состоянии она выглядит так:

<div class=’my-button my-button-selected’>Заголовок кнопки</div>

То есть элементу div дописывается специальный класс, который меняет внешний вид кнопки.

Модифицируем наш текстовый шаблон:

var ButtonLayout = ymaps.templateLayoutFactory.createClass("<div class='my-button 
[if state.selected]my-button-selected[endif]'>$[data.content]</div>");

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

Посмотреть пример.

Пример 2. Макет, который взаимодействует с элементом управления

Рассмотрим более сложный пример – создание элемента управления коэффициентом масштабирования карты, проще говоря — 'зум-контрола'.

Html-шаблон нашего элемента управления выглядит так:

<div>
     <div id='zoom-in'>+</div>
     <div id='zoom-out'>-</div>
</div>

От созданного макета мы хотим получить следущее – при клике на элемент с плюсом или минусом нужно увеличивать или уменьшать зум карты на 1.

В документации сказано, что макет control.SmallZoomControl реализует интерфейс IZoomControlLayout. Читаем описание интерфейса и находим описание события 'zoomchange':

Zoomchange — cобытие, инициирующее смену коэффициента масштабирования карты. Экземпляр класса Event. Имена полей, доступных через метод Event.get:

— newZoom — новое значение коэффициента масштабирования;

— oldZoom — старое значение коэффициента масштабирования.

Это означает следующее – когда макет посылает событие ‘zoomchange’, элемент управления ловит его и соответственно реагирует (то есть изменяет коэффициент масштабирования карты).

Нужно, чтобы после формирования html макета на определенные элементы были навешаны слушатели. В частности, нужно слушать события ‘click’ на элементах с id=’zoom-in’ и id=’zoom-out’. В обработчиках клика мы будем генерировать событие 'zoomchange', в поля которого будут передаваться старый и новый коэффициенты масштабирования карты.

Создание макета для зум-контрола будет выглядеть следующим образом:

// Создадим пользовательский макет ползунка масштаба.
var MyZoomLayout = ymaps.templateLayoutFactory.createClass("<div>" + 
            "<div id='zoom-in'>+</div>" +
            "<div id='zoom-out'>-</div>" +
        "</div>", {

        // Переопределяем методы макета, чтобы выполнять дополнительные действия
        // при построении и очистке макета.
        build: function () {
            // Вызываем родительский метод build.
            MyZoomLayout.superclass.build.call(this);

            // Начинаем слушать клики на кнопках макета.
            $('#zoom-in').bind('click', ymaps.util.bind(this.zoomIn, this));
            $('#zoom-out').bind('click', ymaps.util.bind(this.zoomOut, this));
        },
 
        clear: function () {
            // Снимаем обработчики кликов.
            $('#zoom-in').unbind('click');
            $('#zoom-out').unbind('click');

            // Вызываем родительский метод clear.
            MyZoomLayout.superclass.clear.call(this);
        },
 
        zoomIn: function () {
            var map = this.getData().control.getMap();
            // Генерируем событие, в ответ на которое
            // элемент управления изменит коэффициент масштабирования карты.
            this.events.fire('zoomchange', {
                oldZoom: map.getZoom(),
                newZoom: map.getZoom() + 1
            });
        },
 
        zoomOut: function () {
            var map = this.getData().control.getMap();
            this.events.fire('zoomchange', {
                oldZoom: map.getZoom(),
                newZoom: map.getZoom() - 1
            });
        }
  });

Посмотреть пример

На примере control.SmallZoomControl мы рассмотрели, как взаимодействуют элемент управления и его макет. Обобщим полученные знания в схеме:

Макет элемента управления строится на основе полей 'state', 'data' или 'options' и следит за их изменениями. При изменении значений полей макет перестраивается.

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

Пример 3. Создание макета группового элемента управления

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

Создадим макет для выпадающего списка.

Html-макет раскрытого списка выглядит следующим образом:

<div id='my-listbox-header'>Заголовок списка</div>
<div id='my-listbox’>
    Первый элемент списка<br/>
    Второй элемент списка<br/>
</div>

Выпишем, что мы хотим получить от готового макета:

1. Нужно, чтобы в макет подставлялся заголовок списка;
2. Нужно, чтобы дочерние элементы списка автоматически добавлялись в указанный dom-элемент родителя;
3. Наш список должен уметь сворачиваться и разворачиваться;
4. Нужно каким-то образом задать внешний вид элементам списка.

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

var MyListBoxLayout = ymaps.templateLayoutFactory.createClass(
        "<div id='my-listbox-header'>$[data.title]</div>” +
        “<div id='my-listbox’></div>"
    );

Теперь перейдем ко второму пункту.

Родительским dom-элементом в нашем выпадающем списке будет элемент <div id='my-listbox’>.

Макет группового элемента управления должен реализовывать интерфейс IGroupControlLayout. Особенность этого интерфейса – наличие метода getChildContainerElement. Через этот метод элемент управления получает dom-элемент, к которому ему нужно прикреплять html-макеты дочерних элементов.

var MyListBoxLayout = ymaps.templateLayoutFactory.createClass(
        "<div id='my-listbox-header'>$[data.title]</div>” +
        “<div id='my-listbox’ ></div>", { 
        build: function() {
            MyListBoxLayout.superclass.build.call(this);
            this.childContainerElement = $('#my-list-box')[0]; 
        },
 
        getChildContainerElement: function () {
            return this.childContainerElement;
        }
    });

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

Поскольку наш макет содержит подстановку '$[data.title]', он может перестраиваться. Как только это поле будет изменено, макет вызовет пару методов clear и build, чтобы обновить свое html-отображение. В таком случае dom-элемент, который служит контейнером для дочерних элементов, изменится (да, он будет точно такой же, как предыдущий, но это физически будет другой dom-элемент).

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

Каждый раз при перестроении будем генерировать событие интерфейса IGroupControlLayout 'childcontainerchange'.

var MyListBoxLayout = ymaps.templateLayoutFactory.createClass(
        "<div id='my-listbox-header'>$[data.title]</div>” +
        “<div id='my-listbox’></div>", { 
        build: function() {
            MyListBoxLayout.superclass.build.call(this);
            this.childContainerElement = $('#my-list-box')[0];
            // Генерируем специальное событие, оповещающее элемент управления
            // о смене контейнера дочерних элементов. 
            this.events.fire('childcontainerchange', {
                newChildContainerElement: this.childContainerElement,
                oldChildContainerElement: null
            });
        },

        clear: function () {
            // Заставим элемент управления перед очисткой макета
            // откреплять дочерние элементы от родительского.
            // Это защитит нас от неожиданных ошибок,
            // связанных с уничтожением dom-элементов в ранних версиях ie.
            this.events.fire('childcontainerchange', {
                newChildContainerElement: null,
                oldChildContainerElement: this.childContainerElement
            });
            this.childContainerChange = null;
            MyListBoxLayout.superclass.clear.call(this);
        },
 
        getChildContainerElement: function () {
            return this.childContainerElement;
        }
    });

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

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

Внешний вид элемента управления в свернутом состоянии:

<div id='my-listbox-header'>Заголовок списка</div>

Внешний вид элемента управления в развернутом состоянии:

<div id='my-listbox-header'>Заголовок списка</div>
<div id='my-listbox’>
    Первый элемент списка<br/>
    Второй элемент списка<br/>
</div>

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

var MyListBoxLayout = ymaps.templateLayoutFactory.createClass(
        "<div id='my-listbox-header'>$[data.title]</div>” +
        “<div id='my-listbox’ style='display: [if state.expanded]block[else] none[endif];’></div>", { 
        build: function() {
            MyListBoxLayout.superclass.build.call(this);
            this.childContainerElement = $('#my-list-box')[0];
            // Генерируем специальное событие, оповещающее элемент управления
            // о смене контейнера дочерних элементов. 
            this.events.fire('childcontainerchange', {
                newChildContainerElement: this.childContainerElement,
                oldChildContainerElement: null
            });
        },

        clear: function () {
            // Заставим элемент управления перед очисткой макета
            // откреплять дочерние элементы от родительского.
            // Это защитит нас от неожиданных ошибок,
            // связанных с уничтожением dom-элементов в ранних версиях ie.
            this.events.fire('childcontainerchange', {
                newChildContainerElement: null,
                oldChildContainerElement: this.childContainerElement
            });
            this.childContainerChange = null;
            MyListBoxLayout.superclass.clear.call(this);
       },

      getChildContainerElement: function () {
          return this.childContainerElement;
     }
 });

Мы настроили макет, который реагирует на изменение состояния элемента управления. Теперь нужно настроить обратную связь – в зависимости от действий пользователя посылать элементу управления команды «свернуться» или «развернуться». К счастью, control.ListBox по умолчанию сворачивается или разворачивается по клику на макете. Так что в данном примере никаких дополнительных действий для этого совершать не надо. Если бы нас не устроило поведение по умолчанию, мы могли бы самостоятельно отправлять команды элементу управления через макет, как мы это делали с control.SmallZoomControl.

Осталось создать макет для элементов выпадающего списка. Это делается довольно просто.

ymaps.templateLayoutFactory.createClass("$[data.content]<br/>");

Посмотреть пример

Еще один пример реализации пользовательских макетов

Для демонстрации возможностей макетов мы отобрали шесть самых популярных элементов управления картой в API (Кнопка, Раскрывающийся список, Поиск по карте, Простой элемент управления масштабом карты, Панель управления пробками, и Переключатель типа карты) и изменили их дизайн с помощью популяного css-фреймворка Twitter Bootstrap.

Посмотреть пример

Код на гитхабе

Построение меню из массива исходных данных

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

Допустим у нас есть такой массив исходных данных:


// Группы объектов
var groups = [{
name: "Известные памятники",
preset: "twirl#redIcon",
style: "important",
items: [{
center: [50.426472, 30.563022],
name: "Монумент 'Родина-Мать'"
}, {
center: [50.45351, 30.516489],
name: "Памятник Богдану Хмельницкому"
}, {
center: [50.454433, 30.529874],
name: "Арка Дружбы народов"
}]
}, {
name: "Покушайки",
preset: "twirl#greenIcon",
style: "success",
items: [{
center: [50.50955, 30.60791],
name: "Ресторан 'Калинка-Малинка'"
}, {
center: [50.429083, 30.521708],
name: "Бар 'Сало-бар'"
}, {
center: [50.450843, 30.498271],
name: "Абсент-бар 'Палата №6'"
}, {
center: [50.454834, 30.516498],
name: "Ресторан 'Спотыкач'"
}]
}, {
name: "Оригинальные музейчики",
preset: "twirl#orangeIcon",
style: "warning",
items: [{
center: [50.443334, 30.520163],
name: "Музей грамзаписи и старинных музыкальных инструментов"
}, {
center: [50.446977, 30.505269],
name: "Музей истории медицины или Анатомический театр"
}, {
center: [50.452512, 30.530889],
name: "Музей воды. Водно-информационный центр"
}]
}, {
name: "Красивости",
preset: "twirl#blueIcon",
style: "info",
items: [{
center: [50.45987, 30.516174],
name: "Замок Ричарда-Львиное сердце"
}, {
center: [50.445049, 30.528598],
name: "'Дом с химерами'"
}, {
center: [50.449156, 30.511809],
name: "Дом Рыцаря"
}]
}];

Чтобы создать на его основе меню и маркеры на карте, нам необходимо в цикле перебирать элементы этого массива, например, с помощью стандартного метода forEach:


// Контейнер для меню.
var menu = $('<ul class="nav nav-list"/>');
// Перебираем все группы.
groups.forEach(function (group) {
// DOM-представление группы.
var menuItem = $('<li class="nav-header">' + group.name + ''),
// Создадим коллекцию для геообъектов группы.
collection = new ymaps.GeoObjectCollection(null, { preset: group.preset });
});

Для каждого элемента массива, представляющего собой описание группы геообъектов, мы создаем DOM-представление в виде элемента меню и представление на карте: коллекцию. Затем мы добавляем коллекцию на карту, а элемент — в меню. Мы будем обрабатывать клики на элементе и при их возникновении будем удалять или добавлять соответствующую коллекцию на карту, а также скрывать или отображать подменю.


// Добавляем коллекцию на карту.
myMap.geoObjects.add(collection);
menuItem
// Добавляем пункт в меню.
.appendTo(menu)
// Навешиваем обработчик клика по пункту меню.
.on('click', function (e) {
// Скрываем/отображаем пункты меню данной группы.
$(this)
.nextUntil('.nav-header')
.removeClass('active')
.slideToggle('fast');
// Скрываем/отображаем коллекцию на карте.
if (collection.getParent()) {
myMap.geoObjects.remove(collection);
} else {
myMap.geoObjects.add(collection);
}
});

Далее мы обрабатываем все элементы группы также с помощью forEach:


// Перебираем элементы группы.
group.items.forEach(function (item) {
// DOM-представление элемента группы.
var menuItem = $('<li><a href="javascript:void(0)">' + item.name + '</a></li>'),
// Создаем метку.
placemark = new ymaps.Placemark(item.center, { balloonContent: item.name });
// Добавляем метку в коллекцию.
collection.add(placemark);
menuItem
// Добавляем пункт в меню.
.appendTo(menu)
// Навешиваем обработчик клика по пункту меню.
.on('click', function (e) {
// Отменяем основное поведение (переход по ссылке)
e.preventDefault();
// Выставляем/убираем класс active.
menuItem
.toggleClass('active')
.siblings('.active')
.removeClass('active');
// Открываем/закрываем баллун у метки.
if (placemark.balloon.isOpen()) {
placemark.balloon.close();
} else {
// Плавно меняем центр карты на координаты метки.
myMap.panTo(placemark.geometry.getCoordinates(), {
delay: 0,
callback: function () {
placemark.balloon.open();
}
});
}
});
});

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

После обработки всех данных нам остается добавить меню на страницу и установить область видимости карты в соответствии с её содержимым:


// Добавляем меню в сайдбар.
menu.appendTo($('#sidebar'));
// Выставляем масштаб карты чтобы были видны все группы.
myMap.setBounds(myMap.geoObjects.getBounds());


Итоговый код можно посмотреть тут.

Построение меню на основе YMapsML-файла

Этот вариант является достаточно распространенным, т.к. довольно удобно хранить коллекции геообъектов в формате XML у себя на сервере или на maps.yandex.ru в Моих картах. Реализовать его, пожалуй, даже проще в связи с тем, что geoXML-загрузчик возвращает нам готовые API-коллекции геообъектов, которые нам остается только добавить на карту.


// Загрузка YMapsML-файла.
ymaps.geoXml.load("http://api.yandex.ru/maps/doc/ymapsml/1.x/examples/xml/menufromymapsml.xml")
.then(function (res) {
// Все содержимое YMapsML файла возвращается ввиде коллекции.
var groups = res.geoObjects,
// Стили для DOM-представлений групп.
styles = {
"default#redPoint": "important",
"default#greenPoint": "success",
"default#orangePoint": "warning",
"undefined": "info"
};
// Добавляем все группы на карту.
myMap.geoObjects.add(groups);
});


Для построения меню нам нужно перебирать эти коллекции, например, с помощью метода each или итератора. Затем, получив в обработчике элементы коллекции, строить по ним пункты меню, связывая их с геообъектами посредством интерфейса DOM-событий.
Данные для пунктов меню (название) в этом варианте мы получаем из данных геообъектов и коллекций.


// Перебираем все группы.
groups.each(function (group) {
// Определяем стиль для группы.
var preset = group.options.get('preset') || 'twirl#blueIcon',
style = styles[preset.match(/#([a-z]+)[A-Z]/)[1]],
// Имя группы.
name = group.properties.get('name'),
// DOM-представление группы.
menuItem = $('<li class="nav-header">' + name + '');
menuItem
// Добавляем пункт в меню.
.appendTo(menu)
// Навешиваем обработчик клика по пункту меню.
.on('click', function (e) {
// Скрываем/отображаем пункты меню данной группы.
$(this)
.nextUntil('.nav-header')
.removeClass('active')
.slideToggle('fast');
// Скрываем/отображаем коллекцию на карте.
if (group.getParent()) {
groups.remove(group);
} else {
groups.add(group);
}
});
});

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


// Перебираем элементы группы.
group.each(function (item) {
var name = item.properties.get('name'),
// DOM-представление элемента группы.
menuItem = $('<li><a href="javascript:void(0)">' + name + '</a></li>');
// Добавляем пункт в меню.
menuItem
.appendTo(menu)
// Навешиваем обработчик клика по пункту меню.
.on('click', function (e) {
e.preventDefault();
// Выставляем/убираем класс active.
menuItem
.toggleClass('active')
.siblings('.active')
.removeClass('active');
// Открываем/закрываем балун у метки.
if (item.balloon.isOpen()) {
item.balloon.close();
} else {
// Плавно меняем центр карты на координаты метки.
myMap.panTo(item.geometry.getCoordinates(), {
delay: 0,
callback: function () {
item.balloon.open();
}
});
}
});
});

Итоговый пример можно посмотреть тут.

Подключение существующего меню к геообъектам на карте

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

Это можно сделать, проставив DOM-элементам атрибуты id, а геообъектам передать произвольное поле в объекте-данных (поле properties в первом параметре в конструкторе коллекции и второй параметр в конструкторе метки).

Таким образом создание коллекции с названием и идентификатором будет выглядеть следующим образом:


var group1 = new ymaps.GeoObjectArray({
properties: {
id: 'group-1',
name: 'Известные памятники'
}
}, {
preset: 'twirl#redIcon'
});


Далее наполним коллекцию метками с помощью метода add:


group1
.add(new ymaps.Placemark([50.426472, 30.563022], { id: 'group-1-1', balloonContent: 'Монумент "Родина-Мать"' }))
.add(new ymaps.Placemark([50.45351, 30.516489], { id: 'group-1-2', balloonContent: 'Памятник "Богдану Хмельницкому"' }))
.add(new ymaps.Placemark([50.454433, 30.529874], { id: 'group-1-3', balloonContent: 'Арка Дружбы народов' }));


Поскольку в данном примере мы не будем хранить ссылки на коллекции, мы поместим наши коллекции в еще одну коллекцию, назовем ее visible и добавим ее на карту. Чтобы скрыть коллекции с карты мы будем переносить их (добавлять) в другую коллекцию, назовем ее hidden, которую мы не будем добавлять на карту. Стоит отметить в API все геообъекты и коллекции реализуют интерфейс IChildOnMap. Следовательно добавление геообъекта или коллекции в другую коллекцию удалит его из текущей коллекции. В нашем случае перенос коллекции геообъектов из visible в hidden приведет к удалению этой коллекции с карты.


// Добавляем все группы в одну коллекцию.
visible
.add(group1)
.add(group2)
.add(group3)
.add(group4);
// Добавляем все группы на карту.
myMap.geoObjects.add(visible);

Теперь если мы добавим коллекцию group1 в другую коллекцию hidden,


hidden.add(group1);


она автоматически будет удалена из коллекции visible и соответственно с карты.

Поместим код управления видимостью коллекций на карте в отдельный метод groupToggle, принимающий идентификатор коллекции.


// Ищем нужную группу и добавляем/удаляем ее с карты.
function groupToggle (id) {
// Все группы лежат внутри одной коллекции, которую мы получили из YMapsML.
var it, group;
// Сначала ищем в видимой на карте коллекции.
it = visible.getIterator();
while (group = it.getNext()) {
if (group.properties.get('id') === id) {
hidden.add(group);
return;
}
}
// Если мы сюда попали, значит коллекция уже удалена и надо искать в удаленных.
it = hidden.getIterator();
while (group = it.getNext()) {
if (group.properties.get('id') === id) {
visible.add(group);
return;
}
}
}

В данном методе мы будем использовать итератор вместо уже знакомого нам метода each. Он имеет преимущество, так как мы можем при нахождении нужного элемента завершить перебор коллекции и выйти из функции вызовом return.

Обработчик клика на DOM-представлении коллекций будет выглядеть следующим образом:


$('.nav-header').on('click', function (e) {
// Скрываем/отображаем пункты меню данной группы.
$(this)
.nextUntil('.nav-header')
.removeClass('active')
.slideToggle('fast');
// Скрываем/отображаем коллекцию на карте.
groupToggle(this.id);
});

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


// Обрабатываем клики на пунктах меню элементов группы.
$('li:not(.nav-header)').on('click', function (e) {
// Отменяем основное поведение (переход по ссылке)
e.preventDefault();
$(this)
.toggleClass('active')
.siblings('.active')
.removeClass('active');
itemToggle(this.id);
});

В методе itemToggle также будем использовать итераторы:


// Ищем нужную метку и открываем/закрываем ее балун.
function itemToggle (id) {
var it = visible.getIterator(),
group;
while (group = it.getNext()) {
for (var i = 0, len = group.getLength(); i < len; i++) {
var placemark = group.get(i);
if (placemark.properties.get('id') === id) {
if (placemark.balloon.isOpen()) {
placemark.balloon.close();
} else {
myMap.panTo(placemark.geometry.getCoordinates(), {
delay: 0,
callback: function () {
placemark.balloon.open();
}
});
}
return;
}
}
}
}

Итоговый пример можно посмотреть тут.