Макет элемента изменения масштаба

Open in CodeSandbox

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

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

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

Список событий, на которые реагирует ползунок маштаба, описан в интерфейсе 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.0/?load=package.standard&amp;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/1.8.0/jquery.min.js"
            type="text/javascript"
        ></script>

        <script src="small_zoom_layout.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="map" style="width:400px; height:300px"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.751574, 37.573856],
            zoom: 9,
        }),
        // Создадим пользовательский макет ползунка масштаба.
        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();
                    // Генерируем событие, в ответ на которое
                    // элемент управления изменит коэффициент масштабирования карты.
                    this.events.fire("zoomchange", {
                        oldZoom: map.getZoom(),
                        newZoom: map.getZoom() + 1,
                    });
                },

                zoomOut: function () {
                    var map = this.getData().control.getMap();
                    this.events.fire("zoomchange", {
                        oldZoom: map.getZoom(),
                        newZoom: map.getZoom() - 1,
                    });
                },
            }
        ),
        zoomControl = new ymaps.control.SmallZoomControl({
            layout: ZoomLayout,
        });

    myMap.controls.add(zoomControl, { left: 5, top: 5 });
}