Приветствую всех, уважаемые харбожители!
В данном посте речь идет о том, как подружить карты яндекса и javascript framework angular.js для их совместной работы. Можно, конечно, использовать и google map, но для стран СНГ их качество оставляет желать лучшего.
Немного погуглив, и не найдя готового решения, пришлось писать свое. Кому интересно, добро пожаловать под кат.
Репозиторий git Demo
Нужно было реализовать следующие требования:
- Отображение гео. объектов на карте.
- Добавление гео. объектов на карту, как в интерактивном режиме, так и программно.
- 4 режима работы: просмотр, выбор, редактирование, добавление.
- Гибкое управление внешним видом объектов карты.
- Ограничение на типы добавляемых и отображаемых гео. объектов.
- Получение выбранного пользователем гео. объекта.
- Применение, в случае необходимости, системы кластеризации карты.
- Возможность задать требование: присутствие на карте хотя бы одного объекта.
- Автоматическая подгрузка yandex map api, когда это требуется.
- Автоматическая установка центра карты, если он не задан, в текущее местоположение пользователя или в центр всех гео. объектов для отображения.
- Возможность задания центра карты как с помощью координат, так и через адрес.
В настоящий момент они все реализованы.
Описывать в этом топике, как все работает не вижу смысла, лучше расскажу, как этим пользоваться.
Директива ya-map предназначена для создания карты в div-е, для которого применяется. Карту можно настраивать через настройку провайдера YandexMap, который отвечает за внешний вид и поведение карты по умолчанию.
Чтобы понять, насколько все просто, достаточно запустить посмотреть файлы примеров из папки example. Предполагается что читатель знаком с основами пользования git, в состоянии клонировать приложение и подгрузить все его зависимости с помощью bower.
Итак, для работы карты нужно:
- Включить в проект ya-map.js.
- В вашем главном модуле приложения angular добавить зависимость от модуля yaMap.
- В нужном месте шаблона добавить следующий код:
<div ya-map ng-model="…" ya-select-index="…" ya-properties="…"></div>
Всегда должны присутствовать следующие обязательные атрибуты, при этом они не обязательно должны указывать на реальные объекты в scope:
ng-model— задает массив объектов для отображения на карте.ya-select-index— индекс выбранного объекта в массивеng-model.ya-properties— задает свойства карты для отображения, такие как центр.
После этих манипуляций мы получим вполне работоспособную карту, на которой будут выведены все гео. объекты из массива ng-model. Если не задан ее центр, тогда будет установлено местоположение пользователя, и оно будет использовано как центр карты.
И один нюанс, чтобы карта отобразилась, родительский div должен иметь ширину и высоту, отличную от нуля.
Чтобы получить расширенное поведение карты, нужно использовать следующие опции:
| Опция | Возможные значения | Описание |
|---|---|---|
| mode | view, select, edit, add | По умолчанию: view. Карта может работать в 4 режимах, соответственно: просмотр, выбор, редактирование и добавление. Каждый режим поддерживает возможности предыдущего режима и плюс к ним еще:
|
| 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, но мной он успешно используется в одном из моих приложений. Хотелось бы услышать конструктивную критику, пожелания и все в том же духе.
За сим разрешите откланяться.
Автор: Tulov_Alex
