JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.5/esri-leaflet.js"></script>
<div id="map"></div>

CSS

body {
            margin: 0;
            padding: 0;
        }
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }

JavaScript

var map = L.map('map').setView([50.937980, 6.952989], 13);

var basemap = L.esri.basemapLayer('Streets').addTo(map);

//references leading origin of icons
var icontrain1 = L.icon({
    iconUrl: 'http://files.softicons.com/download/system-icons/web0.2ama-icons-by-chrfb/png/48x48/Maps%20-%20U-Tube.png',
    iconSize: [48, 48],
    iconAnchor: [20, 20]
});

var icontrain2 = L.icon({
    iconUrl: 'http://files.softicons.com/download/system-icons/web0.2ama-icons-by-chrfb/png/48x48/Maps%20-%20U-Tube.png',
    iconSize: [25, 25],
    iconAnchor: [10, 10]
});

//combining the train layer into a group to handle them as one in the code (url is the same, only icons vary)
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
    });

//using a LayerGroup class to have a layer called train
var train = L.layerGroup([train1, train2]);

//getZoom function to load layer depending on zoom level
map.on('zoomend', function () {
    var currentZoom = map.getZoom();
    var hasTrainLayer = map.hasLayer(train1, train2);
    
    if (currentZoom <= 13 && hasTrainLayer) {
        map.removeLayer(train2);
        map.addLayer(train1);
    }
    if (currentZoom >= 14 && hasTrainLayer) {
        map.removeLayer(train1);
        map.addLayer(train2);
    }

})

//definition for layers and names for LayerControl
var basemap = {
    "Basemap": basemap,
};

var train = {
    "Train": train
};

//adding LayerControl to map
L.control.layers(basemap,...