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?

Answer 1

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/

Answer 2

I worked around the problem by setting the zoom after the layer is loaded using:

map.setZoom(10);