How to get X Y Z coordinates of tile by click on Leaflet map

Question

I want to ask for help to deal with the possible use of non-standard coordinates on the map Leaflet.

I want to use Leaflet to display custom maps with my own tile generator. Tiles are generated on the fly by script, depending on where it is planned to display (parameters {x}, {y}, {z} in the URL request to the script) Map will be zoomable (from 0 to 10), size of ~16000 * 16000 tiles in maximum zoom, and 16 * 16 tiles in a minimum) and it will display a variety of objects, each object in a separate tile. Each tile of 64 * 64 pixels is the object on map. For each object (a square-tile) I want to display it`s information on mouse click, by sending via AJAX request to the server. I did not want to pre-load all information about all objects for the goal of optimization. My main issue - I cannot understand how to correctly get the X Y Я coordinates of the tile on which mouse clicked. Essentially because each tile when it is loaded from the server is bound to the grid {x}, {y}, {z}, and so I want to get these {x}, {y}, {z} from clicks on the map and send them for further AJAX request for getting information about the object. Now it is possible to get click point as Latlng coordinates or coordinates in pixels relative to the upper-left corner of the map, which I cannot reference to tiles grid.

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

May be this is not a problem and it can be solved easily, but I've never worked with any Maps API, and therefore I want to know the answer to this question.

Thanks in advance for your help!

Chill

Answer 1

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

function getTileURL(lat, lon, zoom) {
    let xtile = parseInt(Math.floor((lon + 180) / 360 * (1 << zoom)));
    let 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 an answer https://stackoverflow.com/a/19197572

Dramamine

Answer 2

You can use the mouseEventToLayerPoint and mouseEventToContainerPoint methods in the Leaflet API to convert pixels onscreen to pixels relative to the top-left of the map, and then using a little math, you can derive the location within a tile.

Contreras

Answer 3

This is what Leaflet does internally:

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

Hartill

is that the right param to send to unscaleBy - the source assumes an object with x and y props: unscaleBy: function(t) { return new o.Point(this.x / t.x,this.y / t.y) }, – Servia

how do you convert x/y coordinates to lat, long – Giuseppe

get point (lat,long) --> map it to the tile it's inside --> get coordinates of that box/tile (left,right, top, bottom) – Giuseppe