--- 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_balloon_open.md - https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/clusterer_balloon_open.md --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt # Opening the cluster balloon with the selected object Open in CodeSandbox
ready, Map, Clusterer, Placemark, map.GeoObjects, clusterer.Balloon

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.

It is often necessary to show information about an object that is in the cluster. In such cases, you can open the cluster balloon with the appropriate placemark selected.

{% list tabs %} - index.html ```html Examples. Opening the cluster balloon with the selected object
``` - clusterer_balloon_open.js ```js ymaps.ready(function () { var myMap = new ymaps.Map( "map", { center: [55.751574, 37.573856], zoom: 9, }, { searchControlProvider: "yandex#search", } ), clusterer = new ymaps.Clusterer(), getPointData = function (index) { return { balloonContentBody: "placemark balloon " + index + "", clusterCaption: "placemark " + index + "", }; }, 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 = []; for (var i = 0, len = points.length; i < len; i++) { geoObjects[i] = new ymaps.Placemark(points[i], getPointData(i)); } clusterer.add(geoObjects); myMap.geoObjects.add(clusterer); // Opening the balloon on the third placemark in the array. var objectState = clusterer.getObjectState(geoObjects[2]); if (objectState.isClustered) { /** * Setting the placemark as an active object if it is in the cluster. * Then it will be "selected" in the opened cluster balloon. */ objectState.cluster.state.set("activeObject", geoObjects[2]); clusterer.balloon.open(objectState.cluster); } else if (objectState.isShown) { // Opening the palcemark's balloon, if it does not fall in the cluster but visible on the map. geoObjects[2].balloon.open(); } }); ``` {% endlist %}