Leaflet: how many tiles are loaded when map is loading for the first time? - leaflet

Question

I integrated Leaflet OSM (Open Street Maps) to my application and the map view is loading.
this.map = leaflet.map(this.mapContainer.nativeElement, {
preferCanvas: true,
zoom: 14,
zoomAnimationThreshold: 0,
renderer: leaflet.canvas()
});
I want the count of tiles loaded when map is loaded.
I checked official docs of leaflet but didn't find regarding the count.
do I need to calculate the count of tiles loaded according to screen? if yes then how?

Answer 1

You can try this:
function getTilesCount(){
var tileLayers = map.getPane('tilePane').children[0].children;
var idx = -1;
var tileCount = 0;
for(var i = 0; i < tileLayers.length; i++){
var tile = tileLayers[i];
if(tile.style.zIndex >= idx){
idx = tile.style.zIndex;
tileCount = tile.children.length;
}
}
return tileCount;
}
It counts the DOM tiles in tile container with the highest z-Index

Answer 2

Leverage the tileload event of L.TileLayers, e.g.
var tileCount = 0;
myTileLayer.on('tileload', function() { tileCount++ });
If you want to count tiles on initial map load, you should make sure to hook an event handler for the corresponding tileload event before the tilelayer starts loading, and stop counting when the tilelayer reports all tiles loaded (via its load event), e.g.:
var map = L.map('leaflet', {
center: [0, 0],
zoom: 3
});
// Create a tilelayer but *do not* add it to the map *yet*
var myTileLayer =
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
});
var tileCount = 0;
// Hook up event handlers...
myTileLayer.on('tileload', function(){ tileCount++; });
myTileLayer.once('load', function(){
// Do something with the number of loaded tiles
window.alert(tileCount);
// Detach all event handlers for the 'tileload' event since they're not needed anymore
myTileLayer.off('tileload');
});
// Now that the event handlers are ready, add the tilelayer to the map
myTileLayer.addTo(map);