Cannot set zoom past 23 in Leaflet

Question

How can I set the zoom to 23 or more? When I try to set the zoom higher the map image disappears. I am able to zoom in past 23 once the map is activated in a browser, but I can't set the zoom past 23 to begin with. Thoughts?

var map = L.map('mapdiv', {zoomControl: true}).setView([40.712,-74.006], 22);

L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
  maxNativeZoom:18,
  minZoom: 4,
  maxZoom: 35,
}).addTo(map);

L.control.scale().addTo(map);

Answer 1

It might be because when the map initially loads the tile layer on your .setView command it is trying to pull in tiled images from zoom layers that dont exist. That is on initial load your map is asking for tiles at zoom 25 and the server doesn't know how to respond.

If you specify a lower zoom level initially you are able to zoom normally past the boundaries because the leaflet api will oversample/rescan (I forget the term) and zoom in to the lowest tile image as specified as maxNativeZoom.

So I don't think you will be able to start your view at a lower than the tile cache allows because the server won't know which tiles to serve, but you can zoom past them after initialization, as shown by @IvanSanchez.

Also, if you are using ArcGIS onlines imagery they have tiles generated down to level 20 or 23 for some areas so you should set your maxNativeZoom accordingly, ie 20 or 23 to make sure you get the highest resolution tiles before you oversample.

service configuration

https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer