When you display a map on a web page, what you see is not a single large image, but rather a collection of smaller images called tiles. These tiles are arranged in a grid and loaded dynamically as you pan or zoom the map. This system is known as a tile layer. Tile layers are a core part of web mapping libraries like Leaflet.js, because they make it possible to efficiently show detailed and interactive maps without needing to download huge image files at once.

Tile layers work by dividing the world map into a set of square images at various zoom levels. As you move around the map, new tiles are fetched and displayed as needed. This approach keeps your map fast and responsive, even when showing large areas or high levels of detail. In Leaflet.js, you add a tile layer to your map to provide the base imagery—such as streets, terrain, or satellite views—that forms the foundation for additional features like markers and popups.

Without tile layers, your map would have no visual context. They provide the geographic background that helps users understand where markers and other data are located. Most web maps use publicly available tile sources, such as OpenStreetMap, but you can also use custom tiles to match the style or requirements of your application.