How to Calculate Tiles Coordinates in Leaflet to Request TMS Server?

Question

In order to cache tiles for off-line use, I tried to calculate tiles coordinates according to a certain zoom level. Calculated x coordinates were correct but the y coordinates Were not.

This Old example compares actually received coordinates with that calculated. (click in the map to display results)

I was using map.project(latlng,zoom) to get the projected coordinates and then divide by tileSize which is 256. is this approach even correct ?

EDIT : Thanks to Ivan Sanchez for the orientation about y inversion in TMS. Actually after projecting the point with map.project(latlng,zoom) you need to inverse the y coordinate as follow :

You calculate _globalTileRange(zoom) for the corresponding zoom level, then
InvertedY = _globalTileRange(zoom).max.y - y ;

Here is another Link that shows the correct calculation of y coordinates for the current zoom of the map, for other zoom levels the globalTileRange need to be recalculated accordingly.

Regards,

score 1 · Accepted Answer · answered Jan 13 '17 at 10:09

Your approach is correct. However:

In order to get the tile coordinates loaded by Leaflet, you are looping through all the loaded images and outputting the min/max of those values.

The problem with this approach is that Leaflet doesn't immediately unload off-screen tiles. See the keepBuffer option, bug #4039 and PR #4650.

In order to fetch the bounds of tiles visible within the map bounds, see the private methods used internally by L.GridLayer around this line of code.
In TMS, the y coordinate goes up, and in non-TMS tiles it does down. This is because TMS was done by geographers, where the y coordinate is the northing, and non-TMS tiles were initially done by computer programmers, who interpret the y coordinate as downward pixels.

For more background, read https://wiki.openstreetmap.org/wiki/TMS#The_Y_coordinate and https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification#TileMap_Diagram and https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#X_and_Y

Thank you for the quick answer, the example was just to highligh the issue I am facing. I loop through the img's to get the real urls of the tiles shown on the screen. As you can see in the example the tweaked GridLayer shows the internal calculations of coords and they are not the same, not even included in the actual range (zoom in to see the big differences). — bydos, Jan 13 '17 at 12:04
They are not the same because of the reasons I explained above. If the Y coordinate confuses you, print out `(2^zoom - y)` instead of simply `y`. — IvanSanchez, Jan 13 '17 at 12:29

How to Calculate Tiles Coordinates in Leaflet to Request TMS Server?

1 Answers1