Creating a user control card using the Yandex.Maps 2.0 API

The Rambler cards have one interesting design solution that is not available in other cards. This is the control of the center of the map, thanks to which it shows what the current center of the map is aimed at. It is on the example of this functionality that I would like to tell you about how to make my own control for maps on my site.

The creation of control is divided into several stages.

Step 1. Layout.

Layout, he's a layout. This entity is responsible for the appearance of the element on the map. In our case, this is a cross, when you hover over it, the coordinates of the center of the map will be shown. We will create the layout using the special factory templateLayoutFactory .

var CrossCenterLayout = ymaps.templateLayoutFactory.createClass('
+
', {
        build: function() {
            CrossCenterLayout.superclass.build.call(this);
            this._controlListeners = this.events.group().add('mouseenter', this.onCenterEnter, this).add('mouseleave', this.onCenterLeave, this);
            // запоминаем ссылку на карту, в которую добавлен контрол
            this._map = this.getData().map;
        },
        clear: function() {
            this._controlListeners.removeAll();
            CrossCenterLayout.superclass.clear.call(this);
        },
        onCenterEnter: function() {
            var center = this._map.getCenter();
            var lat = center[0].toFixed(2);
            var lng = center[1].toFixed(2);
            // показываем в центре карты хинт с координатами центра карты
            this._map.hint.show(center, {
                content: lat + ', ' + lng
            });
        },
        onCenterLeave: function() {
            // скрываем хинт
            this._map.hint.hide();
        }
    });

Consider the code in detail. The templateLayoutFactory factory accepts 2 parameters, a future layout template, and a list of methods for the created layout that can override the methods of the parent class .
In our case, we redefine the build and clear methods , and also add our methods onCenterEnter and onCenterLeave . In the build method, add subscriptions to mouseleave and mouseenter to the container of the event manager . In the clear method, we get rid of these subscriptions.

Step 2. Control class.

var CrossCenter = function() {
    this.events = new ymaps.event.Manager();
    this.options = new ymaps.option.Manager();
    this.state = new ymaps.data.Manager();
};
CrossCenter.prototype = {
    setParent: function(parent) {
        this.parent = parent;
        if (parent) {
            var map = parent.getMap();
            this.layout = new CrossCenterLayout({
                // передаем в лейаут данные о карте, на которую добавлен контрол и о его опциях
                map: map,
                options: this.options
            });
            // контрол будет добавляться в pane контролов
            this.layout.setParentElement(map.panes.get('controls').getElement());
        } else {
            this.layout.setParentElement(null);
        }
    },
    getParent: function() {
        return this.parent;
    }
};

This is perhaps the hardest part of the code. Here we implement the IControl interface . First we set the required fields using the appropriate event , option, and data managers . Then we implement the setParent and getParent methods . The first was spied in the api source code, thanks to the debug mode , and the second, I think, does not cause questions.

Step 3. Adding to the card

Tailored style

#cross-center{
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    z-index: 800;
}

and container card

create a control and add it to the center of the map

var crossCenter = new CrossCenter();
map.controls.add(crossCenter, {
    top: 140,
    left: 200
});

View the result of the work.

PS In order to be just like Rambler, you can add reverse geocoding to the onCenterEnter method by changing the kind parameter depending on the current map zoom.