单张标记群集和图层控制不起作用

Question

当前，我的代码的精简版如下：

var mcg = new L.MarkerClusterGroup(clusterOptions);
    var control = L.control.layers(null, null, { collapsed: true })
    var coffeeGroup = L.featureGroup.subGroup(mcg);
    map.addLayer(mcg);
    for (let i = 0; i < clean.length; i++) {
        point = clean[i];
        if (point.hasOwnProperty('geocoded_column_1')) {
            var popup = '<div class="popup-content"><table class="table table-striped table-bordered table-condensed">';
            popup += '<tr><th>' + point.name + '</th><td>' + '</td></tr>';
            popup += "</table></popup-content>";
            marker = L.marker(point.geocoded_column_1.coordinates, {
                icon: L.icon({
                    iconUrl: iconHandler(point),
                    iconSize: [20, 20]
                })
            });
            marker.bindPopup(popup, popupOpts);
            switch (point.category) {    
                    case 'Coffee Shop':
                        marker.addTo(coffeeGroup);
                        break;
            }
        }
    }
control.addOverlay(coffeeGroup, 'Coffee');
control.addTo(map);
coffeeGroup.addTo(map);

实时演示：https://jsfiddle.net/pewqur17/2/

我正在尝试创建一个地图，该地图将由不同的食品参与者填充，并且由于最终该地图将由成千上万个标记填充，因此我需要利用标记聚类以使其看起来更好。从StackOverflow提供的各种示例以及插件本身来看，这应该可以工作。但是目前，我的地图尚未填充。由于控制台中也没有错误，因此使调试变得更加困难。任何帮助将不胜感激。