Map tiles not loading until a zoom is executed(Leaflet)

Question

Here's the code:

mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';

var map = L.map('map').setView([25.7617,-80.18], 30);
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
}).addTo(map);

It gives no errors, yet it starts off as gray unless I zoom. Is there an attribute I'm missing or something? Must be a tile problem?

Hard to say with so few details… Which version of Leaflet are you using? How do you initialize the map and set the initial view? Could you share more code and reproduce your issue on JSFiddle, Plunker or JSBin? — ghybs

ghybs ghybs · Accepted Answer · 2016-07-04T02:40:30

When you set your initial view:

var map = L.map('map').setView([25.7617,-80.18], 30);

you request a zoom level of… 30, which is far beyond what your Tile Layer can provide (maxZoom: 18).

As soon as you manually perform a zoom request, Leaflet zooms back to within its possible zooms, i.e. back to 18.

Demo: http://jsfiddle.net/3v7hd2vx/30/

Simply set your initial view to within your possible zooms (i.e. less than or equal to 18 in your case) and you will be fine.

var map = L.map('map').setView([25.7617,-80.18], 10);

Demo: http://jsfiddle.net/3v7hd2vx/31/

Map tiles not loading until a zoom is executed(Leaflet)

2 Answers