How to tell when all visible tiles have fully loaded?

Question

Is there an event (or other method) to detect when all visible tiles have been downloaded and displayed with leaflet? (Similar to Google Maps event that is called when all visible map tiles are loaded, but for leaflet instead)

What about http://leafletjs.com/reference-1.2.0.html#map-whenready? — Christian Martinez, Jan 05 '18 at 17:48

score 40 · Accepted Answer · answered Mar 10 '14 at 02:48

40

Solved. Bind the "load" event on the tile layer. Example:

var tile_layer=L.tileLayer(tile_url,{
  attribution: "Map data &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> "+
    "contributors, <a href='http://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>.",
  maxZoom: 18
});
tile_layer.addTo(map);
tile_layer.on("load",function() { console.log("all visible tiles have been loaded") });

answered Mar 10 '14 at 02:48

Forest Katsch

1,485
2
15
26

Very useful, thanks. Some answers elsewhere mention adding the 'load' listener at the map level but it fires almost immediately. – AlexG Jan 27 '21 at 10:00

score 27 · Answer 2 · edited Jan 17 '17 at 01:30

27

The list of TileLayer events according to the leaflet documentation:

loading Event - Fired when the tile layer starts loading tiles.

load Event - Fired when the tile layer loaded all visible tiles.

tileloadstart TileEvent - Fired when a tile is requested and starts loading.

tileload TileEvent - Fired when a tile loads.

tileunload TileEvent - Fired when a tile is removed (e.g. when you have unloadInvisibleTiles on).

edited Jan 17 '17 at 01:30

Matt Hampel

5,088
12
52
78

answered Dec 11 '14 at 11:09

NXT

1,981
1
24
30

2

For a full list of map events, see http://leafletjs.com/reference.html#map-events. – Erik Vullings Dec 04 '15 at 15:20

How to tell when all visible tiles have fully loaded?

2 Answers2