[Из песочницы] Яндекс карты для angular.js

Приветствую всех, уважаемые харбожители!

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

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



Репозиторий git Demo

Нужно было реализовать следующие требования:

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 должен иметь ширину и высоту, отличную от нуля.

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

Опция	Возможные значения	Описание
mode	view, select, edit, add	По умолчанию: view. Карта может работать в 4 режимах, соответственно: просмотр, выбор, редактирование и добавление. Каждый режим поддерживает возможности предыдущего режима и плюс к ним еще: Просмотр – только просмотр Выбор – возможность выбора из предоставленных гео-объектов одного, который будет доступен в scope через свойство, заданное в атрибуте ya-select-index. Редактирование – позволяет редактировать любой объект на карте (который это поддерживает), но не позволяет добавлять новые объекты. Добавление – позволяет добавлять новые объекты на карту в интерактивном режиме.
geoTypes	point, linestring, circle, rectangle, polygon, all	По умолчанию: all. Типы объектов, с которыми будет работать карта. Задается в строковом формате через пробел.
cluster	true, false	По умолчанию: false. Использовать или нет систему кластеризации карты.
showAll	true, false	По умолчанию: false. При первой отрисовке карты установить масштаб и центр так, чтобы можно было одновременно показать все гео. объекты, или не нужно.
controls	zoomControl, typeSelector, mapTools, scaleLine, miniMap, smallZoomControl	По умолчанию: undefined. Элементы управления, которые добавляются к элементам управления, заданным в провайдере YandexMap, для отображения на карте

Эти опции задаются через атрибут директивы, например: <div ya-map="{mode:'add'}"></div>

Чтобы задать обязательное наличие на карте хотя бы одного гео. объекта, нужно использовать атрибут ya-required, который может принимать любое выражение angular. Он работает так же, как и любые другие атрибуты с валидацией в angular, такие как ng-required.

Данный модуль еще не доведен до состояния release, но мной он успешно используется в одном из моих приложений. Хотелось бы услышать конструктивную критику, пожелания и все в том же духе.

За сим разрешите откланяться.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends:

• Massacres That Matter - Part 1 - 'Responsibility To Protect' In Egypt, Libya And Syria


• Massacres That Matter - Part 2 - The Media Response On Egypt, Libya And Syria


• National demonstration: No attack on Syria - Saturday 31 August, 12 noon, Temple Place, London, UK