Custom layout for the zoom control

Open in CodeSandbox

Layouts of objects can be created using the templateLayoutFactory factory and text templates.

This example creates a custom layout for the map zoom control. The layout of the control is based on its data, status, and options. The layout is automatically rebuilt when changes are made to the values of fields, states, or options that are used in its text template.

In response to a user action (a mouse click on the button), the layout can generate special events that are defined in its interface. The control listens to these events on the layout and tries to change its state, data, or options. After the control has implemented changes, the layout is rebuilt based on the updated data.

The events that the zoom slider responds to are listed in the IZoomControlLayout interface. 

<!DOCTYPE html>

<html>
    <head>
        <title>Examples. Custom layout for the zoom control.</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=UTF-8"
        />
        <!--
        Set your own API-key. Testing key is not valid for other web-sites and services.
        Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=en_RU&amp;apikey=<your API-key>"
            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: [],
        }),
        // Creating a custom layout for the zoom slider.
        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>",
            {
                /**
                 * Redefining methods of the layout, in order to perform
                 * additional steps when building and clearing the layout.
                 */
                build: function () {
                    // Calling the "build" parent method.
                    ZoomLayout.superclass.build.call(this);

                    /**
                     * Binding handler functions to the context and storing references
                     * to them in order to unsubscribe from the event later.
                     */
                    this.zoomInCallback = ymaps.util.bind(
                        this.zoomIn,
                        this
                    );
                    this.zoomOutCallback = ymaps.util.bind(
                        this.zoomOut,
                        this
                    );

                    // Beginning to listen for clicks on the layout buttons.
                    $("#zoom-in").bind("click", this.zoomInCallback);
                    $("#zoom-out").bind("click", this.zoomOutCallback);
                },

                clear: function () {
                    // Removing click handlers.
                    $("#zoom-in").unbind("click", this.zoomInCallback);
                    $("#zoom-out").unbind("click", this.zoomOutCallback);

                    // Calling the "clear" parent method.
                    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);
}