I am adding multiple layers with various opacities to my leaflet map object like this:

 var TopoLayer = L.esri.dynamicMapLayer(https://gis.in.gov/arcgis/rest/services/Imagery_Basemap/MapServer, {

                        opacity: 0.8,

                        // Tell the map to use a loading control



                        useCors: false

                    }).addTo(map);

   var EPSLayer = L.esri.dynamicMapLayer(https://gis.in.gov/arcgis/rest/services/DOT/EPS_Map_2015/MapServer, {

                    opacity: 1,

                    // Tell the map to use a loading control



                    useCors: false

                }).addTo(map);

Now when a user clicks on a checkbox, I would like remove the layer or add it back. I have tried

                    map.removeLayer(EPSLayer);

                    map.removeLayer(tiles);

However, that didnt fix the issue. Any ideas or pointers that could help would be greatly appreciated.

*** Update I have created a fiddle to show the issue:

https://jsfiddle.net/31gmr4ss/3/

The idea is to click on the tree icon to show the areial view and then switch to the map view when its clicked again.

It appears to work when the tree icon is clicked however the arial view is present when the map is zoomed.

As @Fabrizio has suggested, the remove should not be passed string values, however passing just variable names causes the map to not work at all.

Thanks