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. 

<!DOCTYPE html>
<html>
    <head>
        <title>
            Examples. Changing the color of clusters and placemarks when
            hovering
        </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="clusterer_icon_hover.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({
            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 <strong>balloon " + index + "</strong>",
                clusterCaption: "placemark <strong>" + index + "</strong>",
            };
        },
        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,
    });
});