2

i got a link which try to explain how to store image tiles in file system but not very clear to me. here is the url http://build-failed.blogspot.in/2012/11/zoomable-image-with-leaflet.html

just see this image enter image description here

just seen many sub folder has been created as per image but do not understand what they try to point out with arrow images ?

how this eso / «z» / «x» / «y».jpg is related with images folder structure? 1) why zero folder is consider as z ? 2) why zero and one sub folder in parent folder called one is consider as x ? 1) why 0.png and 1.png images are consider as y ?

the above three things is not clear due to lack of explanation. what is the relation there ?

if some one already knows it or do understand then please share the knowledge with me. thanks

Mou
  • 15,673
  • 43
  • 156
  • 275

1 Answers1

3

Ok I'll try to explain.

First z = zoom level, x=longitude, y=latitude

Longitude and latitude are not real value taken from the map projection but grid indexes.

The way you store the tiles is like this:

  1. First parent folder: z (zoom level)
  2. Child folders: all x at this zoom level
  3. Images names: all y at this x position and this zoom level

If you want to store for instance the following tile: /0/0/0.png

  • Folder: 0
  • Subfolder: 0
  • 0.png

At zoom level 0, habitually there is only on tile for the whole world so only a subfolder 0 (for the x) and an image 0.png (for the y). At each zoom level the number of images increase exponentially.

For the /12/6/7.png

  • Folder: 12
  • Subfolder: 6
  • 7.png

Feel free to ask for more details if something is not clear.

Below the Radar
  • 7,321
  • 11
  • 63
  • 142
  • thanks for answer. now can u refer any c# sample code which will create tile of my big images following the convention of above image i posted. – Mou Aug 07 '15 at 18:16
  • sorry to ask you a question that previously you worked with leaflet.js for loading custom images instead of map images? – Mou Aug 07 '15 at 18:17
  • I dont know any tool in c# to do so, but GDAL2Tiles is a simple bash command tool in python that will do the job. – Below the Radar Aug 07 '15 at 18:25
  • can u tell me any url from where i can download all tile images of a big image. so i may understand how to generate file writing c# routine. thanks – Mou Aug 07 '15 at 18:30
  • maybe you'll find what you are looking for in this blog: http://www-cs-students.stanford.edu/~amitp/gameprog.html – Below the Radar Aug 07 '15 at 18:34
  • i roughly see your last link.....looking promising but like to know does that code will generate image following the same convention as per my images pasted in my post? – Mou Aug 07 '15 at 19:11
  • I cant say, but probably. Try with zoom level 0 to 3 at first. It will takes few seconds to generate the tiles – Below the Radar Aug 07 '15 at 19:17
  • sorry to ask....what is zoom level? can we put all slice pics in folder and refer that folder in leaflet.js.......is it possible? if yes then can u post a sample code of similar of leaflet.js. thanks – Mou Aug 07 '15 at 19:20
  • zoom level is kind of the scale of the map. Leaflet have predetermined scale you can zoom in and zoom out. Zoom level 0 is the farther you can go. As far as you zoom in, the zoom level increase. No you cant just put all the tiles in a single folder. – Below the Radar Aug 07 '15 at 19:24
  • sorry to ask so many questions here. i have seen leaflet can load a single image. here is one link http://jsfiddle.net/tridip/kj9sLt07/2/. my objective : i could load a huge big image by leaflet but it may take long time and that is why i am after slice images. basically i want to load slice images and let user to navigate by dragging. when user drag left/right or up/down then other part of image will be visible and i want leaflet should load other part slice on fly when will be required. so please guide me how to achieve it. – Mou Aug 07 '15 at 19:36
  • please share knowledge if u know....z is for zoom but what zoom does in leaflet js? when we specify url localhost/tileserver{z}/{x}/{y}.png for loading tile image then what z does? anyone can elaborately explain the meaning of z/x/y ? – Thomas Mar 22 '16 at 18:32