Leaflet how to increase maxZoom - leaflet

Question

I am using Leaflet in my application and I need to zoom more than 18 levels (19 or 20 will be enough I think). But when I zoom more than 18 levels, the map image disappears leaving only a grey plane.
Here is the html:
<div id="map"></div>
Here is the js:
var options = {
maxZoom: 19,
minZoom: 18
};
$timeout(function() {
$scope.map = L.map('map', options).setView([38.62276209666611, 34.70849695797369], 18);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© Example'
}).addTo($scope.map);
$scope.map.dragging.disable();
});
I already tried these:
map.options.minZoom = 18;
map.options.maxZoom = 19;
And maxNativeZoom.

Answer 1

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© Example',
maxNativeZoom:19,
maxZoom:25
}).addTo($scope.map);

Answer 2

maxNativeZoom is an option of L.TileLayer, not an option of L.Map. This is properly documented in the Leaflet reference.
See a working example.

Answer 3

Also set maxZoom to tileLayer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© Example',
maxZoom: 20
}).addTo($scope.map);

Answer 4

here is a Mapbox configuration, I found that the perfect zoom settings for me are "maxNativeZoom" : 19, "maxZoom": 20, you can increase the maxZoom value, but you can't increase "maxNativeZoom" value above 19 because it will show gray tiles
L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{"attribution": "Mapbox", "detectRetina": false, "maxNativeZoom": 19, "maxZoom": 20, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false})