[GIS] How to highlight leaflet marker cluster on mouse over

clusteringleaflet

Is there a way to highlight a leaflet marker cluster when mouse over as you can do for a simple marker?

// ADD YOUR BASE TILES
var baseLayer = L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
    maxZoom: 5
});
// DEFINE THE CLUSTER LAYER
var markers = L.markerClusterGroup({
    showCoverageOnHover: false,
    maxClusterRadius: 10,
    iconCreateFunction: function (cluster) {
        var markers = cluster.getAllChildMarkers();
        return L.divIcon({html: '<br>' + '<div style="text-align:center;color:#ooo">' + cluster.getChildCount() + '</div>', className: 'mycluster', iconSize: L.point(30, 30) });
    },

});


// CALL THE CARTODB SQL API HERE IN URL FORMAT
$.getJSON('http://soundgoods.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM soundgoods_mixtape_map_1', function(data) {
    var geojsonMarkerOptions = {
        radius: 8,
        fillColor: "#FFCC00",
        color: "#323232",
        weight: 2,
        opacity: 0.5,
        fillOpacity: 0.4
    };

    var geojson = L.geoJson(data, {

        pointToLayer: function (feature, latlng) {
            var popupOptions = {maxWidth: 500};
            var popupContent = '<a target="_blank" class="popup" href="' +
                    feature.properties.post + '">' +
                    feature.properties.soundcloud +
                    '<h3>' + "Post & tracklist" + '</h3>' + '</a>';
            var circle = L.circleMarker(latlng, geojsonMarkerOptions).bindPopup(popupContent,popupOptions);

            // Highlight the marker on hover
            circle.on('mouseover', function(){
                circle.setStyle({ color: '#ff8d00'});
            });

            // Un-highlight the marker on hover out
            circle.on('mouseout', function(){
                circle.setStyle(geojsonMarkerOptions);
            });

            return circle;
        }

    });
    markers.addLayer(geojson);

    // CONSTRUCT THE MAP
    var map = L.map('map').setView([0,0],3);
    baseLayer.addTo(map);
    markers.addTo(map);
});

Best Answer

You can register clustermouseover and clustermouseout events on your markerClusterGroup:

markers.on('clustermouseover', function(event) {
  // your custom L.MarkerCluster extended with function highlight()
  event.layer.highlight();
})

markers.on('clustermouseout', function(event) {
  // your custom L.MarkerCluster extended with function resetHighlight()
  event.layer.resetHighlight();
})

See also the docs.

Related Question