Leaflet map is going blank when zooming more than 18

Question

I'm using leaflet and her maps API, the problem is when I zoom more than 18x, the map goes blank. I added the maxNativeZoom but no success. the max zoom supported by here maps is 20 (source : docs online)

    const here = {
  apiKey:'API_Key'
}
const style = 'hybrid.day';

const hereTileUrl = `https://2.aerial.maps.ls.hereapi.com/maptile/2.1/maptile/newest/${style}/{z}/{x}/{y}/512/jpg?apiKey=${here.apiKey}&ppi=500`;

const map = L.map('map', {
   center: [33.288410, -8.345090],
   zoom: 16,
  maxZoom: 20,
  maxNativeZoom: 20,
    // maxZoom: 22,
   layers: [L.tileLayer(hereTileUrl)]
});
map.attributionControl.addAttribution('© HERE 2019');
map.on('zoomend', showZoomLevel);
    showZoomLevel();
       function showZoomLevel() {
      document.getElementById('zoom').innerHTML = map.getZoom();
    }
//alert(map.getMaxZoom());

https://jsfiddle.net/b73t0oe1/

Answer 1

For your objective, you should use options maxZoom (and maxNativeZoom if necessary) on your Leaflet Tile Layer, instead of on your map.

L.tileLayer(hereTileUrl, {
  maxZoom: 20,
  maxNativeZoom: 19
})

Updated jsfiddle: https://jsfiddle.net/7xnv0c1a/ (Your tile source maxNativeZoom seems really to be 19, at least in the area you start your map at)