CODEWITHSUNDEEP
javascripteventsleafletdom-events
Forest Katsch
Forest Katsch

Reputation: 1555

How to tell when all visible tiles have fully loaded?

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)

Upvotes: 27

Views: 20902

Answers (2)

NXT
NXT

Reputation: 2011

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).

Upvotes: 27

Forest Katsch
Forest Katsch

Reputation: 1555

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") });

Upvotes: 41

Related Questions