combining overlays in mapbox / leaflet layers control

Question

I'm trying to combine 2 or more overlays into one overlay checkbox. I'm using leaflet layers control with mapbox.js 1.6 to toggle my overlays. It doesn't matter to me if I combine them on mapbox.com into one data layer, or if I combine separate data layers in my JS code into one overlay checkbox, but I can't seem to do either. I'm exporting MBTiles from Tilemill to my Mapbox account.

Note that it's not an option to:

• combine them in Tilemill (the single zoom level and square bounding box won't work for me across all layers)
• add the various data layers to a single map project on Mapbox.com (I'd like it to be toggleabe by the user)

Answer 1

You can use L.layerGroup to combine layers

var group = L.LayerGroup([layer1, layer2];

// add default layers to map
map.addLayer(layer1);

// switcher
var baseLayers = {
    "My Group": group,
    // more layers
};

// add layer groups to layer switcher control
var controlLayers = L.control.layers(baseLayers).addTo(map);

You may be interested in this thread Leaflet layer control for basemap group layers

Answer 2

You can use the L.control.layers with the L.layerGroup. Here is the JSFiddle I wrote for this. You can add as many base or overlay layers you want.

Once you create the L.layerGroups, define the base and the overlay layers and add them to the control like this:

var controlLayers = L.control.layers(baseLayers, overlayMaps).addTo(map);