Angular-ymaps

Yandex Maps API as an Angular JS direcitive.

Это модуль для Angular JS, предназначенный для простого подключения и работы с Яндекс-картами. С его помощью можно вставлять Яндекс карту на страницу через html-тег, так же просто как img или button

Документация и пример использования

Подключение

Скачать библиотеку или ее упакованную версию
Подключить скрипт на страницу <script src="angular-ymaps.js"></script>
Добавить модуль ymaps в зависимости своего angular-приложения angular.module('MyApp', ['ymaps'])
Теперь можно использовать в HTML новые теги
- <yandex-map> - Яндекс-карта
- <ymap-marker> - маркер на карте, вставляется только внутрь тега <yandex-map>

Bower

Можно установить библиотеку из bower:

bower install angular-ymaps --save

API

Тег yandex-map:

<yandex-map center="map.center" zoom="map.zoom"></yandex-map>

Добавляет Яндекс-карту на страницу. Размеры карты определяются размерами элемента, их можно задать в css. При создании нужно указать два обязательных атрибута:

center(Array) - массив из двух чисел, широта и долгота центра карты
zoom(Number) - число, от 0 до 23, масштаб карты. Во избежание ошибок нужно задавать разрешенный масштаб для указанной области

Тег ymap-marker:

Может использоваться только внутри тега карты, добавляет на нее точку. Имеются следующие атрибуты

coordinates(Array) - массив из двух чисел, широта и долгота маркера на карте (обязательный)
index(String) - текст, который пишется на маркере
properties(Object) - свойства метки, передаются в ymaps.GeoObject. Здесь может быть текст балуна, который открывается при нажатии на метку, или всплывающей при наведении подсказки. Подробнее - в документации Яндекс, описание параметра properties.

Глобальные настройки

Можно управлять видом и функциоальностью карты через свойства, вынесенные в константу ymapsConfig:

apiUrl (String) - ссылка для загрузки API карт. Может переопределяться для загрузки другой версии. По умолчанию загружается 2.1-stable
mapBehaviors (Array) - возможные поведения карты, массив ключей, которые принимает ymaps.map.behavior.Manager. Стандартное значение: ['default']
mapControls (Array) - возможные элементы управления карты, массив ключей, которые принимает ymaps.map.control.Manager. Стандартное значение: ['default']
markerOptions (Object) - опции, передаваемые ymaps.GeoObject, то есть настройки внешнего вида и поведения маркеров на карте. Стандартное значение: {preset: 'islands#darkgreenIcon'}
clusterize (Boolean) – объединять ли маркеры в кластеры. По умолчанию false
clusterOptions (Object) - опции кластера ymaps.Clusterer, применяются если включена кластеризация. Стандартное значение: {preset: 'islands#darkGreenClusterIcons'}
fitMarkers (Boolean) - автоматически подстраивать видимую область и масштаб карты, чтобы было видно все точки на карте. Стандартное значение: true
fitMarkersZoomMargin (Boolean) – отступ от границ карты при подстраивании масштаба под маркеры. Стандартное значение: 40 (px)

Примеры использования

Нужно просто задать кординаты и присвоить их атрибуту center для карты и coordinates для маркера

HTML

<div ng-init="coords=[55.21, 34.30];center=[55.21, 34.30];zoom=10">
    <yandex-map center="center" zoom="zoom">
        <ymap-marker coordinates="coords"></ymap-marker>
    </yandex-map>
</div>

Javascript

//кофигурация модуля, использующего карты
angular.module('MyApp', ['ymaps']);

Это немножко сложнее, нужно переопределить свойство markerOptions в настройках модуля. HTML такой же, как и в прошлом примере

HTML

<div ng-init="coords=[56.27, 34.33];center=[56.27, 34.33];zoom=10">
    <yandex-map center="center" zoom="zoom">
        <!-- а маркер теперь синий! -->
        <ymap-marker coordinates="coords"></ymap-marker>
    </yandex-map>
</div>

Javascript

//кофигурация модуля, использующего карты
angular.module('MyApp', ['ymaps']).config(function(ymapsConfig) {
    //выставляем синий цвет иконкам вместо зеленого
    ymapsConfig.markerOptions.preset = 'islands#darkblueDotIcon';
});

Меняем стандартный набор элементов управления на заданный. В данном примере отобразим только панель поиска searchControl и ползунок масштаба zoomControl

HTML

<div ng-init="center=[56.27, 34.33];zoom=10">
    <yandex-map center="center" zoom="zoom"></yandex-map>
</div>

Javascript

//кофигурация модуля, использующего карты
angular.module('MyApp', ['ymaps']).config(function(ymapsConfig) {
    //используем только элементы управления панель поиска и ползунок масштаба
    ymapsConfig.mapControls = ['searchControl', 'zoomControl'];
});

С помощью Angular JS эта задача решается крайне легко! Пример в действии можно увидеть прямо на этой странице

HTML

<div ng-controller="MapCtrl">
    <yandex-map center="map.center" zoom="map.zoom">
        <!-- директива ng-repeat создаст все маркеры одним кодом  -->
        <ymap-marker ng-repeat="marker in markers" index="$index+1" coordinates="marker"></ymap-marker>
    </yandex-map>
</div>

Javascript

//нам нужно создать контроллер, если у вас его еще нет
angular.module('MyApp', ['ymaps']).controller('MapCtrl', function($scope) {
    //создаем массив координат. При желании его можно загружать и с сервера,
    //подробнее об этом - в документации Angular
    $scope.markers = [
        [54.46, 38.31],
        [53.57, 37.13],
        [53.14, 37.59]
    ];
    //настройки положения карты
    $scope.map = {
        center: [53.57, 37.13], zoom: 12
    };
});

Для объединения маркеров в кластер нужно выставить опции clusterize значение true. Настройки иконки кластера задаются опцией clusterOptions

HTML

<div ng-controller="MapCtrl">
    <yandex-map center="map.center" zoom="map.zoom">
        <ymap-marker ng-repeat="marker in markers" index="$index+1" coordinates="marker"></ymap-marker>
    </yandex-map>
</div>

Javascript

angular.module('MyApp', ['ymaps']).config(function(ymapsConfig) {
    //включим кластеризацию
    ymapsConfig.clusterize = true;
}).controller('MapCtrl', function($scope) {
    // маркеры для кластера
    $scope.markers = [
        [54.46, 38.31],
        [54.57, 38.13],
        [54.50, 38.59]
    ];
    //настройки положения карты
    $scope.map = {
        center: [54.57, 38.31], zoom: 7
    };
});

Этот пример, почти такой же, как и предыдущий, только нужно загрузить больше данных

HTML

<div ng-controller="MapCtrl">
    <yandex-map center="map.center" zoom="map.zoom">
        <!-- загружаем текст для метки в атрибут index -->
        <ymap-marker ng-repeat="marker in markers" index="marker.title" coordinates="marker.coordinates"></ymap-marker>
    </yandex-map>
</div>

Javascript

angular.module('MyApp', ['ymaps']).config(function(ymapsConfig) {
    //нужно сменить preset у карты на специальный текстовый
    ymapsConfig.markerOptions.preset = 'islands#darkgreenStretchyIcon';
})
.controller('MapCtrl', function($scope) {
    //создаем массив с данными для меток
    $scope.markers = [
        {coordinates:[54.46, 38.31], title: 'Пункт А'},
        {coordinates:[53.57, 37.13], title: 'Пункт Б'},
        {coordinates:[53.14, 37.59], title: 'Запасной пункт Б'}
    ];
    //настройки положения карты
    $scope.map = {
        center: [53.57, 37.13], zoom: 12
    };
});

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

HTML

<div ng-controller="MapCtrl">
    <yandex-map center="map.center" zoom="map.zoom">
        <!-- загружаем текст сообщения в атрибут properties -->
        <ymap-marker ng-repeat="marker in markers" index="$index+1" coordinates="marker.coordinates" properties="marker.properties" options="marker.options"></ymap-marker>
    </yandex-map>
</div>

Javascript

//нам нужно создать контроллер, если у вас его еще нет
angular.module('MyApp', ['ymaps']).controller('MapCtrl', function($scope) {
    //создаем массив координат и данных для меток и балунов
    $scope.markers = [
        {coordinates:[56.56, 38.63], properties: {balloonContent: 'Здесь рыбы нет!'}},
        {coordinates:[55.16, 39.89], properties: {balloonContent: 'Здесь рыбы тоже нет'}, options: {preset: 'islands#icon', iconColor: '#a5260a'}},
        {coordinates:[55.08, 38.96], properties: {balloonContent: 'А здесь есть!'}}
    ];
    //настройки положения карты
    $scope.map = {
        center: [55.55, 39.84], zoom: 12
    };
});

Атрибуты 'center' и 'zoom' атоматически обновляются вслед за изменением положения карты

HTML

<div ng-init="center=[55.21, 34.30];zoom=10">
    <yandex-map center="center" zoom="zoom"></yandex-map>
    <div class="window">
        <label>Широта: <input type="number" ng-model="center[0]" /></label><br>
        <label>Долгота: <input type="number" ng-model="center[1]" /></label><br>
        <label>Zoom: <input type="number" ng-model="zoom" /></label>
    </div>
</div>

Javascript

//кофигурация модуля, использующего карты
angular.module('MyApp', ['ymaps']);

Можно показывать карту только после нажатия на кнопку. До этого код карты грузиться не будет

HTML

<div ng-init="center=[58.39,33.91];zoom='10'">
    <yandex-map ng-if="showMap" center="center" zoom="zoom"></yandex-map>
    <div class="window">
        <a href ng-hide="showMap" ng-click="showMap = true">Открыть карту</a>
        <a href ng-show="showMap" ng-click="showMap = false">Скрыть карту</a>
    </div>
</div>

Javascript

//кофигурация модуля, использующего карты
angular.module('MyApp', ['ymaps']);

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

HTML

<style type="text/css">
	.row {
		width: 50%;
		float: left;
		height: 100%;
	}
</style>
<div ng-controller="MapCtrl">
    <div class="row">
    	<yandex-map center="leftMap.center" zoom="leftMap.zoom"></yandex-map>
    </div>
    <div class="row">
    	<yandex-map center="rightMap.center" zoom="rightMap.zoom"></yandex-map>
    </div>
    <div class="window">
        <label><input type="checkbox" ng-model="bindMaps" ng-change="updateBinding()" /> Связать карты</label>
    </div>
</div>

Javascript

angular.module('MyApp', ['ymaps']).controller('MapCtrl', function($scope) {
    //настройки положения карты
    $scope.leftMap = {
        center: [55.74, 37.61], zoom: 12
    };
    $scope.rightMap = {
        center: [59.93, 30.33], zoom: 12
    };
    $scope.updateBinding = function() {
        if($scope.bindMaps) {
            $scope.rightMap = $scope.leftMap;
        } else {
            $scope.rightMap = angular.copy($scope.leftMap);
        }
    };
});

Но это еще не все, есть и другие варианты примения, для них — документация Яндекс-карт и AngularJS вам в помощь

Feedback

Исходный код доступен на GitHub. Проект открыт к изменениям, принимаются пожелания и сообщения о багах в виде issues к этому репозиторию

Contributing

Проект собирается с помощью Grunt, для тестов используется Karma. Для сборки нужно сделать следующее

Установить node.js
Установить Grunt npm install -g grunt-cli
Установить Karma npm install -g karma
Склонировать этот проект git@github.com:just-boris/angular-ymaps.git
В папке проекта выполнить npm init, установить локальные зависимости
Сборка проекта выполняется командой grunt. В папке build будут собранные файлы
Для тестирования во время разработки можно запустить karma в режиме сервера: karma start --no-single-run

Буду рад принять пожелания и дополнения. Удачного кодинга!

#	Широта	Долгота
{{$index+1}}
*

Пример работы:

Angular-ymaps

Документация и пример использования

Подключение

Bower

API

Тег yandex-map:

Тег ymap-marker:

Глобальные настройки

Примеры использования

Карта заданного масштаба с одним маркером в центре

HTML

Javascript

Маркер нестандартного цвета

HTML

Javascript

Элементы управления карты

HTML

Javascript

Маркеры на карте из массива

HTML

Javascript

Кластеризация

HTML

Javascript

Метки с текстом на карте

HTML

Javascript

Маркеры с балунами

HTML

Javascript

Обновляемые атрибуты

HTML

Javascript

Скрываемая карта

HTML

Javascript

Несколько карт на странице

HTML

Javascript

Feedback

Contributing