Opening the cluster balloon with the selected object
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.
index.html
clusterer_balloon_open.js
<!DOCTYPE html>
<html>
<head>
<title>
Examples. Opening the cluster balloon with the selected object
</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&apikey=<your API-key>"
type="text/javascript"
></script>
<script
src="clusterer_balloon_open.js"
type="text/javascript"
></script>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
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 <strong>balloon " + index + "</strong>",
clusterCaption: "placemark <strong>" + index + "</strong>",
};
},
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();
}
});