leaflet.js: set max zoom level per layer?

Question

I am using CartoDB.js (3.15.9, based on Leaflet.js) with two map base layers, a street layer from CartoDB and a satellite layer from MapQuest:

  var options = {
    center: [53.2, -2.0],
    zoom: 6
  };
  var map = new L.Map('map', options);
  var streetLayer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
  }).addTo(map);
  L.control.layers({
    'Map': streetLayer, 
    'Satellite': MQ.satelliteLayer()
  }, null, {'collapsed': false, 'position': 'bottomleft'}).addTo(map);

Can I set per-layer max zoom levels? I would like a max zoom of 18 on the street layer, and 21 on the satellite layer (this is because they have different max zoom levels available).

I tried setting maxZoom: 18 on the streetLayer object, but this doesn't seem to do anything. The same option on options sets a global maximum zoom, but that obviously isn't what I want.

Answer 1

As you figured out, map's maxZoom option limits the navigation (the user cannot zoom higher than the specified level).

On a Tile Layer, the maxZoom option defines up to which level the Tile Layer is updated on the map. Passed that level, the Tile Layer no longer updates, i.e. tiles are no longer downloaded and displayed.

You might be interested in using it in conjunction with the maxNativeZoom option:

Maximum zoom number the tile source has available. If it is specified, the tiles on all zoom levels higher than maxNativeZoom will be loaded from maxNativeZoom level and auto-scaled.

For example, for your street layer, you could set maxNativeZoom at 18 and maxZoom at 21.

Now if you want different navigation limits depending on what the map currently displays (for example if you have your 2 Tile Layers as basemaps in a Layers Control, so that they are not simultaneously displayed), you could use map.setMaxZoom() to dynamically change that limit when the user switches the basemap.