---
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_icon_hover.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/clusterer_icon_hover.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt
# Changing the color of clusters and placemarks when hovering
Open in CodeSandbox
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.
The example shows how to change the color of the icon or cluster on mouse hover.
{% list tabs %}
- index.html
```html
Examples. Changing the color of clusters and placemarks when
hovering
```
- clusterer_icon_hover.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({
preset: "islands#invertedVioletClusterIcons",
clusterHideIconOnBalloonOpen: false,
geoObjectHideIconOnBalloonOpen: false,
});
/**
* The clusterer extends the collection, which allows you to use the same handler
* for processing events of all geo objects.
* We'll change the color of the icons and clusters on mouse hover.
*/
clusterer.events
// You can listen to multiple events at once by specifying their names in the array.
.add(["mouseenter", "mouseleave"], function (e) {
var target = e.get("target"),
type = e.get("type");
if (typeof target.getGeoObjects != "undefined") {
// An event occurred on the cluster.
if (type == "mouseenter") {
target.options.set(
"preset",
"islands#invertedPinkClusterIcons"
);
} else {
target.options.set(
"preset",
"islands#invertedVioletClusterIcons"
);
}
} else {
// An event took place on the geo object.
if (type == "mouseenter") {
target.options.set("preset", "islands#pinkIcon");
} else {
target.options.set("preset", "islands#violetIcon");
}
}
});
var getPointData = function (index) {
return {
balloonContentBody:
"placemark balloon " + index + "",
clusterCaption: "placemark " + index + "",
};
},
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 = [];
for (var i = 0, len = points.length; i < len; i++) {
geoObjects[i] = new ymaps.Placemark(
points[i],
getPointData(i),
getPointOptions()
);
}
clusterer.add(geoObjects);
myMap.geoObjects.add(clusterer);
myMap.setBounds(clusterer.getBounds(), {
checkZoomRange: true,
});
});
```
{% endlist %}