<div id="map"></div>

    <div id="basemaps-wrapper">
        <select name="basemaps" id="basemaps" onchange="changeBasemap(basemaps)">
            <option value="Streets">Streets</option>
            <option value="Imagery">Imagery</option>
        </select>
    </div>


<script>
    var map = L.map('map', { zoomControl: false });
    map.setView([50, -25], 4)
    //var map = L.map('map').setView([50, -25], 4);
    map.zoomControl = false;
    var layer = L.esri.basemapLayer('Streets').addTo(map);
    var layerLabels;


    L.control.zoom({
        position: 'topright'
    }).addTo(map);

    function setBasemap(basemap) {
        if (layer) {
            map.removeLayer(layer);
        }

        layer = L.esri.basemapLayer(basemap);

        map.addLayer(layer);

        if (layerLabels) {
            map.removeLayer(layerLabels);
        }

        if (basemap === 'ShadedRelief'
         || basemap === 'Oceans'
         || basemap === 'Gray'
         || basemap === 'DarkGray'
         || basemap === 'Imagery'
         || basemap === 'Terrain'
       ) {
            layerLabels = L.esri.basemapLayer(basemap + 'Labels');
            map.addLayer(layerLabels);
        }
    }

    function changeBasemap(basemaps) {
        var basemap = basemaps.value;
        setBasemap(basemap);
    }
</script>