Adding objects to the map via ObjectManager

Open in CodeSandbox

ObjectManager - A class for adding a large number of objects to the map without needing to create placemarks and add them to the map individually.

The objects added to the ObjectManager are located in the ObjectManager.objects collection. Clusters formed from the added placemarks are added to the ObjectManager.clusters collection. The visual representation of placemarks is created asynchronously on demand. The visual representation of placemarks and clusters are objects implementing the IOverlay interface. In particular, overlay.Placemark. Overlays are placed in the ObjectManager.objects.overlays and ObjectManager.clusters.overlays collections, respectively.

ObjectManageraccepts placemark descriptions in JSON format. Placemarks can be clustered or shown as-is. If you don't use clusterization, the placemarks will be shown only in the visible map area. Since objects are stored in the manager as JSON descriptions and their visual representation is created only when necessary, this method of adding points to the map works faster than adding placemarks to the map directly or via the clusterer. 

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Adding a large number of objects 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="https://yandex.st/jquery/2.2.3/jquery.min.js"
            type="text/javascript"
        ></script>
        <script src="object_manager.js" type="text/javascript"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
            a {
                color: #04b; /* Link color */
                text-decoration: none; /* Removing uderline from links */
            }
            a:visited {
                color: #04b; /* Visited link color */
            }
            a:hover {
                color: #f50000; /* Link color when hovering */
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map(
            "map",
            {
                center: [55.76, 37.64],
                zoom: 10,
            },
            {
                searchControlProvider: "yandex#search",
            }
        ),
        objectManager = new ymaps.ObjectManager({
            // Setting an option to make placemarks start clusterizing.
            clusterize: true,
            // ObjectManager accepts the same options as the clusterer.
            gridSize: 32,
            clusterDisableClickZoom: true,
        });

    /**
     * To set options for single objects and clusters,
     * we refer to child collections of ObjectManager.
     */
    objectManager.objects.options.set("preset", "islands#greenDotIcon");
    objectManager.clusters.options.set(
        "preset",
        "islands#greenClusterIcons"
    );
    myMap.geoObjects.add(objectManager);

    $.ajax({
        url: "data.json",
    }).done(function (data) {
        objectManager.add(data);
    });
}