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 g

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) {
    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 an answer https://stackoverflow.com/a/19197572

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.

Answer 3

This is what Leaflet does internally:

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 }