Произвольный макет элемента изменения масштаба

Open in CodeSandbox

Макеты объектов можно создавать с помощью фабрики templateLayoutFactory, используя текстовые шаблоны.

В данном примере создается пользовательский макет элемента управления масштабом карты. Макет элемента управления строится на основе его данных, состояния и опций. Макет автоматически перестраивается при изменении значений полей, состояния или опций, которые используются в его текстовом шаблоне.

В ответ на действия пользователя (клик мышкой по кнопке) макет может генерировать специальные события, описанные в его интерфейсе. Элемент управления слушает эти события на макете и пытается изменить свое состояние, данные или опции. После того, как элемент управления осуществил изменения, макет перестраивается на основе обновленных данных.

Список событий, на которые реагирует ползунок маштаба, описан в интерфейсе IZoomControlLayout. 

<!DOCTYPE html>

<html>
    <head>
        <title>Пользовательский макет элемента изменения масштаба</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <link
            href="https://yandex.st/bootstrap/2.2.2/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script
            src="https://yandex.st/jquery/2.2.3/jquery.min.js"
            type="text/javascript"
        ></script>
        <script src="zoom_layout.js" type="text/javascript"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.751574, 37.573856],
            zoom: 9,
            controls: [],
        }),
        // Создадим пользовательский макет ползунка масштаба.
        ZoomLayout = ymaps.templateLayoutFactory.createClass(
            "<div>" +
                "<div id='zoom-in' class='btn'><i class='icon-plus'></i></div><br>" +
                "<div id='zoom-out' class='btn'><i class='icon-minus'></i></div>" +
                "</div>",
            {
                // Переопределяем методы макета, чтобы выполнять дополнительные действия
                // при построении и очистке макета.
                build: function () {
                    // Вызываем родительский метод build.
                    ZoomLayout.superclass.build.call(this);

                    // Привязываем функции-обработчики к контексту и сохраняем ссылки
                    // на них, чтобы потом отписаться от событий.
                    this.zoomInCallback = ymaps.util.bind(
                        this.zoomIn,
                        this
                    );
                    this.zoomOutCallback = ymaps.util.bind(
                        this.zoomOut,
                        this
                    );

                    // Начинаем слушать клики на кнопках макета.
                    $("#zoom-in").bind("click", this.zoomInCallback);
                    $("#zoom-out").bind("click", this.zoomOutCallback);
                },

                clear: function () {
                    // Снимаем обработчики кликов.
                    $("#zoom-in").unbind("click", this.zoomInCallback);
                    $("#zoom-out").unbind("click", this.zoomOutCallback);

                    // Вызываем родительский метод clear.
                    ZoomLayout.superclass.clear.call(this);
                },

                zoomIn: function () {
                    var map = this.getData().control.getMap();
                    map.setZoom(map.getZoom() + 1, {
                        checkZoomRange: true,
                    });
                },

                zoomOut: function () {
                    var map = this.getData().control.getMap();
                    map.setZoom(map.getZoom() - 1, {
                        checkZoomRange: true,
                    });
                },
            }
        ),
        zoomControl = new ymaps.control.ZoomControl({
            options: { layout: ZoomLayout },
        });

    myMap.controls.add(zoomControl);
}