Yandex maps for angular.js


Greetings to all, dear Harbazhiteli!
In this post, we are talking about how to make Yandex maps and the javascript framework angular.js friends to work together. You can, of course, use the google map, but for the CIS countries their quality leaves much to be desired.
Googling a little, and not finding a ready-made solution, I had to write my own. Who cares, welcome to cat.

Git Demo Repository
As a result of the publication of this article for the first time, I received valuable constructive comments, which you can see below in the comments. Thanks to everyone who was ready to teach me the mind of the mind, and what came of it, now we will see.
Let's start with the simplest, the task is to display a map. Decision:

In this case, if you do not set an attribute ya-center, the center of the map will be set to the current location of the user.
Add geo. objects on the map can be 2 ways, the first - direct addition, the second - adding to the collection of geo. objects. Collections are used to combine geos. objects in groups, for the purpose of further manipulations with them in a similar manner. Collections come in two forms: regular collection and clustering. There can be any number of ordinary collections on the map, but there can be only one clusterer, and it takes only points. Well, enough theory, let's move on to the code. Adding a geo. object directly to the map:

        geometry: {
            type: 'Circle',
            coordinates: [37.60,55.76],
            radius: 10000
        properties: {
            balloonContent: "Радиус круга - 10 км",
            hintContent: "Подвинь меня"

Adding a geo. Object to collection:

Adding a point to the clustering:

It is clear that geoObjectnow must point to a point.
Implemented support for all map events. To subscribe to an event, a construct is used ya-event[-target]-eventname. Here ya-event is the prefix that determines that this is a subscription to the event, target - if specified, then the property inside the element we want to subscribe to the event, eventname is the name of the event we are subscribing to. The native event object of Yandex maps is passed to the event handler via the parameter $event. You can get the object that raised the event through $event.get('target'). So, let's subscribe to the clickmap event and the addmap property event geoObjects.

$ = function(e){
    //что-то делаем при клике на карте
    //что-то делаем при добавлении объекта на карту

Adding controls to the map is just as easy. Standard controls are added using the directive yaToolbar, and if you want to create your own panel (or upgrade an existing one), then directives are placed inside it yaControl. Example:

In addition to everything described, it is possible to create your own maps, use templates for custom controls, and other objects on the map and much more.
You can get more information on the github of the project , as well as on the site with examples .

Also popular now: