--- metadata: - name: generator content: Diplodoc Platform v5.39.1 alternate: - https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/clusterer_create.md - https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/clusterer_create.md --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt # Creating a clusterer Open in CodeSandbox
ready, Map, GeoObjectCollection, Clusterer, Placemark, map.GeoObjects

The clusterer is used for combining closely positioned placemarks in a group (cluster).

The clusterer is implemented by the Clusterer class. The clusterer options can be passed to the constructor as parameters: the style of the cluster icon, the size of its cell, and so on. For the list of available options, see the corresponding section in the reference guide.

To add geo objects to the clusterer, use the add method. Either a separate geo object or an array of geo objects can be passed as the parameter.

{% list tabs %} - index.html ```html Examples. Adding a placemark clusterer to the map
``` - clusterer_create.js ```js ymaps.ready(function () { var myMap = new ymaps.Map( "map", { center: [55.751574, 37.573856], zoom: 9, behaviors: ["default", "scrollZoom"], }, { searchControlProvider: "yandex#search", } ), /** * Creating a clusterer by calling a constructor function. * A list of all options is available in the documentation. * @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#constructor-summary */ clusterer = new ymaps.Clusterer({ /** * Only cluster styles can be specified via the clusterer; * for placemark styles, each placemark must be set separately. * @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/option.presetStorage.xml */ preset: "islands#invertedVioletClusterIcons", /** * Setting to "true" if we want to cluster only points with the same coordinates. */ groupByCoordinates: false, /** * Setting cluster options in the clusterer with the "cluster" prefix. * @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/ClusterPlacemark.xml */ clusterDisableClickZoom: true, clusterHideIconOnBalloonOpen: false, geoObjectHideIconOnBalloonOpen: false, }), /** * The function returns an object containing the placemark data. * The clusterCaption data field will appear in the list of geo objects in the cluster balloon. * The balloonContentBody field is the data source for the balloon content. * Both fields support HTML markup. * For a list of data fields that are used by the standard content layouts for * geo objects' placemark icons and balloons, see the documentation. * @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml */ getPointData = function (index) { return { balloonContentHeader: 'Your link can be here', balloonContentBody: '

Your name:

The phone in the format 2xxx-xxx:

', balloonContentFooter: "Information provided by: placemark balloon " + index + "", clusterCaption: "placemark " + index + "", }; }, /** * The function returns an object containing the placemark options. * All options that are supported by the geo objects can be found in the documentation. * @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml */ getPointOptions = function () { return { preset: "islands#violetIcon", }; }, points = [ [55.831903, 37.411961], [55.763338, 37.565466], [55.763338, 37.565466], [55.744522, 37.616378], [55.780898, 37.642889], [55.793559, 37.435983], [55.800584, 37.675638], [55.716733, 37.589988], [55.775724, 37.56084], [55.822144, 37.433781], [55.87417, 37.669838], [55.71677, 37.482338], [55.78085, 37.75021], [55.810906, 37.654142], [55.865386, 37.713329], [55.847121, 37.525797], [55.778655, 37.710743], [55.623415, 37.717934], [55.863193, 37.737], [55.86677, 37.760113], [55.698261, 37.730838], [55.6338, 37.564769], [55.639996, 37.5394], [55.69023, 37.405853], [55.77597, 37.5129], [55.775777, 37.44218], [55.811814, 37.440448], [55.751841, 37.404853], [55.627303, 37.728976], [55.816515, 37.597163], [55.664352, 37.689397], [55.679195, 37.600961], [55.673873, 37.658425], [55.681006, 37.605126], [55.876327, 37.431744], [55.843363, 37.778445], [55.875445, 37.549348], [55.662903, 37.702087], [55.746099, 37.434113], [55.83866, 37.712326], [55.774838, 37.415725], [55.871539, 37.630223], [55.657037, 37.571271], [55.691046, 37.711026], [55.803972, 37.65961], [55.616448, 37.452759], [55.781329, 37.442781], [55.844708, 37.74887], [55.723123, 37.406067], [55.858585, 37.48498], ], geoObjects = []; /** * Data is passed to the placemark constructor as the second parameter, and options are third. * @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/Placemark.xml#constructor-summary */ for (var i = 0, len = points.length; i < len; i++) { geoObjects[i] = new ymaps.Placemark( points[i], getPointData(i), getPointOptions() ); } /** * You can change clusterer options after creation. */ clusterer.options.set({ gridSize: 80, clusterDisableClickZoom: true, }); /** * You can add a JavaScript array of placemarks (not a geo collection) or a single placemark to the clusterer. * @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#add */ clusterer.add(geoObjects); myMap.geoObjects.add(clusterer); /** * Positioning the map so that all objects become visible. */ myMap.setBounds(clusterer.getBounds(), { checkZoomRange: true, }); }); ``` {% endlist %}