Loading the module on demand

Open in CodeSandbox

In this example, only the map and button modules are loaded during initialization.
The placemark module is loaded when the button is clicked.
You can load separate modules using the require method in the modular system.
The method returns a promise object that is resolved by an array of requested modules.
For convenience, the example uses the 'spread' method, which passes the function the data as a list of arguments, not as an array.

The Yandex.Maps API consists of a large number of interrelated modules.
By default, when the API is enabled, it loads a standard set of modules (package.full), which includes everything that is necessary for using the API.
To reduce the amount of API code that is loaded, you can enable certain modules instead of the full set.
You can do this by specifying the desired modules in the 'load' GET parameter. Modules are specified as a comma-separated list.
If the 'load' GET parameter isn't specified, package.full is loaded.
For more information aobut modules, see the Modules section. 
<!DOCTYPE html>
<html>
    <head>
        <title>An example of loading only necessary modules</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=UTF-8"
        />
        <!--
            You can use GET for the 'load' parameter to list the necessary Yandex.Maps API modules.

            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/?load=Map,control.Button&amp;lang=en_RU&amp;apikey=<your API-key>"
            type="text/javascript"
        ></script>
        <script src="module_request.js" type="text/javascript"></script>
        <style>
            html,
            body,
            #map {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(function () {
    var myMap = new ymaps.Map("map", {
        center: [55.755381, 37.619044],
        zoom: 7,
        // Not displaying any standard controls on the map, as they were not loaded.
        controls: [],
    });

    var loadControl = new ymaps.control.Button({
        data: { content: "Add a placemark" },
        options: { maxWidth: 200, float: "right", selectOnClick: false },
    });
    myMap.controls.add(loadControl);

    loadControl.events.add("click", function () {
        if (ymaps.Placemark) {
            // If the module has already been loaded, there is no need to access the module system again.
            addPlacemark();
        } else {
            /**
             * On-demand loading of the placemarks class and overlay.
             * By default, the overlay is automatically loaded after you add placemarks to the map.
             * In this example, the placemark module itself is loaded asynchronously and there is no need to load the overlay separately.
             */
            ymaps.modules
                .require(["Placemark", "overlay.Placemark"])
                .spread(function (Placemark, PlacemarkOverlay) {
                    /**
                     * Adding the class manually to the global viewport, since this does not happen
                     * when using the "require" method of the module system.
                     */
                    ymaps.Placemark = Placemark;
                    addPlacemark();
                });
        }
    });

    function addPlacemark() {
        var center = myMap.getCenter();
        // Setting a random position close to the center of the map.
        center[0] += Math.random() * 2 - 1;
        center[1] += Math.random() * 2 - 1;
        var placemark = new ymaps.Placemark(center);
        myMap.geoObjects.add(placemark);
    }
});