How leaflet js load tiles from file system

Question

suppose tiles are store in file system like below image

roughly seen this url http://build-failed.blogspot.in/2012/11/zoomable-image-with-leaflet.html

see the code

var map = L.map('map').setView([0, 0], 2);
        L.tileLayer('http://localhost/tiles/eso/0/0/0.png', {
            minZoom: 1,
            maxZoom: 6,
            attribution: 'Testing',
            tms: true
        }).addTo(map);

from the above code it seems that loading tile 0/0/0.png means refer one tile. so my question is how leaflet will load so many tiles because this url http://localhost/tiles/eso/0/0/0.png refer one tile.

the above code is right?

the above code can load bunch of tiles ?

what setView([0, 0], 2); doing ? what is the meaning of 0,0 and 2 what does it mean ?

also tell me what the below code is trying to say

var map = L.map('map').setView([0, 0], 2);
        L.tileLayer('eso/{z}/{x}/{y}.jpg', {
            minZoom: 1,
            maxZoom: 6,
            attribution: 'ESO/INAF-VST/OmegaCAM',
            tms: true
        }).addTo(map);

in the above code we do not mention any value for z or for y or x ?

what approach i need to follow in real life ? do i need to specify value or leaf will provider value for z,y, and x at run time ?

please let me know. thanks

Answer 1

1) Above code is wrong. Test it and you will see always the same repeated 0/0/0 tile.

2) Above code cannot load bunch of tiles, or actually it creates bunch of tiles all having the same image.

3) setView([0, 0], 2) centers the map view on coordinates point latitude 0 degree, longitude 0 degree, and with zoom level 2 (zoom level 0 being the entire planet in 1 tile).

4) Refer to Leaflet documentation about raster Tile Layer:

{z} — zoom level, {x} and {y} — tile coordinates.

The first argument of L.tileLayeris the urlTemplate. The {z}, {x} and {y} texts are replaced by Leaflet by the target tile coordinates. For example, you can go to OpenStreetMap and right click on any tile (anywhere on the base map), select "Open image" (or "View image") and the browser will show only the particular tile with its exact URL, where z, x and y have been adjusted by Leaflet to point to that particular tile.

The background system is that tiles are arranged in a Quadtree structure, assuming zoom level 0 corresponds to the entire map fitting in a single tile (i.e. 0/0/0). Then for the next higher zoom level, each tile is subdivided into 4 child tiles. And so on.

So in the example folder structure you exhibit in your question, tiles 1/0/0 and 1/0/1 are the left half of tile 0/0/0. Tile 1/0/0 is the top left corner, tile 1/0/1 is the bottom left corner.

Again, all this is automatically managed by Leaflet, provided that your tiles follow this Quadtree arrangement (whether in folders or within their file name, like for Zoomify).