Leaflet: Lazy load mapbox tiles

Asked by At

How can I lazyload map tiles when using Leaflet?

Especially on mobile devices I don't want to load maptiles at the beginning because most of my users never scroll down to the map.

1 Answers

ghybs On

Well, a very simple trick would be to create your map, or at least to add your Tile Layer, only when your map container comes into viewport.

That way, the tiles will not be requested before the map is actually viewable.

As to how to know when this situation happens, you should find plenty resources online and here. Basically you compare the document scroll and the map container position, and listen to scroll event. A more recent solution uses Intersection Observer.