General parameters

Open in CodeSandbox

The main parameters of the map are the viewport, mapping area, and map type.

When creating a map, you must specify its center and zoom level. You can change them in the future.

The API provides three built-in map types:

  • Scheme (yandex#map) - by default;
  • Satellite (yandex#satellite);
  • Hybrid (yandex#hybrid).

The map type is implemented as one or several layers superimposed on each other. It is possible to define new types of maps by creating your own layers and/or combining the pre-existing ones. 

<!DOCTYPE html>

<html>
    <head>
        <title>Examples. Setting and changing the map settings.</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="mapparams.js" type="text/javascript"></script>
        <style>
            #map {
                width: 100%;
                height: 250px;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
        <div id="buttons">
            <input
                type="button"
                value="Change center"
                onclick="setCenter();"
            />
            <input
                type="button"
                value="Change boundaries"
                onclick="setBounds();"
            />
            <input
                type="button"
                value="Change the type and switch smoothly"
                onclick="setTypeAndPan();"
            />
        </div>
    </body>
</html>

ymaps.ready(init);

var myMap;

function init() {
    // Map parameters can be set in the constructor.
    myMap = new ymaps.Map(
        // The ID of the DOM element that the map will be added to.
        "map",
        // Map parameters.
        {
            // Geographical coordinates of the center of the displayed map.
            center: [55.76, 37.64],
            // Scale.
            zoom: 10,
            // Type of map coverage: "Satellite".
            type: "yandex#satellite",
        },
        {
            // Searching for organizations.
            searchControlProvider: "yandex#search",
        }
    );
}

function setCenter() {
    myMap.setCenter([57.767265, 40.925358]);
}

function setBounds() {
    /**
     * Bounds - the boundaries of the map viewport. 
     * Set as the geographical coordinates of the South-Easternmost
and North-Westernmost points of the viewport.
     */
    myMap.setBounds([
        [37, 38],
        [39, 40],
    ]);
}

function setTypeAndPan() {
    // Changing the map type to "Hybrid".
    myMap.setType("yandex#hybrid");
    // Smoothly moving the center of the map to the point with the new coordinates.
    myMap.panTo([62.915, 34.461], {
        // The delay between movements.
        delay: 1500,
    });
}