leaflet leaflet.markercluster leaflet.deflate

Leaflet.Deflate with Leaflet.markercluster does not show cluster coverage on hover

when you mouse over a cluster, Leaflet.markercluster should show the bounds of its markers. this is the (simplified) code I am using:

map = new L.Map('map');

L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 13,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
  }
).addTo(map);
map.setView([51.505, -0.09], 11);


let deflate_features = L.deflate({
  minSize: 40,
  markerCluster: true
});
deflate_features.addTo(map);

var polygon = L.polygon([
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047]
]);
deflate_features.addLayer(polygon);

var polyline = L.polyline([
  [51.52, -0.05],
  [51.53, -0.10],
], {
  color: 'red'
});
deflate_features.addLayer(polyline);

#map {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}

<html>

<head>
  <link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" />
  <link href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" rel="stylesheet" />
  <link href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" rel="stylesheet" />

  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/L.Deflate.js"></script>

</head>

<body>
  <div id="map"></div>
</body>

</html>

why does the cluster coverage on hover not show?

Solution

coverage is not shown if there are only 2 objects... :|

adding a third object, e.g.:

var polyline2 = L.polyline([
  [51.535, -0.1],
  [51.525, -0.05],
], {
  color: 'green'
});
deflate_features.addLayer(polyline2);

enables cluster coverage: