Inserting into the Yandex panoramas page

Open in CodeSandbox

The Yandex.Maps API allows you to display Yandex panoramas on website pages.

The panorama is implemented by Panorama. This object contains the necessary information about the panorama: its name, geographical coordinates,connections to linked panoramas, and so on.

The panorama.Player object (the player) is used for adding a panorama to a page. The player forms requests for tiles and creates the <canvas> element on the page for displaying the panorama. To insert a panorama on the page, just pass the player constructor the panorama object (Panorama).

You can use the panorama.locate function to get the panorama object. As input it is passed the geographical coordinates of the point to get a panorama for. The function returns an array of panoramas found in the vicinity of this point. The panoramas in the array are sorted by distance from the point.

You can also use the panorama.createPlayer function for adding panoramas to a web page. For input, it takes the coordinates of the point where a panorama should be opened. The function searches for the nearest panorama and, if successful, it creates a panorama player with the found panorama. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Examples. Getting Yandex panoramas.</title>
        <meta charset="UTF-8" />

        <style>
            html,
            body,
            .player {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            .player {
                height: 50%;
            }
        </style>
        <!--
        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>"></script>
        <script src="panorama_basics.js"></script>
    </head>
    <body>
        <div id="player1" class="player"></div>
        <div id="player2" class="player"></div>
    </body>
</html>

ymaps.ready(function () {
    // To begin with, we have to check whether the user's browser supports the panorama player.
    if (!ymaps.panorama.isSupported()) {
        // If it doesn't, we won't do anything.
        return;
    }

    // Searching for a panorama at the point passed.
    ymaps.panorama.locate([55.733685, 37.588264]).done(
        function (panoramas) {
            // Checking that at least one panorama was found.
            if (panoramas.length > 0) {
                // Creating the panorama player with one of the panoramas found.
                var player = new ymaps.panorama.Player(
                    "player1",
                    /**
                     * The panoramas in the response are sorted by their distance
                     * from the point passed in 'panorama.locate'.
                     * We are choosing the first one because it will be the closest.
                     */
                    panoramas[0],
                    /**
                     * Setting a viewing direction different
                     * from the default value.
                     */
                    { direction: [256, 16] }
                );
            }
        },
        function (error) {
            // If something went wrong, we notify the user.
            alert(error.message);
        }
    );

    /**
     * You can also use the 'panorama.createPlayer' method
     * for adding panoramas to a page. This method searches for the nearest panorama
     * and if successful, it creates a panorama player with the found panorama.
     */
    ymaps.panorama
        .createPlayer(
            "player2",
            [59.938557, 30.316198],
            // Searching for an aerial panorama.
            { layer: "yandex#airPanorama" }
        )
        .done(function (player) {
            // player – a link to the player instance.
        });
});