Leaflet - display GeoJSON data only when certain layer is selected

Question

I'm trying to combine these two leaflet tutorials:

http://leafletjs.com/examples/layers-control.html

http://leafletjs.com/examples/choropleth.html

I'm using a layer control where the user can switch between tile providers and also can switch on the GeoJSON data. JSFiddle : http://jsfiddle.net/jrzd4448/2/

var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

var OpenStreetMap_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

// initialize map
var map = L.map('map', {
    center: [37.8, -96],
    zoom: 4,
    layers: [OpenStreetMap_Mapnik]
});

var baseMaps = {
    "Mapnik": OpenStreetMap_Mapnik,
    "Black and White": OpenStreetMap_BlackAndWhite
};

loadstates = L.geoJson(statesData);
var states = {
    "US States": loadstates
};

L.control.layers(baseMaps, states).addTo(map);

I want that the GeoJSON layer ("US States") is automatically selected when the "Black & White" layer is selected. And accordingly deselected when switching back to "Mapnik". Do I have to use something like this or addlayer or a jQuery function? I guess it would be best not to load the GeoJSON data at all until the according layer is clicked?

I tried building a LayerGroup which does not work.

var baseMaps = {
    "Mapnik": OpenStreetMap_Mapnik,
    "Black and White": OpenStreetMap_BlackAndWhite
};

loadstates = L.geoJson(statesData);
var group = L.layerGroup([OpenStreetMap_BlackAndWhite, loadstates]);
var statesandlayer = {
    "Group": group
};

L.control.layers(baseMaps, statesandlayer).addTo(map);

Thanks for ideas!

Answer 1

You can skip the plugin from your own answer and just use the baselayerchange event from your L.Map instance:

var baseLayers = {
  'CartoDB Positron': L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
  }),
  'CartoDB Dark Matter': L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
  })
}

var map = L.map('leaflet', {
  'center': [0, 0],
  'zoom': 0,
  'layers': [baseLayers['CartoDB Positron']]
});

var layerControl = new L.Control.Layers(baseLayers).addTo(map);

map.on('baselayerchange', function (event) {
  // Returns 'CartoDB Positron' or 'CartoDB Dark Matter'
  console.log(event.name);
});

Example on Plunker: http://plnkr.co/edit/gORbB8?p=preview

Answer 2

Seems like this plugin does the trick: https://github.com/vogdb/Leaflet.ActiveLayers

Together with baselayerchange I get this:

var control = L.control.activeLayers(baseMaps);
control.addTo(map);

map.on('baselayerchange', baseLayerChange);

function baseLayerChange(){
if (control.getActiveBaseLayer().name == 'Black and White') {
      map.addLayer(loadstates);
}
    else
   {
        map.removeLayer(loadstates);        
   }
}

Which does what I want. Updated JSFiddle: http://jsfiddle.net/jrzd4448/3/

If someone knows a solution without the need for an extra plugin please let me know.