CODEWITHSUNDEEP
javascriptleaflethere-maps-rest
YSN BRYAN
YSN BRYAN

Reputation: 25

Leaflet map is going blank when zooming more than 18

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/

Upvotes: 2

Views: 1920

Answers (2)

aminovic nouri
aminovic nouri

Reputation: 11

TileLayerOptions( urlTemplate: 'https://api.mapbox.com/styles/v1/elaminenouri/ckli0urcv13m317nw1n40u58z/tiles/256/{z}/{x}/{y}@2x? additionalOptions: {

            },
          maxNativeZoom: 18,
          maxZoom: 22

        ),

Upvotes: 0

ghybs
ghybs

Reputation: 53185

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)

Upvotes: 3

Related Questions