Changing the clusterer cell size

Open in CodeSandbox

When adding a large number of placemarks to the map, clustering them helps avoid a large loss in browser performance when displaying them.

For comparison, in this example, you can add placemarks to the map both combined in clusters and in regular collections. 

<!DOCTYPE html>

<html>
    <head>
        <title>Examples. Using clusterization</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="clusterer_gridSize.js" type="text/javascript"></script>
        <style>
            body,
            html {
                font-family: Arial;
                font-size: 14px;
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }

            #map {
                width: 100%;
                height: 70%;
            }
            .inputs {
                padding: 5px;
            }
        </style>
    </head>

    <body>
        <div class="inputs">
            Number of placemarks:
            <input type="text" size="6" id="count" value="100" /> <br />
            <input type="checkbox" id="useClusterer" /> Use the clusterer<br />
            <input type="button" value="Add to the map" id="addMarkers" />
            <input
                type="button"
                value="Remove all placemarks"
                id="removeMarkers"
            />
        </div>

        <div id="map"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map(
        "map",
        {
            center: [63.369315, 105.440191],
            zoom: 3,
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    // Creating a clusterer with a red icon (the default is blue).
    var clusterer = new ymaps.Clusterer({
            preset: "islands#redClusterIcons",
        }),
        // Creating a collection of geo objects.
        collection = new ymaps.GeoObjectCollection(),
        // Additional input field when clusterization is enabled.
        gridSizeField = $(
            '<div class="field" style="display: none">Size of the cluster cell in pixels: <input type="text" size="6" id ="gridSize" value="64"/></div>'
        ).appendTo(".inputs");

    // Adding the clusterer to the map.
    myMap.geoObjects.add(clusterer);

    // Adding a collection of geo objects to the map.
    myMap.geoObjects.add(collection);

    $("#useClusterer").bind("click", toggleGridSizeField);
    $("#addMarkers").bind("click", addMarkers);
    $("#removeMarkers").bind("click", removeMarkers);

    // Adding placemarks with arbitrary coordinates.
    function addMarkers() {
        // The number of placemarks that you want to add to the map.
        var placemarksNumber = $("#count").val(),
            bounds = myMap.getBounds(),
            // Flag indicating whether to cluster objects.
            useClusterer = $("#useClusterer").is(":checked"),
            // The clusterer cell size, specified by the user.
            gridSize = parseInt($("#gridSize").val()),
            // Generating the required number of new objects.
            newPlacemarks = createGeoObjects(placemarksNumber, bounds);

        if (gridSize > 0) {
            clusterer.options.set({
                gridSize: gridSize,
            });
        }

        /**
         * If you are using the clusterer, add the cluster to the map;
         * if not using it, add the collection of geo objects to the map.
         */
        if (useClusterer) {
            // Adding an array of placemarks to the clusterer.
            clusterer.add(newPlacemarks);
        } else {
            for (var i = 0, l = newPlacemarks.length; i < l; i++) {
                collection.add(newPlacemarks[i]);
            }
        }
    }

    // A function that creates the necessary number of geo objects within a specified area.
    function createGeoObjects(number, bounds) {
        var placemarks = [];
        // Creating the desired number of placemarks
        for (var i = 0; i < number; i++) {
            // Generating placemark coordinates randomly.
            coordinates = getRandomCoordinates(bounds);
            // Creating a placemark with random coordinates.
            myPlacemark = new ymaps.Placemark(coordinates);
            placemarks.push(myPlacemark);
        }
        return placemarks;
    }

    /**
     * A function that generates random coordinates
     * within the viewport of the map.
     */
    function getRandomCoordinates(bounds) {
        var size = [
            bounds[1][0] - bounds[0][0],
            bounds[1][1] - bounds[0][1],
        ];
        return [
            Math.random() * size[0] + bounds[0][0],
            Math.random() * size[1] + bounds[0][1],
        ];
    }

    // Show/hide additional input field.
    function toggleGridSizeField() {
        /**
         * If the user has enabled clusterization mode, an additional input field appears
         * for entering a clusterization option - the size of cluster cells, in pixels.
         * By default, the cluster cell size is 64.
         * When clusterization is disabled, the additional input field is hidden.
         */
        gridSizeField.toggle();
    }

    // Removing all placemarks from the map
    function removeMarkers() {
        // Removing all placemarks from the clusterer.
        clusterer.removeAll();
        // Removing all placemarks from the collection.
        collection.removeAll();
    }
}