Adding buttons to the map

Open in CodeSandbox

The control.Button class lets you create buttons and add them to the map via control.Manager.

A button may have 3 different appearances, depending on the map size and the number of other controls on the map. On a small map, the button displays only the icon; on a medium-size map, the text of the button is shown; on a large map, the button icon is displayed with the text. You can lock the button in any size or you can specify only the icon or text only.

By default, maximum button width is 90 pixels. If your button contains a long text, you should set it to the desired maximum size using the maxWidth option. 

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Adding buttons to the map</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>
        <script src="button.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 map = new ymaps.Map("map", {
            center: [59.93772, 30.313622],
            zoom: 10,
            controls: [],
        }),
        firstButton = new ymaps.control.Button("Button");

    map.controls.add(firstButton, { float: "right" });

    var secondButton = new ymaps.control.Button({
        data: {
            // Setting the text and icon for a button.
            content: "Adaptive button",
            // The icon is 16x16 pixels.
            image: "error.svg",
        },
        options: {
            /**
             * Because the button changes depending on the size of the map, we will give it
             * three different maxWidth values in the array.
             */
            maxWidth: [28, 150, 178],
        },
    });
    map.controls.add(secondButton);

    /**
     * We will artificially switch the size of the button every second,
     * in order to show all the options for the button appearance.
     * When resizing the map, these changes will occur automatically.
     */
    function changeSize() {
        var oldSize = secondButton.options.get("size"),
            newSize;
        switch (oldSize) {
            case "small":
                newSize = "medium";
                break;
            case "medium":
                newSize = "large";
                break;
            case "large":
                newSize = "small";
                break;
            default:
                newSize = "small";
        }
        secondButton.options.set("size", newSize);
    }

    window.setInterval(changeSize, 1000);
}