Leaflet how to increase maxZoom

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: '&copy; <a href="http://www.example.com/">Example</a>'
    }).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: '&copy; <a href="http://www.example.com/">Example</a>',
        maxNativeZoom:19,
        maxZoom:25
    }).addTo($scope.map);

Answer 2

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})