Яндекс карты для angular.js

Приветствую всех, уважаемые харбожители!
В данном посте речь идет о том, как подружить карты яндекса и javascript framework angular.js для их совместной работы. Можно, конечно, использовать и google map, но для стран СНГ их качество оставляет желать лучшего.
Немного погуглив, и не найдя готового решения, пришлось писать свое. Кому интересно, добро пожаловать под кат.

Репозиторий git ^[1] Demo ^[2]
Нужно было реализовать следующие требования:

1. Отображение гео. объектов на карте.
2. Добавление гео. объектов на карту, как в интерактивном режиме, так и программно.
3. 4 режима работы: просмотр, выбор, редактирование, добавление.
4. Гибкое управление внешним видом объектов карты.
5. Ограничение на типы добавляемых и отображаемых гео. объектов.
6. Получение выбранного пользователем гео. объекта.
7. Применение, в случае необходимости, системы кластеризации карты.
8. Возможность задать требование: присутствие на карте хотя бы одного объекта.
9. Автоматическая подгрузка yandex map api, когда это требуется.
10. Автоматическая установка центра карты, если он не задан, в текущее местоположение пользователя или в центр всех гео. объектов для отображения.
11. Возможность задания центра карты как с помощью координат, так и через адрес.

В настоящий момент они все реализованы.

Описывать в этом топике, как все работает не вижу смысла, лучше расскажу, как этим пользоваться.
Директива ya-map предназначена для создания карты в div-е, для которого применяется. Карту можно настраивать через настройку провайдера YandexMap, который отвечает за внешний вид и поведение карты по умолчанию.
Чтобы понять, насколько все просто, достаточно запустить посмотреть файлы примеров из папки example. Предполагается что читатель знаком с основами пользования git, в состоянии клонировать приложение и подгрузить все его зависимости с помощью bower.
Итак, для работы карты нужно:

1. Включить в проект ya-map.js.
2. В вашем главном модуле приложения angular добавить зависимость от модуля yaMap.
3. В нужном месте шаблона добавить следующий код: <div ya-map ng-model="…" ya-select-index="…" ya-properties="…"></div>

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

1. ng-model — задает массив объектов для отображения на карте.
2. ya-select-index — индекс выбранного объекта в массиве ng-model.
3. ya-properties — задает свойства карты для отображения, такие как центр.

После этих манипуляций мы получим вполне работоспособную карту, на которой будут выведены все гео. объекты из массива ng-model. Если не задан ее центр, тогда будет установлено местоположение пользователя, и оно будет использовано как центр карты.
И один нюанс, чтобы карта отобразилась, родительский div должен иметь ширину и высоту, отличную от нуля.

Чтобы получить расширенное поведение карты, нужно использовать следующие опции:

Эти опции задаются через атрибут директивы, например: <div ya-map="{mode:'add'}"></div>
Чтобы задать обязательное наличие на карте хотя бы одного гео. объекта, нужно использовать атрибут ya-required, который может принимать любое выражение angular. Он работает так же, как и любые другие атрибуты с валидацией в angular, такие как ng-required.
Данный модуль еще не доведен до состояния release, но мной он успешно используется в одном из моих приложений. Хотелось бы услышать конструктивную критику, пожелания и все в том же духе.
За сим разрешите откланяться.

Автор: Tulov_Alex

Источник ^[3]