Incorrect behaviour when used with Marker Cluster plugin.

[shornuk]

Hi, Nice plugin this one, almost essential if using on a mobile site. I have one issue though, I’m using on a map in conjunction with the Marker Cluster plugin https://github.com/Leaflet/Leaflet.markercluster and whenever I tap a cluster, it brings up the overlay which doesn’t go until I tap it again. Works fine on desktop. Any ideas?

[elmarquis]

Thanks for raising. Will be looking into this issue and will hit you up if any questions.

[shornuk]

Awesome, if you want to see it on a working version you can see it here...walkiees (obviously on a mobile ;) )

[elmarquis]

Super useful, thanks. As soon as you click one of those clusters, that overlay does indeed pop right up. OK thanks. Leave it with me.

[ankalus]

Hi, In my case i fixed this issue by modifying '_defaultIconCreateFunction' https://github.com/Leaflet/Leaflet.markercluster/blob/5748b0115d87c5a668f88a55f9578ee88c0eca06/src/MarkerClusterGroup.js#L810-L823

var markers = L.markerClusterGroup({
  iconCreateFunction: function (cluster) {
    var childCount = cluster.getChildCount();

    var c = ' marker-cluster-';
    if (childCount < 10) {
      c += 'small';
    } else if (childCount < 100) {
      c += 'medium';
    } else {
      c += 'large';
    }

    return new L.DivIcon({ html: '<div class="leaflet-interactive"><span class="leaflet-interactive">' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
  }
});

I will be nice to add custom CSS class to ignoreList in: https://github.com/elmarquis/Leaflet.GestureHandling/blob/62567973d612018175a1384127e003dccfe7eac1/src/js/leaflet-gesture-handling.js#L184-L192 ;-)

[elmarquis]

@ankalus Thanks for sharing the solution. Adding the ignore list to the gestureHandling options is a great idea. Don't know why I didn't think of it before. I'll be sure and add it to the next release. Thanks

[pfischer1290]

For anyone still struggling with this issue: key is to add to all possibly clickable elements the class leaflet-interactive

e.g.

L.divIcon({
  html: '<div class="leaflet-interactive"><b class="leaflet-interactive">' + cluster.getChildCount() + '</b></div>',
  className: `marker-cluster ${weightClass}`,
})

the reason is, the touchevent emitting element is analysed by the lib, which possibly does not have one of the classes of the ignoreList on it.

p.s. this also applies to any other custom elements, for example custom marker-icons