1

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);
});
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.