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());
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)