Currently i'm implementing a leaflet map that serves map data from our own OSM server.

During the implementation I noticed that the details on the maps are not clearly visible. Street names are unclear and walking paths do not stand out.

We currently support a zoom level of 17. However, the tiles received are of high quality and show much more detail than leaflet does. If I zoom in further, the tiles unfortunately turn gray.

An implementation with OpenLayers looks clearer.

Is there a setting that solves this or that allows you to zoom in without showing gray tiles? I thought this was maxNativeZoom but if i put this field on 17, it still tries to show zoom level 18 tiles.

const osmLayer = new L.TileLayer(osmUrl,
    {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    });

const element = elemId[0].className + "-" + mapId;

const map = new L.Map(element,
    {
        maxZoom: 22,
        maxNativeZoom: 17,
        minZoom: 9
    });

map.addLayer(osmLayer);

return map;