Leaflet Markercluster showCoverageOnHover triggered wrong

Question

I am using markerCluster for Leaflet with the showCoverageOnHover option set to true. However, in Firefox (v 46.0.1), the event showCoverageOnHover is not triggered correctly, meaning that the cluster area is shown not only when the mouse is hovered over the cluster, but also if the mouse is far away from that cluster. Basically, I am using the standard procedure to create a markerClusterGroup, but with a customized icon creation function (Using d3 to draw a Pie chart). My code looks as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">

#mapid {
    height: 60vh;
} 

</style>

<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />

<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.5.0/leaflet.markercluster.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.5.0/MarkerCluster.css' rel='stylesheet' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<title>WorldMap</title>

<script type="text/javascript">

function defineClusterIcon(cluster) {

    var color = d3.scale.category20b();
    //some dummy json
    var myjson = '[{ "label":"Monday", "count": 15 },{ "label":"Tuesday", "count": 20 }]';
    var dataset = JSON.parse( myjson );
    var size = 40;
    var radius= size / 2;

    var svgres = document.createElementNS(d3.ns.prefix.svg, 'svg');
    var svg = d3.select(svgres).append('svg')
                .attr('width', size)
                .attr('height', size)
                .append('g')
                .attr('transform','translate(' + (size / 2) + ',' + (size / 2) + ')'); //center g 
    var arc = d3.svg.arc().outerRadius(radius);
    var pie = d3.layout.pie().value(function(d) {
        return d.count;
    }); 

    //create final chart
    svg.selectAll('path').data(pie(dataset)) //fill dataset into path
        .enter() //create placeholder for data
        .append('path') //fill placeholder with data in path
        .attr('d', arc) //define an attribute d
        .attr('fill', function(d, i) {
            return color(d.data.label);
        });

    var html = serializeXmlNode(svgres);

    var myIcon = new L.DivIcon({
        html : html,
        className : 'mycluster',
        iconSize : new L.Point(size, size)
    });
    return myIcon;
}

function serializeXmlNode(xmlNode) {
    if (typeof window.XMLSerializer != "undefined") {
        return (new window.XMLSerializer()).serializeToString(xmlNode);
    } else if (typeof xmlNode.xml != "undefined") {
        return xmlNode.xml;
    }
    return "";
}

</script>
</head>
<body>

<div id="mapid"></div>

<script type="text/javascript">

var map = L.map('mapid', { 
    center: [40, 40], 
    maxZoom : 10,
    zoom: 2 
}); 

//create markercluster
var markers = new L.markerClusterGroup({
    showCoverageOnHover: true, 
    iconCreateFunction: defineClusterIcon          
});

//some example markers
var marker = new L.marker([40.0,10.0]);
markers.addLayer(marker);

var marker = new L.marker([42.0,-12.0]);
markers.addLayer(marker);

var marker = new L.marker([50.0,30.0]);
markers.addLayer(marker);
map.addLayer(markers);

</script> 
</body>
</html>

Any ideas why the showCoverageOnHover event is not triggered correctly in Firefox?

Thanks!

Answer 1

Looks like the SVG element you created overflows the Leaflet icon.

Simply setting overflow: hidden CSS rule on your icon class seems to solve your issue.

.mycluster {
  overflow: hidden;
}

Updated JSFiddle: https://jsfiddle.net/sqeypmrn/1/

Note: question also posted on Leaflet.markercluser GitHub page as issue #677 .

Leaflet Markercluster showCoverageOnHover triggered wrong

Question

1 answers

solution1
0 ACCPTED 2016-05-20 12:16:59

Leaflet Markercluster showCoverageOnHover triggered wrong

Question

1 answers

solution1 0 ACCPTED 2016-05-20 12:16:59

solution1
0 ACCPTED 2016-05-20 12:16:59