Leaflet: How to create toggleable overlays from a single GeoJSON FeatureCollection?

Question

I am a beginner to Leaflet/Mapbox and I can create a simple map and plot all the points from a GeoJSON FeatureCollection, but I am unsure how to add the ability to toggle (via checkboxes) specific points based on a property named category.

How would I list all the categories layers in my control and give the user the ability to toggle on/off the various layers, as well as a main master layer that shows ALL of the points? Demo FIDDLE here

Here's my example map with 3 example categories in a GeoJSON FeatureCollection:

var collection = [{
"type": "FeatureCollection",
    "features": [
    {"type":"Feature","properties":{"category":"Aviation","Name":"Plant No 1"},"geometry":{"type":"Point","coordinates":[81.73828125,62.59334083012024]}},
    {"type":"Feature","properties":{"category":"Electrical","Name":"Plant No 2"},"geometry":{"type":"Point","coordinates":[94.5703125,58.722598828043374]}},
    {"type":"Feature","properties":{"category":"Military","Name":"Base 1"},"geometry":{"type":"Point","coordinates": [104.4140625,62.91523303947614]}}
  ]}];

The code:

var myStyle = { radius: 10, fillOpacity: 1, stroke: false, weight: 1, opacity: 1, fill: true, clickable: true };

var allPoints = L.geoJson(collection, {
    pointToLayer: function(feature, latlng){
        return L.circleMarker(latlng, myStyle);
    },
    style: function(feature){
        switch(feature.properties.category){
            case 'Aviation' : return { color: "black" };
            case 'Elecrtical' : return { color: "blue" };
            case 'Military' : return { color: "red" };
        }
    },
    onEachFeature: function(feature, layer){
        layer.bindPopup(feature.properties.Name);
    }
});

var basemapsObj = { 'basic': L.mapbox.tileLayer('mapbox.light'), 'satellite': L.mapbox.tileLayer('mapbox.satellite-afternoon') };

var overlaysObj = { 'All points': allPoints.addTo(map) }

L.control.layers(basemapsObj, overlaysObj, { collapsed: false }).addTo(map);

Answer 1

The easiest trick is to create your "master" Layer Group and add all other category Layer Groups into it. You can of course add this master into the overlays list of your Layers Control, so that it is listed and has a checkbox for the user to toggle it on/off. The problem is that this checkbox will get out-of-sync when user toggles individual categories.

A more complicated trick is to keep your master Layer Group empty, and emulate the addition / removal of all other category Layer Groups by listening to the map overlayadd and overlayremove events and manually adding / removing the categories.

With this 2nd method, you can also implement a correction for the master layer checkbox by listening to overlayadd and overlayremove for the individual categories and adding the master when all of them are added, or removing the master when at least one category is missing.

Demo: https://jsfiddle.net/qkvo7hav/7/

Note: for some reason it looks like Mapbox version of Layers Control does not keep its checkboxes in sync when layers are added / removed outside of the Control. We can request it to re-sync by calling myControl._update().