D3 Examples - Leaflet change tile service on zoom

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> 
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #mapid { height: 100%; }
  </style>
</head>
​
<body>
  <div id="mapid"></div>
  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
  <script>
    var mymap = L.map('mapid').setView([4, -74], 5);
    
    var cartoLight = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://cartodb.com/attributions">CartoDB</a>',
    subdomains: 'abcd',
    maxZoom: 19
    });
    
    var cartoDark = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://cartodb.com/attributions">CartoDB</a>',
    subdomains: 'abcd',
    maxZoom: 19
    });
    
    cartoLight.addTo(mymap); //initial layer according to initial zoom
    
    mymap.on("zoomend", function(e){
        console.log("Zoom level: ", mymap.getZoom());
    if(mymap.getZoom() > 6){ //Level 6 is the treshold 
          mymap.removeLayer(cartoLight);
          cartoDark.addTo(mymap);
        }else{
          mymap.removeLayer(cartoDark);
          cartoLight.addTo(mymap);
        }
    });
  </script>
</body>
    