using leaflet styled layer control and clusters

Question

I'm creating a map that uses this styled layer control plug in and the marker clusters plug in.

I've gotten both plug ins to work on their own with my data, but can't figure out how to get them to work together.

I have downloaded and included the marker cluster layer support files and attempted to implement them but it didn't change anything.

Basically there will be a category for each day of the week, and then within each day filters to show food or drink information, so I need this kind of layer control. I'm also open to suggestions for how to create my own layer control that is like this (grouping layers and then allowing you to filter within those groups)

    var base = L.tileLayer('https://api.mapbox.com/styles/v1/agrosh/cj6p9fuxu2di72ss05n5nhycx/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYWdyb3NoIiwiYSI6ImNpeWFscjNkZzAwN3AycW55aXB6eWtjZnoifQ.ZudIxK3hMrxAX8O4BXhiEg', {
        });

        var zoomLevel = 13;
        var setLat = 35.593464;
        var setLong = -82.551934;

        var map = L.map('map', {
            center: [setLat, setLong],
            zoom: zoomLevel
        });
        map.addLayer(base);


    var mondayFood = [
        {
"name":"name",
"details":"ex",
"address":"",
"website":"",
"lat":35.591140,
"lng":-82.552111,
"yelp":"",
"google":"",
"img":"img"
      }];

    var mondayDrink = [
     {
"name":"name",
"details":"ex",
"address":"",
"website":"",
"lat":35.594446,
"lng":-82.555602,
"yelp":"",
"google":"",
"img":"img"
      }];



    var markerClusters = L.markerClusterGroup.layerSupport().addTo(map);

    // monday
    for ( var i = 0; i < mondayFood.length; ++i )
    {

    var monFood = mondayFood[i].img;

var mF = L.marker( [mondayFood[i].lat, mondayFood[i].lng], {icon: myIcon} )
              .bindPopup( monFood );

        markerClusters.addLayer( mF );

    }

    for ( var i = 0; i < mondayDrink.length; ++i )
    {
var monDrink = mondayDrink[i].img;

var mD = L.marker( [mondayDrink[i].lat, mondayDrink[i].lng], {icon: myIcon} )
              .bindPopup( monDrink );
 markerClusters.addLayer( mD );

    }

    var overlays = [
                        {
                            groupName : "Monday",
                            expanded : true,
                            layers    : { 
                                "Food" : mondayFood
                                "Drink" : mondayDrink,

                            }]; 
                         }

    var options = {
            container_width     : "300px",
            group_maxHeight     : "80px",
            //container_maxHeight : "350px", 
            exclusive           : false,
            collapsed : true, 
            position: 'topright'
        };

        var control = L.Control.styledLayerControl(overlays, options);
        map.addControl(control);

Answer 1

The Layers Control can handle Leaflet layers, not plain JavaScript data object.

In your case, you would probably not even directly use your mD and mF layers, since they are used only temporarily within your loops.

Instead, the classic way is to use Leaflet Layer Groups to gather your drink markers and food markers. MCG.layersupport is designed to be able to handle these Layer Groups.

var markerClusters = L.markerClusterGroup.layerSupport().addTo(map);
var groupFood = L.layerGroup().addTo(markerClusters);
var groupDrink = L.layerGroup().addTo(markerClusters);

for (var i = 0; i < mondayFood.length; ++i) {
  var mF = L.marker([mondayFood[i].lat, mondayFood[i].lng]);
  //markerClusters.addLayer(mF);
  mF.addTo(groupFood);
}

for (var i = 0; i < mondayDrink.length; ++i) {
  var mD = L.marker([mondayDrink[i].lat, mondayDrink[i].lng]);
  //markerClusters.addLayer(mD);
  mD.addTo(groupDrink);
}

var overlays = [{
  groupName: "Monday",
  expanded: true,
  layers: {
    //"Food": mondayFood,
    //"Drink": mondayDrink
    "Food": groupFood,
    "Drink": groupDrink
  }
}];

var control = L.Control.styledLayerControl(overlays);
map.addControl(control);

Live demo: http://plnkr.co/edit/ufoKZ0BJbjXILPV3iLpj?p=preview