How to get XYZ tile coordinates by clicking on a sheet map

Question

I want to ask for help on the question of the possible use of non-standard coordinates on the Flyer map.

I want to use the Flyer to display custom maps with my own tile generator. Tiles are generated "on the fly" on the script, depending on where it will be displayed (parameters {x}, {y}, {z} in the request for the script URL) The map will be scalable (from 0 to 10), size ~ 16000 * 16000 tiles with maximum magnification and 16 * 16 tiles at minimum), and various objects will be displayed on it, each object in a separate tile. Each fragment of 64 * 64 pixels is an object on the map. For each object (square tile) I want to display its information with the click of a mouse by sending an AJAX request to the server. I did not want to preload all the information about all the objects in order to optimize. My main problem is that I can’t figure out how to correctly get the XY I coordinates of the tile that the mouse button was clicked on. In fact, because each fragment, when it is downloaded from the server, is tied to the {x}, {y}, {z} grid, and therefore I want to get these {x}, {y}, {z} from clicks on the map and send them for further AJAX request for information about the object. Now you can get the click point as Latlng coordinates or coordinates in pixels relative to the upper left corner of the map, which I cannot refer to the grid of tiles.

And also I wanted to know how to get the coordinates of the click relative to the tile. For example, if the tile measures 64 * 64, and the click was in the center of the tile, so how can I get the relative coordinate of the click [32, 32]? Because if we know the {X}, {Y}, {Z} coordinates of the tile and the relative coordinates of the X * and Y * click inside the tile, then we can make a “universal alternative coordinate grid”.

This may not be a problem, and it can be easily solved, but I have never worked with any Maps API, and therefore I want to know the answer to this question.

Thanks in advance for your help!

Answer 1

Here is a working example for getting the Zoom, X, and Y coordinates of a clicked tile (using the openstreet map): http://jsfiddle.net/84P9r/

function getTileURL(lat, lon, zoom) { var xtile = parseInt(Math.floor( (lon + 180) / 360 * (1<<zoom) )); var ytile = parseInt(Math.floor( (1 - Math.log(Math.tan(lat.toRad()) + 1 / Math.cos(lat.toRad())) / Math.PI) / 2 * (1<<zoom) )); return "" + zoom + "/" + xtile + "/" + ytile; } 

based on the answer https://stackoverflow.com/a/464626/

Answer 2

You can use the mouseEventToLayerPoint and mouseEventToContainerPoint in the Leaflet API to convert pixels on the screen to pixels relative to the top left map, and then, using a little math, you can get the location inside the tile.

Answer 3

This is what the leaflet does inside:

 var tileSize = [256, 256] var pixelPoint = map.project(e.latlng, map.getZoom()).floor() var coords = pixelPoint.unscaleBy(tileSize).floor() coords.z = map.getZoom() // { x: 212, y: 387, z: 10 }