Showing only ONE layer from group layer in Leaflet?

I have the following code to solve my workflow. But it does not work properly.

The problem of the map behaviour appears to be within the map.getZoom function at the end of the code. That function should only be working when train layer is toggled on. But for now the getZoom is reacting on zoom even the train layer is not activated.

For clarification: there are two train layers which actually are the same layers coming from the same resource both. The difference is that aach of them is linked to a different style. Depending on zoom level one layer is displayed and the other is not. The both are grouped to a LayerGroup to have them both displayed as one layer in the LayerControl.

I am not a Developer.

Desired performance:

1. Opening the map with basemap active


2. Panning/zooming around


3. Toggle on the train layer in LayerControl


4. Train layer icons are displayed differently depending on the map's zoom level

Actual performance:

1. Opening the map with basemap active


2. Zooming leads to displaying the train layer automatically --> Note: displays without layer being toggled on in LayerControl



3. If layer is toggled on via LayerControl it shows iconTrain1 + iconTrain2 --> two icons visible


4. Toggling off the layer in LayerControl removes the icons, but zooming in/out displays them again (again without being toggled on in LayerControl)

Answer

To check whether a layer is toggled you can use the hasLayer() method. You have to modify your getZoom function slightly to get it to work; I added an two extra variables (for clarity) and modified your if statement from

if (currentZoom <= 13){ //do something }

to

var hasTrainLayer1 = map.hasLayer(train1);
var hasTrainLayer2 = map.hasLayer(train2);

if (currentZoom <= 13 && hasTrainLayer2){ //do something }

The complete getZoom function with the new part included would look as follows:

//getZoom function to load layer depending on zoom level
map.on('zoomend', function () {
    var currentZoom = map.getZoom();
    var hasTrainLayer1 = map.hasLayer(train1);
    var hasTrainLayer2 = map.hasLayer(train2);

    if (currentZoom <= 13 && hasTrainLayer2) {

        map.removeLayer(train2);
        map.addLayer(train1);
    }
    if (currentZoom >= 14 && hasTrainLayer1) {
        map.removeLayer(train1);
        map.addLayer(train2);
    }

})

To solve the problem of displaying only of the two train layers depending on the map's zoom levels I added minZoom en maxZoom to the layer definitions.

var train1 = L.esri.featureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/WebVerkehr_Data/MapServer/8', {
    useCors: false,
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {
            icon: icontrain1
        });
    },
    maxZoom: 13
}),

train2 = L.esri.featureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/WebVerkehr_Data/MapServer/8', {
    useCors: false,
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {
            icon: icontrain2
        });
    },
    minZoom: 14
});

EDIT: updated my answer based on the updated JSFiddle provided in the comments below.